Создание блока с тенью на CSS3

29 октября 2011. Автор: Joker-jar

Один из уроков на сайте был посвящен созданию блока с тенью. В нем предлагалось отрисовать и сверстать тень. С приходом CSS3 веб-дизайнеру стали доступны многие интересные стили, в частности, box-shadow, который позволяет создать тень для блока. В данный момент этот стиль поддерживается всеми современными популярными браузерами.

Пример использования стиля box-shadow:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Page</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <style type="text/css">
      .box {background: #F2F213; width: 400px; height: 200px;}
      .shadow {box-shadow: 5px 5px 10px #777;}
    </style>
  </head>
  <body>
    <div class="box shadow"></div>
  </body> 
</html>

Имеется блок с двумя классами box и shadow. Первый задает цвет и размеры блока, второй — тень. Значение у стиля box-shadow составное:

box-shadow: 5px 5px 10px #777;

Первые два параметра задают сдвиг тени по оси X и Y, третий — радиус размытия тени. Четвертый параметр задает цвет тени. Данный блок в вашем браузере выглядит так:

Если тени у блока нет, то у вас устаревший либо неизвестный природе браузер :)

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

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий
 
 
 
 
 
 

Свежее

Популярное