box-shadow | Свойство CSS - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Главная » Справочник CSS3 » Свойства тени


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


box-shadow | Свойство CSS

Свойство box-shadow устанавливает тень элементу.




Свойство box-shadow устанавливает внешнюю и внутреннюю тень элементу,при определённых значениях тень может быть удалена от основного элемента.Значений у данного свойства предостаточно для установки эффекта тени на любой вкус и цвет.Цвет и плотность тени ( если цвет имеет разновидность rgb ) прописываются вместе в скобках,без пробелов,через запятую.Тень может находиться как во внешнем фоне,так и углублятся во внутрь элемента.Так же теней может быть 2 разновидности одновременно,после указания значений для одной тени ставится запятая,а затем прописываются значения для другой тени.У свойства box-shadow есть альтернативные свойства для браузеров Mozila -moz-box-shadow,а для Safari и Chrome -webkit-box-shadow.Значения в свойстве прописываются в установленном порядке,но сами значения делятся на обязательные и необязательные для написания,сами значения прописываются через пробел.
Варианты написания значений для свойства:
1.inset значение для тени углубляющейся во внутрь элемента ( прописывается если внутренняя тень применяется ).
2.Значение числовое значение для тени распространяющееся по оси X ( по горизонтали ),положительное значение смещает тень в право от элемента,отрицательное в лево.
3.Значение числовое значение для тени распространяющееся по оси Y ( по вертикали ),положительное значение смещает тень в низ от элемента,отрицательное в верх.
4.Значение числовое значение для установки чёткости\размытости тени,необязательное значение ( при отсутствии аналогично нолю ).
5.Значение числовое значение для установки расширения\сужения тени,положительное значение расширяет,а отрицательное сужает,необязательное значение ( при отсутствии аналогично нолю ).
6.Цвет значение цвета любой разновидности,необязательное значение ( при отсутствии тень чёрного цвета ).
Свойство применимо ко всем элементам,создано в версии CSS3 и проходит валидацию согласно версии CSS3.




Дополнительные свойства применяемые к box-shadow


Свойство
Описание
-webkit-box-shadowАльтернативное значение для браузеров Safari и Chrome
-moz-box-shadowАльтернативное значение для браузера Mozila
text-shadowСвойство не имеет отношения к box-shadow,но оно так же создаёт эффект тени,только для текста


Дополнительные значения применяемые к box-shadow


Свойство
Описание
noneЭффект тени полностью отсутствует
insetТень распространяется в глубь элемента
<Значение>Любое числовое значение,можно отрицательное.Тень распространяется по оси X ( по горизонтали ),положительное значение смещает тень в право,а отрицательное в лево.Это обязательный параметр для написания
<Значение>Любое числовое значение,можно отрицательное.Тень распространяется по оси Y ( по вертикали ),положительное значение смещает тень в низ,а отрицательное в верх.Это обязательный параметр для написания
<Значение>Любое числовое значение,устанавливает чёткость элементу где 0 чёткое,неразмытое состояние,чем выше значение тем ниже чёткость и сильнее размытость
<Значение>Любое числовое значение,можно отрицательное.Служит для расширения\сужения тени,положительное значение расширяет,а отрицательное сужает,необязательное значение ( при отсутствии аналогично нолю )
<Цвет>Значение любого типа цвета,необязательное значение,при отсутствии тень будет чёрного цвета


Свойство работает в браузерах




Пример применения свойства



<!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство box-shadow</title>
<meta charset="utf-8">
<style type="text/css">
<!--
#inset {
width:300px;
box-shadow:inset 0px 10px 60px 10px green,60px 60px 30px green;
padding:50px 0;
-->
</style>
</head>
<body>
<center>
<div id="inset">Элемент с внутренней и внешней тенью</div>
</center>
</body>
</html>

Пример в действии



Поэкспериментируйте сами





Русские шрифты






Источник: http://www.w3.org/TR/css3-background/#the-box-shadow
Категория: Свойства тени | Добавил: IZOTOP (15.05.2012) | Автор: Меренков Михаил W
Просмотров: 2928 | Теги: css, свойство, box-shadow, пример, style | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

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