Как добавить тень с помощью CSS

Одно из нововведений CSS3 - это возможность добавить тень. Понятное дело, что в IE6 это не поддерживается, но спешу вас обрадовать - некоторые студии осознанно отказываются от поддержки IE6 в верстке, так что попробуйте и своих заказчиков наставить на пусть истинный. Ибо нефиг пользоваться тем, от чего даже Microsoft открещивается.

Внешняя тень


.shadow_out {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}


Внутренняя тень


.shadow_inner {
-moz-box-shadow: 5px 5px 5px #ccc inset;
-webkit-box-shadow: 5px 5px 5px #ccc inset;
box-shadow: 5px 5px 5px #ccc inset;
}


Ну а теперь просто для примера даю готовый код, чтобы вы могли получить такую картинку. Точнее не так … Могли получить вот такой красивый блок, БЕЗ использования картинки.


div.box {
position: relative;
width: 250px;
height: 150px;
padding: 20px;
border: 1px solid #efefef;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}


div.box:before, div.box:after {
content: '';
z-index: -1;
position: absolute;
left: 10px;
bottom: 10px;
width: 70%;
height: 55%;
-webkit-box-shadow: 0 8px 16px #ccc;
-moz-box-shadow: 0 8px 16px #ccc;
box-shadow: 0 8px 16px #ccc;
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg);
}


div.box:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}


Demo

Спасибо за добавление статьи в: