Главная » Администрирование сайта » Работа со стилями (CSS) » Эффект тени при помощи CSS3

Эффект тени при помощи CSS3

12.09.2012 в 21:23
Автор: Sheriff   

Эффект тени мы будем выполнять с помощью CSS. Соответственно никаких изображений, только стили.

В том числе мы будем применять свойство box-shadow. Также можно будет задать любой цвет для тени, смещение, размер, или же применять его для иных элементов, главное экспериментировать smile CSS генератор.

Поддержка браузеров:
  • Opera 10.5 и выше.
  • Firefox 3.5 и выше;
  • Chrome 1 и выше;
  • Safari 3 и выше.


В основном все современные браузеры поддерживают эффекты тени. Кстати, хотелось бы упомянуть один немаловажный момент: для некоторых браузеров мы будем использовать префиксы, то есть для Firefox применяется -moz-, для Safari и Chrome нужно использовать префикс -webkit-, а для Opera префикс -o- smile

А теперь давайте перейдём к самой интересной части и рассмотрим каждый эффект тени отдельно. Всего эффектов будет 8.


Эффект тени №1

В данном примере эффект тени от блока располагается снизу.

CSS:
Code
.primer1{-webkit-box-shadow: 0 10px 5px -5px #777;  
-moz-box-shadow: 0 10px 5px -5px #777;  
box-shadow: 0 10px 5px -5px #777;}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer1">
  <h3>Пример №1</h3>
</div>




Эффект тени №2

В этом примере эффект тени от блока идёт слева и справа, а по середине её нет.

Code
.primer2{position: relative;}

.primer2:before, .primer2:after{z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);}

.primer2:after{-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer2">
  <h3>Пример №2</h3>
</div>




Эффект тени №3

В данном примере эффект тени от блока только слева.

CSS:
Code
.primer3{position: relative;}

.primer3:before{z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer3">
<h3>Пример №3</h3>
</div>




Эффект тени №4

В данном примере эффект тени от блока только справа.

CSS:
Code
.primer4{position: relative;}

.primer4:after{z-index: -1;
position: absolute;
content: "";
bottom: 15px;
right: 10px;
left: auto;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 15px 10px #777;
-moz-box-shadow: 0 15px 10px #777;
box-shadow: 0 15px 10px #777;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer4">
<h3>Пример №4</h3>
</div>




Эффект тени №5

В данном примере эффект тени от блока с 2-х сторон сдвинулась вниз.

CSS:
Code
.primer5{position: relative;}

.primer5:before, .primer5:after{z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #777;
-webkit-box-shadow: 0 35px 20px #777;
-moz-box-shadow: 0 35px 20px #777;
box-shadow: 0 35px 20px #777;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
transform: rotate(-8deg);}

.primer5:after{-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}

HTML:
Code
<div class="box primer5">
<h3>Пример №5</h3>
</div>




Эффект тени №6

В данном примере эффект изогнутых теней на дне блока.

CSS:
Code
.primer6{position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px 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;}

.primer6:before, .primer6:after{content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:50%;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;}

.primer6:after{right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer6">
<h3>Пример №6</h3>
</div>




Эффект тени №7

В данном примере эффект тени снизу и сверху блока.

CSS:
Code
.primer7{position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px 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;}

.primer7:before, .primer7:after{content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:0;
bottom:0;
left:10px;
right:10px;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;}

.primer7:after{right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


HTML:
Code
<div class="box primer7">
<h3>Пример №7</h3>
</div>




Эффект тени №8

В данном примере эффект тени изогнут по бокам блока.

Code
.primer8{position:relative;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px 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;}

.primer8:before, .primer8:after{content:"";
position:absolute;
z-index:-1;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
top:10px;
bottom:10px;
left:0;
right:0;
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;}

.primer8:after{right:10px;
left:auto;
-webkit-transform:skew(8deg) rotate(3deg);
-moz-transform:skew(8deg) rotate(3deg);
-o-transform:skew(8deg) rotate(3deg);
transform:skew(8deg) rotate(3deg);}

.box h3{text-align:center;
position:relative;
top:80px;}

.box{width:70%;
height:200px;
background:#FFF;
margin:40px auto;}


Code
<div class="box primer8">
<h3>Пример №8</h3>
</div>




Вот и всё! Если Вам что-либо будет непонятно, обязательно спрашивайте в комментариях.

Прикреплённый файл: 451_primer.html (5.7Kb)

Рейтинг: 22  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 17932          Комментариев: 9
13.06.2016 в 12:30      0  

Не работает sad
10.06.2016 в 19:57      0  

В частности меня интересует эффект №4. И как его применить к картинке? Не к блоку, а именно к изображению вставленному в материал.
10.06.2016 в 19:42      0  

Все классно!!! Один вопрос. Как применить это все к уже вставленному изображению?
19.03.2014 в 11:22      0  

Не смогла вставить тень №7 в свой сайт-журнал об искусстве
http://postklau.ru/
где для оформления картин это было бы очень нужно, так как со вчерашнего дня почему-то у меня изменились условия ввода нового материала и невозможно вставить скопированный здесь код в своей панели управления - таблица стилей CSS. Запрет на копрование почему-то. Кто это придумал? так "улучшил"? или это лично меня кто-то за что-то наказал? Исчезла и функция добавить рамку на изображение - хорошо хоть раньше успела что-то оформить как надо
28.10.2013 в 18:03      0  

А я не понял(Эти строки уже есть в CSS? Или самому надо писать?Не могу найти и близко такие строки((((((
29.10.2013 в 09:15      0  

Здравствуйте, Dodo. Соответствующие стили и HTML код необходимо добавлять вручную. Стили Вы можете добавлять напрямую в шаблон дизайна Вашего сайта: Панель управления → Управление дизайном → Таблица стилей (CSS).
19.09.2012 в 20:20      +3  

не большое дополнение,вдруг кто не знает:0px 1px 4px rgba(0, 0, 0, 0.3)
1)первое значение 0px,здвиг по горизонтали
2) второе 1px,здвиг по вертикали
3) третье 4px,размытие
4)цвет
можно использовать как для блоков так и для текста,вариантов много,только IE не хочет видеть этого.
можно для блоков использовать border-radius,скругление углов блока.
17.09.2012 в 12:49      0  

Круто
12.09.2012 в 23:47      0  

Полезная статья. Мне понравилась.