С появлением CSS3 свойства box-shadow мы можем делать тени у блоков без использования картинок. Но в большинстве случаев получается сделать только обычную прямую тень откидываемую блоком или же внутреннюю тень (inset).

Николас Галлахер (Nicolas Gallagher) привел замечательную методику в своем блоге, благодаря которой используя стандартные CSS3 свойства можно создавать сложные тени у блоков. Тем самым создавая эффект выгнутого или вогнутого листа. Все это достигается с помощью псевдоэлементов before и after.

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

.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);
 }

Примеры и сам код можно посмотреть на сайте автора.

(Visited 726 times, 1 visits today)