[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум WareZeus » Скрипты для uCoz » Работа со стилями (CSS) » Эффект тени при помощи CSS3
Эффект тени при помощи CSS3
zeusДата: Понедельник, 07.04.2014, 10:03 | Сообщение # 1
Генералиссимус
Сообщений: 44
[ 501 ]
Замечания:
Offline
Эффект тени мы будем выполнять с помощью 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:

Код
.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:

Код

  

Пример №1




 




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



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

Код
.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:

Код

  

Пример №2




 




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



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

CSS:

Код
.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:

Код

Пример №3




 




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



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

CSS:

Код
.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:

Код

Пример №4




 




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



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

CSS:

Код
.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:

Код

Пример №5




 




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



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

CSS:

Код
.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:

Код

Пример №6




 




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



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

CSS:

Код
.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:

Код

Пример №7




 




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



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

Код
.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;}


 

Код

Пример №8




 



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



Источник: manual.ucoz.net







Здесь может быть Ваша рекламма++++++Здесь может быть Ваша рекламма++++++Здесь может быть Ваша рекламма++++++Здесь может быть Ваша рекламма
Форум WareZeus » Скрипты для uCoz » Работа со стилями (CSS) » Эффект тени при помощи CSS3
  • Страница 1 из 1
  • 1
Поиск:


Наш мини чат

Статистика Форума
Последнии темы Читаемые темы Лучшии пользователи Новые пользователи
Тема:Шаблон Shopper Frenzy... (3)
Тема:Шаблон → futurico под... (4)
Тема:Шаблон - Zeos под сис... (8)
Тема:Качественный прогон л... (2)
Тема:Общение на разные тем... (18)
Тема:Шаблон сайта → game_c... (8)
Тема:Эффект тени при помощ... (0)
Тема:CSS шпаргалка по стил... (1)
Тема:Календарь для uCoz. Ш... (0)
Тема:Шаблон WoW3 flash ада... (0)
Тема:Общение на разные тем... (18)
Тема:Шаблон - Zeos под сис... (8)
Тема:Шаблон сайта → game_c... (8)
Тема:Шаблон → futurico под... (4)
Тема:Шаблон Shopper Frenzy... (3)
Тема:Качественный прогон л... (2)
Тема:CSS шпаргалка по стил... (1)
Тема:Эффект тени при помощ... (0)
Тема:Календарь для uCoz. Ш... (0)
Тема:Шаблон WoW3 flash ада... (0)
zeus (44)
Marques (4)
ferr-um (3)
HENKOK (2)
HenryArgus (26.06.2018)
IsrafaceDit (16.06.2018)
venko98 (16.06.2018)
Alibekstona (06.02.2018)
Muz_DUOua (24.01.2018)
Den_Bo (23.01.2018)
Muz_DJ (19.01.2018)
Den_Ao (10.01.2018)
Brianlit (20.12.2017)
Willieclurl (15.12.2017)