Я обожаю 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;
То есть смещение по горизонтали должно быть отрицательным, а по вертикали — положительным. В предыдущем примере все было наоборот. В результате получаем левостороннюю стрелку: