CSS. Урок 8. Тени элементов

Оптическое явление

В данной статье мы изучим один из селекторов CSS3 - box-shadow.

Нужно сразу оговориться, что на данный момент этот селектор поддерживают только следующие браузеры:

Chrome (2 и выше) – поддерживает;
Firefox (3.5 и выше) — поддерживает;
Opera (10.5 и выше) — поддерживает;
Safari (3.0 и выше) — поддерживает, без размытия;
IE – не поддерживает.

Chrome и Safari работает с этим селектором с префиксом –webkit, Firefox - с префиксом –moz.

Для остальных браузеров, можно писать без префикса.

Для работы в вышесказанных барузерах, box-shadow будет иметь следующий вид:
box-shadow: «Сдвиг_Горизонталь» «Сдвиг_Вертикаль» «Размытие» «Растяжение» «Цвет»;
-webkit-box-shadow: «Сдвиг_Горизонталь» «Сдвиг_Вертикаль» «Размытие» «Растяжение» «Цвет»;
-moz-box-shadow: «Сдвиг_Горизонталь» «Сдвиг_Вертикаль» «Размытие» «Растяжение» «Цвет»;

Где:
«Сдвиг_Горизонталь» - сдвиг тени по горизонтали, при положительном значении сдвигает вправо, при отрицательном - влево;

«Сдвиг_Вертикаль» - сдвиг тени по вертикали, при положительном значении сдвигает вниз, при отрицательном – вверх;

«Размытие» - определяет радиус размытия тени;

«Растяжение» - радиус растяжения тени, при положительном значении растягивает тень во всех направлениях, при отрицательном – сужает;

«Цвет» - задает цвет тени;

Также можно задать атрибут inset, тогда тень будет направлена внутрь объекта.

Рассмотрим на примере использование теней:

 
<html>
<head>
  <style>
   #shadow{
     width: 200px;
     height: 100px;
     background: #CCFF99;
     box-shadow: 10px 10px 2px 3px #aaaaaa;
     -webkit-box-shadow: 10px 10px 2px 3px #aaaaaa;
     -moz-box-shadow: 10px 10px 2px 3px #aaaaaa;
   }
</style>
</head>
<body>
    <div id="shadow">
    </div>
</body>
</html>

Результат:

Вот интересное решение, с использованием внутренних теней:

 
<html>
<head>
  <style>
   #shadow-1{
     width: 200px;
     height: 100px;
     background: #CCFF99;
     box-shadow: 0 0 5px 5px #ffffff inset;
     -webkit-box-shadow: 0 0 5px 5px #ffffff inset;
     -moz-box-shadow: 0 0 5px 5px #ffffff inset;
   }
  </style>
</head>
<body>
    <div id="shadow-1">
    </div>
</body>
</html>

Результат:

А вот и градиент, с помощью тени:

 
<html>
<head>
  <style>
   #shadow-2{
     width: 200px;
     height: 100px;
     background: #CCFF99;
     box-shadow:0 150px 50px -100px #ff6644 inset,
                0 -150px 50px -100px #CCFF99 inset,
                0 -200px 50px -100px #0066FF inset;
     -moz-box-shadow:0 150px 50px -100px #ff6644 inset,
                     0 -150px 50px -100px #CCFF99 inset,
                     0 -200px 50px -100px #0066FF inset;
     -webkit-box-shadow:0 150px 50px -100px #ff6644 inset,
                        0 -150px 50px -100px #CCFF99 inset,
                        0 -200px 50px -100px #0066FF inset;
   }
  </style>
</head>
<body>
    <div id="shadow-2">
    </div>
</body>
</html>

Результат:

Вот результаты примеров для счастливых обладателей IE:

И это не полный список всего, что можно сделать с тенями.

Еще по теме:
CSS. Урок 7. Ссылки
CSS. Урок 9. Скругление углов таблицы
Назад

Автор: Guazzo

Дата: 26.10.2011 14:11

Любые вопросы вы всегда можете задать в комментариях.

CSS. Урок 8. Тени элементов

Добавить комментарий

Разделы

Плюсовалка