zeus | Дата: Понедельник, 07.04.2014, 10:03 | Сообщение # 1 |
Генералиссимус
Сообщений: 44
[ 501 ]
Замечания:
Offline
Эффект тени мы будем выполнять с помощью CSS. Соответственно никаких изображений, только стили.
В том числе мы будем применять свойство box-shadow. Также можно будет задать любой цвет для тени, смещение, размер, или же применять его для иных элементов, главное экспериментировать CSS генератор.
Поддержка браузеров: - Opera 10.5 и выше.
- Firefox 3.5 и выше;
- Chrome 1 и выше;
- Safari 3 и выше.
В основном все современные браузеры поддерживают эффекты тени. Кстати, хотелось бы упомянуть один немаловажный момент: для некоторых браузеров мы будем использовать префиксы, то есть для Firefox применяется -moz-, для Safari и Chrome нужно использовать префикс -webkit-, а для Opera префикс -o-
А теперь давайте перейдём к самой интересной части и рассмотрим каждый эффект тени отдельно. Всего эффектов будет 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:
Эффект тени №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:
Эффект тени №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:
Эффект тени №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:
Эффект тени №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:
Эффект тени №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:
Эффект тени №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:
Эффект тени №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;}
Вот и всё! Если Вам что-либо будет непонятно, обязательно спрашивайте в комментариях.
Источник: manual.ucoz.net
| |
|
|
|