CSS box-shadow

Сделать CSS тени для блоков?

Тень блока в CSS посредством box-shadow

Сделаем тень CSS параметрами: -webkit-box-shadow и -moz-box-shadow

Продолжаем изучать новые свойства Каскадных таблиц стилей. Рассмотрим эффект тени в css для блочных элементов, а именно для блоков, обозначаемых HTML тегами <div> </div>.

Эффект красивой тени зависит скорее от вашего художественного вкуса, но также нужно учитывать такой момент, как кроссбраузерность верстки. Например, CSS параметр box-shadow определяет свойства тени блока для всех современных регулярно обновляемых браузеров, но в дополнение имеет свои расширения для браузеров Chrome, Safari, Firefox – это: -webkit-box-shadow и -moz-box-shadow.

Теперь предлагаю от слов перейти к делу и на конкретном примере посмотреть свойства CSS тени.

Пример CSS тени для блока

<title>Как сделать эффект тени в css</title>
<style type="text/css">
div.div-shadow {background:#47a; width:400px; height:80px;
/* Firefox */
-moz-box-shadow:5px 5px 10px #bdbdbd;
/* Chrome и Safari */
-webkit-box-shadow:5px 5px 10px #bdbdbd;
/* Код CSS тени блока для абсолютно всех браузеров новых версий */
box-shadow:5px 5px 10px #bdbdbd}
</style>
</head>
<body>
<div class="div-shadow"> </div>

В итоге блок <div class="div-shadow"> </div> отбрасывает тень:

Браузер Internet Explorer ранних версий не понимает CSS атрибут box-shadow, вместо него пишем следующий код:
filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5,
offY=5, color=#bdbdbd);

и
filter: progid:DXImageTransform.Microsoft.shadow(direction=120,
color=#bdbdbd, strength=10);

Экспериментируйте со значениями box-shadow, чтобы добиться оптимального результата.

В дополнение смотрите урок CSS тень текста и вы узнаете, как сделать текст более красивым.

Дата публикации: Январь 2013 | Обновление: Август 2014

CSS тени для блоков   Современный CSS справочник

    Сохранить в сервисы и закладки