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

Have a question? Ask in chat with AI!

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

[adsense]

drop-shadow

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 — это доска объявлений, где вы можете совершенно бесплатно оставить объявления о продаже или покупке чего-либо. Объявления удобно разбиты по категориям. Вы так же можете выбрать любой город России.


5 комментариев для “0

    1. подписывайтесь на RSS или twitter чтобы не пропустить. Стараюсь писать статьи каждый день, но сейчас праздники — сложно сказать к сожалению)

  1. Уведомление: CSS3 для начинающих | RusDigi.org Блог Гилязетдинова Руслана
  2. Интересно почему многие материалы в вашем блоге БЕЗ ССЫЛКИ НА ПЕРВОИСТОЧНИКИ…

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

      если статья переведена дословно, то ссылки присутствуют.

Добавить комментарий для Ava Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись CSS3 для начинающих. Часть 4.2. 3D ленты
Следующая запись Мини-курс по jQuery для дизайнеров. Урок 5. Подсказки и списки