19.03.2012, 17:03

Тень объектов, с помощью CSS3


До появления css3, веб-мастерам, для создания тени, приходилось использовать графические редакторы, а верстать ее, целиком, как картинку. CSS значительно облегчает и упрощает этот процесс.

Задавать тень мы будем, используя свойство box-shadow.

Напишем простой код div'a:
Code
<div class="infoscript"></div>

Зададим ему фон, а также, ширину и высоту, с помощью css:
Code
.infoscript {background-color: blue; width: 300px; height: 100px;}

Получим вот-такой прямоугольник:



Теперь зададим ему тень, добавив в код box-shadow:
Code
.infoscript {background-color: blue; width: 300px; height: 100px; box-shadow: #2C2C29 10px 10px 10px;}

Первое значение 10px - это смещение тени по горизонтали.
Второе - по вертикали.
Третье - размытость тени.

Стоит отметить, что все они, могут иметь также отрицательное значение, со знаком минус.

#2C2C29 - это цвет тени.



Если вы хотите задать тень внутри объекта, то для этого, необходимо дописать значение inset:
Code
.infoscript {background-color: blue; width: 300px; height: 100px; box-shadow: inset #2C2C29 10px 10px 10px;}




Источник/Автор: infoscript.ru

Категория: HTML, CSS, JS, JQ | Добавил: antisept (19.03.2012) Просмотров: 2270 | Рейтинг: 4.2/5
Теги: CSS, тень, тени
Всего комментариев: 1
+1  
1 koter   (14.04.2012 12:01) [Материал]
Аватар пользователя
Спасибо за информацию, помогло.

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]