CSS3 для начинающих. Часть 5.1. Drop-shadow — простые примеры

Хотя сегодня и первомай, продолжаем цикл статей CSS3 для начинающих. Жаль, что погода не задалась — к обеду пошел дождь и выезд на шашлыки отложили. Но ничего. Вместо этого у нас появилась возможность продолжить знакомство с CSS3. Речь пойдет о drop-shadow — свойство CSS3 позволяющее создавать различные тени, без использования изображений. На данный момент поддержка реализована в следующих версиях браузеров: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+.

[adsense]

drop-shadow

Посмотреть демо

Давайте разберемся в технике применения свойства drop-shadow. Применим эффект к одному элементу и создадим два псевдо класса, которые разместим сразу за основным элементом:

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
}

Далее нужно позиционировать псевдо элементы и задать их размеры:

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
}

Следующим шагом будет применение свойств CSS3 box-shadow и transform. Получить на выходе определенную тень можно изменяя эти значения:

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   -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);
}

Один из псевдо элементов нуждается в перерасположении на противоположной стороне и должен быть повернут в обратную сторону. Это несложно сделать всего лишь изменив значения нужных свойств:

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

В итоге мы получим код, который приведен ниже. Единственное, что мы еще добавим — это max-width. Делается это для того, чтобы тень не сильно вылазила за границы у широких элементов.

.drop-shadow {
   position:relative;
   width:90%;
}

.drop-shadow:before,
.drop-shadow:after {
   content:"";
   position:absolute;
   z-index:-1;
   bottom:15px;
   left:10px;
   width:50%;
   height:20%;
   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);
}

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

Вот в принципе и все. На демо странице приведено несколько примеров.

Посмотреть демо

Если вы ищите доску объявлений чтобы продать или купить что-либо, советую обратить внимание на www.pc01.ru — это доска объявлений, где вы можете совершенно бесплатно оставить объявления о продаже или покупке чего-либо. Объявления удобно разбиты по категориям. Вы так же можете выбрать любой город России.