Тень блока в 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 | Обновление: Ноябрь 2018

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