Главная -> CSS -> Как добавить тень с помощью CSS

Как добавить тень с помощью 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

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.