Бешеный конкурс!
4:22
Автор: Рубрика: CSS-рецепты Один комментарий

Как делается в css тень блока?

Приветствую вас на своем блоге. Сегодня я расскажу, как делается в css тень блока, подробно рассмотрим синтаксис свойства box-shadow и какие эффекты можно создавать с его помощью. Ближе к концу статьи я вам покажу еще одно свойство – drop-shadow, которое кое в чем даже круче laugh

Тени в 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;
}

Благодаря такой легко смещенной и немного размытой тени создается впечатление небольшой выпуклости блока.трехмерность

Легкое свечение

Мне очень нравится эффект, при котором возникает впечатление, как будто блок светиться. А реализуется он очень просто:

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

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">

css

img{
-webkit-filter: drop-shadow(17px 0 grey);
}

Чтобы свойство работало, ему необходимо добавить вендорный префикс –webkit (если вы работаете в Google Chrome или Яндекс.Браузере). Для других браузеров нужны, соответственно, другие префиксы.

Итак, вот что получилось:drop-shadow

Тень полностью повторяет контуры изображения! Такого не добиться с помощью 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 тень блока

Яйцо на чистом css

Экспериментировал я тут и смотрю, яйцо получилось laugh Вот делюсь с вами кодом:

<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;
}

Соответственно, тут прописаны еще и вендорные префиксы для того, чтобы свойство работало в самых популярных браузерах.
яйцо
Похоже на яйцо, не так ли? laugh

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

Ну а что делать, если вы не хотите самостоятельно писать код для теней? Воспользуйтесь визуальным генератором! Об одном из них я написал здесь.

Еще материалы по CSS

Бесплатный курс по CSS

Премиум уроки по CSS

Полный практический курс по HTML5&CSS3

Один комментарий
  • seoonly.ru

    Спасибо)) Получилось.

    2016-02-15 в 7:26 | Ответить