Рецепты CSS: навигационные стрелочки на чистом CSS3

Я обожаю CSS3. Эта технология позволяет заняться рисованием прямо в браузере. Достаточно лишь знать нужные свойства и можно начать эксперименты.

Иногда я люблю проводить разные эксперименты с элементами на CSS3. Это стало для меня своего рода компьютерной игрой. Сегодня я включил нетбук с мыслью, что неплохо было бы освежить свои знания в области теней. Тени для элементов задаются с помощью css-свойства box-shadow. На самом деле есть еще одно прекрасное свойство для этого, но о нем я расскажу в следующий раз.

Хотел бы сказать, что эта статья не выступает справочником по теням. Если вы не знакомы с этим свойством, то вам нужно прочитать другую статью.

Теневое искусство

Открыл и сегодня я окно программы Notepad++. В процессе экспериментов ко мне пришла идея создать навигационные стрелочки, которые подходили бы по дизайну к моему блогу.

Разметка в html предельно проста. Всего лишь подключил таблицу стилей и создал один блок с идентификатором. Далее вся работа будет происходить в таблице стилей.

#block{
	background: orange;
        width: 250px;
	height: 250px;
        border-radius: 25px;
        transform: rotate(45deg);

Указали размеры блока, указали цвет фона, скругление углов. Повернули блок на 45 градусов, чтобы он стал ромбом. Теперь можно переходить непосредственно к прописыванию теней:


box-shadow: 20px -20px 5px 0 white, 40px -40px 5px 0 grey,
	60px -60px 5px 0 white, 80px -80px 5px 0 grey,
	100px -100px 5px 0 white, 120px -120px 5px 0 grey,
	140px -140px 5px 0 orange;

Допишем это к уже имеющимся стилям. Мы добавили семь теней к нашему блоку. В результате наш элемент будет выглядеть так:стрелка вправо
Итак, стрелку вправо мы сделали. Теперь нужно сделать в обратную сторону. Для этого нужно создать такой же блок. Единственным отличием от первого будет различие в смещении теней. Для левосторонней стрелки нужно задать:


box-shadow: -20px 20px 5px 0 white, -40px 40px 5px 0 grey, -60px 60px 5px 0 white, -80px 80px 5px 0 grey,
-100px 100px 5px 0 white, -120px 120px 5px 0 grey, -140px 140px 5px 0 orange;

То есть смещение по горизонтали должно быть отрицательным, а по вертикали — положительным. В предыдущем примере все было наоборот. В результате получаем левостороннюю стрелку:стрелка влево

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: