CSS

CSS3: Тень блока

Продолжая тему CSS3 – рассмотрим box-shadow (тень для блока). Достаточно полезное свойство – так как раньше приходилось резать картинки для того что бы создать такой стиль для блока.

Это свойство свободно поддерживается IE9+, Firefox 4, Chrome, Opera, and Safari 5.1.1.

Браузер Safari поддерживает альтернативный синтаксис -webkit-box-shadow

Давайте рассмотрим синтаксис:
box-shadow: h-shadow v-shadow blur spread color inset;

Где:

h-shadow – Позиция горизонтальной тени (поддерживаются отрицательные значения)

v-shadow – Позиция вертикальной тени (поддерживаются отрицательные значения)

blur – Размытие тени (Опционально)

spread - Размер тени (Опционально)

color – Цвет тени (Опционально)

inset – При указании данного свойства – тень становится внутрь блока (Опционально)

Для изменения стиля через JavaScript, такой синтаксис:
object.style.boxShadow="15px 15px 5px #сссссс"

Для изменения стиля через Jquery, такой синтаксис:
$(element).css('box-shadow',’15px 15px 5px #сссссс’);

Спасибо за внимание, надеюсь помог
Теги:
тень, тени, падающая тень, тени для блок, пример теней, css3
Добавлено: 29 Сентября 2013 07:24:44 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...