Что можно создать на javascript. Для чего нужен и что делает Javascript. Примеры. Операторы циклов и выбора действий

Обычные тени легко реализовать с помощью box-shadow или text-shadow. Но как быть, если необходимо сделать внутренние тени? В этой статье описывается, как сделать такие тени с помощью всего нескольких строчек кода.

Синтаксис

Прежде всего рассмотрим два основных способа реализации теней в CSS.

box-shadow

Конструкция box-shadow содержит несколько различных значений:

Horizontal offset и vertical offset - горизонтальное и вертикальное смещение соответственно. Эти значения указывают, в какую сторону объект будет отбрасывать тень:

Blur radius и spread radius немного сложнее. В чем их разница? Взглянем на пример с двумя элементами, где значения blur radius отличаются:

Край тени просто размывается. При различном значении spread radius видим следующее:

В этом случае видим, что тень рассеивается на большую площадь. Если не указывать значения blur radius и spread radius , то они будут равны 0.

text-shadow

Синтаксис очень похож на box-shadow :

Значения аналогичные, только нет spread-shadow . Пример использования:

Inset в box-shadow

Чтобы «перевернуть» тень внутрь объекта, необходимо добавить inset в CSS:

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

Цвет в формате RGB, альфа-значение отвечает за прозрачность тени:

Изображения с тенями

Добавить внутреннюю тень к изображению немного сложнее, чем к обычному div . Для начала вот обычный код картинки:

Логично предположить, что добавить тень можно так:

Img { box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5); }

Но тень не видно:

Существует несколько способов решить эту проблему, каждый из которых имеет свои плюсы и минусы. Рассмотрим два из них. Первый - это обернуть картинку в обычный div :

Div { height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); } img { height: 200px; width: 400px; position: relative; z-index: -2; }

Все работает, но приходится добавлять немного лишней разметки HTML и CSS. Второй способ - это установить изображение фоном нужного блока:

Div { height: 200px; width: 400px; background: url(http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); }

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

Inset в text-shadow

Для реализации внутренней тени текста простое добавление в код inset не работает:

Для решения, сначала применим к заголовку h1 установим темный фон и светлую тень:

H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); }

Вот, что получается:

Добавляем секретный ингредиент background-clip , который обрезает все, что выходит за пределы текста (на темный фон):

H1 { background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255,255,255,0.5); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }

Получилось почти то, что надо. Теперь просто немного затемняем текст (альфа), и итог:

Принципиально важен порядок записи. Первое значение — всегда смещение по оси X, второе — по оси Y.

Если по одной из осей смещение не нужно, ставим ноль:

Class{box-shadow: 0 8px;} – смещаем тень только по оси Y

Результат

Class{box-shadow: 8px 8px;} – смещаем по обеим осям

Результат

Отрицательное значение для осей box-shadow

Тень сместится в противоположном направлении:

Class{box-shadow: -8px 8px;} – смещаем тень отрицательным значением по оси X

Результат

Радиус размытия тени

Третий параметр свойства box-shadow . Если его не указать, принимается значение 0, а размер тени равен размеру элемента, к которому применяется.

Class{box-shadow: 0 48px 0;} – тень дублирует размеры элемента, к которому применяется

Результат

При значении больше нуля, края теряют чёткость, тень становится больше и визуально легче. Размытие применяется со всех сторон:

Class{box-shadow: 0 0 8px;} – без смещения, только размытие

Результат

Class{box-shadow: 0 8px 8px;} – смещение по оси Y и размытие

Результат

Отрицательное значение считается ошибкой и тень не отобразится вовсе.

Радиус растяжения тени

Четвёртый параметр свойства box-shadow . Меняет величину тени относительно элемента. Растягивает во все стороны:

Class{box-shadow: 0 0 0 8px;} – без смещения и размытия, только растяжение

Результат

В данном случае тень больше элемента на 16 пикселей по ширине и высоте: 8px слева + 8px справа и 8px сверху + 8px снизу.

Отрицательное значение растяжения тени в CSS

Тень не растягивается, а сужается со всех сторон на указанное значение:

Class{box-shadow: 0 16px 0 -8px;} – уменьшение тени отрицательным значением

Результат

Цвет тени

По умолчанию цвет тени дублирует цвет шрифта: как на примерах выше.

Цвет тени указывается в любом доступном CSS формате:

• #ff0009
• rgb (255, 0, 9)
• hsl (358, 100%, 50%);

Зададим элементу синюю тень:

Class{box-shadow: 0 8px #3a8fe7;}

Результат

Внутренняя тень

Параметр inset отображает тень внутри блока.

В отличие от параметров, перечисленных выше, нет жёсткого порядка написания. Оба варианта дадут один результат:

Box-shadow: 0 8px #3a8fe7 inset; box-shadow: inset 0 8px #3a8fe7;

Результат

Второй вариант удобней для восприятия при чтении кода.

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

Несколько теней задаются через запятую. Порядок отображения сверху вниз:

Class{ box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af; }

Результат

Если поменять местами, голубую тень не будет видно:

Class{ box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7; }

Результат

Одновременно заданы внутренняя и внешняя тень:

Class{ box-shadow: 0 16px #3ae7af, inset 0 8px #3a8fe7; }

Результат

Тень с закруглёнными углами

Если элементу задать свойство border-radius , тень будет с закругленными углами.

Class{ box-shadow: 0 16px #3a8fe7; border-radius: 8px; }

Результат

Задавая растяжение тени, мы увеличиваем и её скругление. Например, border-radius 8px, а растяжение тени — 4.

8+4=12px — это радиус скругления тени.

Class{ box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px; }

Результат

Этот же принцип распространяется и на сжатие тени, когда значение отрицательное.

8+(-4)=4px — получим скругление тени в два раза меньше.

Если сжатие тени больше, чем border-radius, получим тень с прямыми углами. Например, сжатие 16px.

8+(-16)=(-8), но у скругления не может быть отрицательного значения и применится ноль.

Class{ box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px; }

Результат

CSS свойство box-shadow поддерживается всеми популярными браузерами, кроме Opera Mini.

Тень под блочным элементом на странице обычно применяется для создания эффекта трёхмерности, привлечения внимания к элементу или как часть дизайна. Небольшая тень под элементами придаёт также странице объём и глубину.

Для добавления тени используется свойство box-shadow , у которого имеется шесть значений, из них только два являются обязательными. На рис. 1 показано свойство box-shadow со всеми возможными значениями, они пронумерованы для их идентификации.

Рис. 1. Значения свойства box-shadow

1. ключевое слово inset устанавливает тень внутри элемента;
2. сдвиг тени по горизонтали (5px - вправо, -5px - влево);
3. сдвиг по вертикали (5px - вниз, -5px - вверх);
4. радиус размытия тени (0 - резкая тень);
5. растяжение тени (5px - растяжение, -5px - сжатие);
6. цвет тени.

Обязательно следует указать только сдвиг по горизонтали и вертикали, все остальные параметры будут приниматься по умолчанию. В этом случае тень будет резкой без размытия и чёрного цвета.

За счёт комбинаций разных параметров и их значений можно получить широкое разнообразие видов теней. В табл. 1 представлен код и результат, к которому он приводит.

Табл. 1. Сочетания параметров тени

Код	Результат	Описание
box-shadow: 5px 5px;		Резкая тень справа и снизу.
box-shadow: -5px -5px;		Резкая тень слева и сверху.
box-shadow: 0 0 5px;		Размытая тень вокруг элемента.
box-shadow: 0 0 5px 2px;		Расширение тени на 2 пиксела.
box-shadow: 0 0 5px 2px red;		Красное свечение вокруг элемента.
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.5);		Полупрозрачная тень.
box-shadow: inset 0 0 6px;		Тень внутри.

Как видно из таблицы, сдвиг тени не обязательно задавать в пикселах, хотя это и удобно. Цвет тени можно указывать в любом доступном формате, так, для получения полупрозрачной тени подойдёт формат RGBA, такая тень будет хорошо смотреться на любом фоне. В примере 1 показано, как это сделать.

Пример 1. Тень на фоновом рисунке

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 2. Тень повторяет скругление уголков блока.

Рис. 2. Вид тени на фоновом рисунке

При добавлении «широкой» тени следует учесть, что она может выйти за пределы видимого окна браузера и привести таким образом к появлению горизонтальной полосы прокрутки.

Тень также можно добавлять и к псевдоэлементам, это иногда требуется для сложной вёрстки. На рис. 3 показан блок с заголовком, к которому добавлена тень. Чтобы не было никаких линий в месте стыка приходится использовать псевдоэлемент ::after и добавлять тень к нему.

Рис. 3. Блок с тенью

В примере 2 показано создание такого блока.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Тень у элемента может быть не одна, а сразу несколько, их параметры перечисляются через запятую в значении свойства box-shadow . В примере 3 показано добавление двойной тени ко всем изображениям.

Пример 2. Блок с тенью

HTML5 CSS3 IE 9+ Cr Op Sa Fx

Результат данного примера показан на рис. 4.

Рис. 4. Изображение с двойной тенью

Первая тень отображается слева от рисунка с радиусом размытия 20px, её размер уменьшен за счёт четвёртого параметра (-20px). Параметры второй тени указываются после запятой, тень отображается справа от рисунка и так же уменьшена для симметрии.