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

Приветствую вас на своем блоге. Сегодня я расскажу, как делается в 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">
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;
    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;
    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    transform:rotate(-3deg);
}
.ug:after {
    transform:rotate(3deg);
}
делаем с помощью css тень блока


Добавляем весь этот длиннючий код в наш css-файл. Теперь все должно заработать. Вы можете самостоятельно менять поворот теней и их цвет.

Итог

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

Понравилась статья? Поделиться с друзьями:
Комментариев: 2
  1. Сергей

    Свечение — это то, что надо. Спасибо.

  2. seoonly.ru

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

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