Как делается в 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;
   }

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

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

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

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

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

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

Комментариев: 1
  1. seoonly.ru

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

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

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