Приветствую вас на своем блоге. Сегодня я расскажу, как делается в css тень блока, подробно рассмотрим синтаксис свойства box-shadow и какие эффекты можно создавать с его помощью. Ближе к концу статьи я вам покажу еще одно свойство – drop-shadow, которое кое в чем даже круче 
Тени в css
Итак, для начала давайте разбираться со свойством box-shadow. Оно имеет такой синтаксис:
Box-shadow: смещение по горизонтали | смещение по вертикали | размытие | растяжение | цвет
Итак, всего может быть 5 значений, но на самом деле может быть и 6 – если в самое начало добавить слово inset, то тень будет внутри блока, а не снаружи (подробнее о внутренней тени здесь).
Обязательными значениями являются только смещения и цвет. Размытие и растяжение можно не писать, а можно просто ставить 0 – тут по вашему желанию. Теперь подробнее о каждом значении:
Смещение по горизонтали. Задают обычно в пикселях. Положительное двигает тень вправо, отрицательное – влево.
По вертикали. Положительное значение – вниз, отрицательное – вверх.
Размытие. Определяет, насколько тень будет четкой. Чем больше значение, тем более тусклый цвет, тень распространяется на большую площадь, но становится менее явной.
Растяжение. Определяет, насколько тень будет больше блока, к которому она применяется. По умолчанию тень полностью под блоком и имеет размеры такие же, как и он сам.
Цвет. Тут, я думаю, вам и так все понятно. Оставлю это без комментариев.
Примеры
Теперь самое время посмотреть несколько примеров применения теней и каких эффектов можно добиться с ее помощью.
Легкая трехмерность
Очень часто тени применяют для того, чтобы сделать блок трехмерным. Все операции я буду производить в пустом html-документе, где создан всего лишь один блок div. Вот такие я ему определил стили:
div {
width: 300px;
height: 200px;
background: #B5E4AF;
margin: 100px;
box-shadow: 3px 3px 3px 0 blue;
}
Благодаря такой легко смещенной и немного размытой тени создается впечатление небольшой выпуклости блока.
Легкое свечение
Мне очень нравится эффект, при котором возникает впечатление, как будто блок светиться. А реализуется он очень просто:
box-shadow: 0 0 5px 0 blue;
Выставляем все на 0, кроме размытия. Цвет указывайте такой, как вам нужно. Соответственно, чем больше размытие, тем более явным будет это свечение. Например, при 25 пикселях размытия:
Множественная рамка
Обычно рамку блокам задают с помощью свойства border, но у него есть несколько минусов – такая рамка добавляет размеры блоку, а также нельзя задать несколько рамок, только одну.
Box-shadow позволяет полностью имитировать рамку. А я напомню, что теней можно добавлять неограниченное количество, поэтому вы можете сделать сколько угодно рамок, просто добавляя каждый новую тень через запятую с большим растяжением. При желании их еще можно немного размыть.
Вот такой код добавит к элементу тройную рамку:
box-shadow: 0 0 0 5px aqua, 0 0 0 10px blue, 0 0 0 15px purple;
3D овал
Помните, что тень полностью соответствует самому элементу – если он круглый, то и сама тень круглая.
div {
width: 300px;
height:200px;
background: #B5E4AF;
margin: 100px;
box-shadow: 6px 6px blue;
border-radius: 50%;
}
Получаем вот такой вот овал с тенью. Если бы высота и ширина блока были одинаковыми, то блок был бы круглым, как и его тень.
Drop-shadow
Все это были очень-очень простые примеры теней для блоков. А как насчет добавить тень к png-изображению? Как вы помним, box-shadow может делать тень только квадратным блокам. Конечно, элементы можно трансформировать из квадратных и прямоугольных, но все равно возможности box-shadow ограничены. И тут на помощь приходит css фильтр под названием drop-shadow.
Я нашел в сети изображение в формате png. Сейчас я вставлю его к себе на страницу с помощью тега img.
<img src = "css.png">
img{
-webkit-filter: drop-shadow(17px 0 grey);
}
Чтобы свойство работало, ему необходимо добавить вендорный префикс –webkit (если вы работаете в Google Chrome или Яндекс.Браузере). Для других браузеров нужны, соответственно, другие префиксы.
Итак, вот что получилось:
Тень полностью повторяет контуры изображения! Такого не добиться с помощью box-shadow. Я хотел бы отметить, что также drop-shadow не поддерживает растяжение, но размытие поддерживает.
Пример продвинутого использования теней
Теперь настал час разобрать более сложный пример теней. Я покажу вам, как можно сделать блоку приподнятые уголки на чистом css.
<div class = "ugolki ug"></div>
В html создаю блок с классом ugolki и дополнительным классом ug, через который будут добавляться тени, чтобы для русского человека все было понятно.
.ugolki {
position:relative;
width: 300px;
height: 200px;
padding: 5px;
margin: 0 auto;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
Заметьте, что используется формат записи цвета rgba, что позволяет делать не резкие тени, которые в целом очень хорошо воспринимаются глазом. Но пока у нас нет приподнятых уголков, а просто блок с небольшим свечением. Уголки мы добавим с помощью псевдоэлементов.
.ugolki:before,
.ugolki:after {
content:"";
position:absolute;
z-index:-2;
bottom:15px;
left:10px;
width:50%;
height:20%;
}
.ugolki:after{
right:10px;
left:auto;
}
.ug:before,
.ug:after {
max-width:300px;
-webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate(-3deg);
transform:rotate(-3deg);
}
.ug:after {
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg);
transform:rotate(3deg);
}
Добавляем весь этот длиннючий код в наш css-файл. Теперь все должно заработать. Вы можете самостоятельно менять поворот теней и их цвет.
Яйцо на чистом css
Экспериментировал я тут и смотрю, яйцо получилось Вот делюсь с вами кодом:
<div class = "egg"></div>
.egg {
position:relative;
width: 300px;
height: 200px;
border-radius: 50%;
padding: 5px;
margin: 0 auto;
background:#fff;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 60px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
Соответственно, тут прописаны еще и вендорные префиксы для того, чтобы свойство работало в самых популярных браузерах.
Похоже на яйцо, не так ли?
В общем, подобных примеров можно приводить еще много, но я думаю, основную суть вы поняли: для чего нужны тени, как их записывать и какой у свойства синтаксис. На этом я закончу эту статью. Пишите в комментарии любые вопросы.
Ну а что делать, если вы не хотите самостоятельно писать код для теней? Воспользуйтесь визуальным генератором! Об одном из них я написал здесь.
Спасибо)) Получилось.