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

11 Март 2011, рубрика: HTML и CSS зарисовки | Подготовил:

CSS тень для блоков отображается браузерами Firefox, Chrome, Safari и Opera.

Предлагаю перейти непосредственно к делу и напечатать следующее:

<html>
<head>
<style type="text/css">
div.shadow {background:#369; width:400px; height:80px;
/* Firefox */
-moz-box-shadow:10px 10px 5px #bbbbbb;
/* Chrome и Safari */
-webkit-box-shadow:10px 10px 5px #bbbbbb;
/* На всякий случай */
box-shadow:10px 10px 5px #bbbbbb}
</style>
</head>
<body>
<div class="shadow"> </div>
</body>
</html>

В результате применения CSS стилей мы получим блок с тенью:

Почему-то в Opera не видно никакой тени, может нужно браузер обновить?

Смотрите дополнительно: CSS тень для текста.

    2 комментариев

    1. 2 Апрель 2011 в 19:32
      Евгений
      Ответить

      А на некоторых сайтах тени видны и через оперу, и даже через IE

    2. 2 Апрель 2011 в 19:59
      Вася Митин
      Ответить

      Да, в 11-ой Опере и в 9-ом IE все видно, что не может не радовать

    Ваше мнение