Главная » Frontend » 2.18. CSS3-тень блока
2018/07/07Метки:

2.18. CSS3-тень блока

Одним из важных элементов оформления, который появился в третье версии каскадных стилей, является тень для html-элемента. CSS-тень блока придает ему объемность, позволяет более красиво вписывать в дизайн сайта, а также реализовывать применяемые в psd-макетах тени не картинками, а возможностями рендеринга современных брауезеров.

За создание тени некоторого тэга в стилях отвечает правило  box-shadow, которое кроме внешней, также позволяет создавать и тень внутри объекта. Рассматриваемое свойство по сути визуально создает впуклость или выпуклость объекта.

Следует отметить, что в некоторых браузерах для срабатывания правила требуется прописать его с дополнительным префиксом. Рассмотрим какие из них поддерживают свой-во без спецпрефикса, а какие только с ним:

ИЕ: 9.0
Эдж: 12.0
Firefox: 4.0, 3.5 -moz-
Хром: 10.0, 4.0 -webkit-
Сафари: 5.1, 3.1 -webkit-
Опера: 11.5
Андройд Браузер: 4.0, 2.1 -webkit-

1. Описание свойства box-shadow

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

box-shadow
Значения:
x-сдвиг Отвечает за сдвигание хтмл-элемента в горизонтальном направлении как в минусовую (влево) сторону, так и в плюсовую (вправо). Задается в пикселях или любых других доступных единицах. Обязательный параметр.
y-сдвиг Отвечает за сдвигание хтмл-элемента в вертикальном направлении как в минусовую (вверх) сторону, так и в плюсовую (вниз). Задается в пикселях или любых других доступных единицах. Обязательный параметр.
размытие Указывается для задания коэффициента размытия создаваемой теневой области. Эта величина должна быть строго больше или равна нулю. Чем больше коэффициент, тем сильнее будет размыта теневая область. Задавать его не обязательно.
растяжение Указывается для задания коэффициента растяжения (увеличения длины) тени. Коэффициент может быть как больше нуля, так и меньшего него. Единицы измерения: пиксели, проценты и так далее. Задавать его не обязательно.
цвет Для задания цветности тени используются разные цветовые коды: HEX, RGB, RGBA (такой же как предыдущий, но с альфа-каналом). В исходном состоянии цвет тени черный. Задавать его не обязательно (кроме браузера Сафари).
inset При указании данной опции теневая область будет применена внутри описываемого блока.
none Выключает теневой эффект.
initial Будет установлено в первоначальное значение.
inherit Унаследовать правило от родителя.

Формат записи

.b-square-1
{	
	box-shadow: 5px 6px 7px 5px rgba(0, 0, 0, 0.5);
}

Пример отображения

Без размытия и искажения:

.b-btn
{	
	box-shadow: 3px 3px #4e7b0e;
}

2. Внутренняя тень box-shadow

Для ее задания используется специальный дополнительный акроним inset, который необходимо прописать в свойстве.

Формат записи

.b-btn
{	
	box-shadow: inset 3px 3px #4e7b0e;
}

Можно также сделать css тень при наведении:

.b-square:hover
{
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

3. Несколько теней

Чтобы их задать, необходимо перечислить описания теней через запятую:

.b-btn
{	
	box-shadow: inset 3px 3px #4e7b0e, 5px 6px 7px 5px rgba(0, 0, 0, 0.5);
}

Метки: Метки:
Понравилась статья? — Ставь лайк!

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

×
Новости и обзор новинок рынка строительной техники.
Подпишитесь на обновления нашей группы!