Как добавить тень css

Тени

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

Для добавления тени используется свойство 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

     img 
  

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

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

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

Генератор теней (box-shadow)

Этот инструмент можно использовать для создания эффектов теней элементов с помощью CSS-свойства box-shadow .

Смотрите также

Визуальный инструмент для создания рамок вокруг элементов с помощью CSS-свойства border-image (en-US).

Визуальный инструмент для создания скруглённых границ с помощью CSS-свойства border-radius .

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 16 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Как сделать тень при наведении css

CSS-свойство box-shadow добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом. Для создания эффекта, когда тень появляется при наведении курсора мыши на элемент, необходимо использовать псевдокласс :hover .

 class="box-with-shadow"> У этого элемента будет тень 

.box-with-shadow  /* Ширина блока */ width: 250px; /* Внутренние отступы */ padding: 32px; /* Цвет фона в элементе */ background-color: #38d9a9; /* Сделаем видимую границу элементу */ border: 1px solid #333; > .box-with-shadow:hover  /* Свойство отвечающее за формирование тени 8px - отступ по оси Х 10px - отступ по оси Y 5px - радиус размытия тения 2px - радиус распространения rgba - функция формирующая цвет тени */ box-shadow: 8px 10px 5px 2px rgba(0, 0, 255, .2); > 

Изучаем CSS: тень блока

Желание повысить видимость текста или блока, сделать его более красочным подталкивает нас к всевозможным приемам таким, как, например, тени CSS . И если в Photoshop это делается очень быстро и элементарно, то в CSS придется немного потрудиться. А теперь обо всем по порядку.

Как сделать тень в CSS – коротко о главном

Если вы зададите поисковику запрос « как сделать тень в CSS », то в абсолютном большинстве случаев в выдаче вы найдете ссылку на CSS3 . С его приходом эти и другие дизайнерские эффекты создавать стало гораздо проще.

Как сделать тень в CSS — два варианта реализации

• Тени блока в CSS — box-shadow . Это свойство состоит из нескольких параметров:

Vertical offset и horizontal offset — это вертикальное и горизонтальное смещение. С помощью этих параметров мы задаем направление, в котором объект будет отбрасывать тень:

Чтобы сделать жесткую CSS тень, установите степень размытия 0 или вообще не задавайте это значение. Если требуется задать несколько свойств блока, укажите их через запятую.

• Тени текста в CSS — text-shadow

Свойство text-shadow поддерживают все популярные браузеры ( Google Chrome, Firefox, Opera, Safari ). Text-shadow имеет четыре параметра:

• Смещение по горизонтали ( положительное – вправо, отрицательное – влево );
• Смещение по вертикали ( положительное — вниз, отрицательное – вверх );
• Радиус размытия;
• Цвет тени.

По синтаксису text-shadow во многом напоминает box-shadow:

При этом spread-shadow отсутствует. Вот так это может выглядеть на примере:

Базовая тень в CSS

Создадим css файл и укажем в нем следующее:

body < background: #ccc; margin: 0;>div < background-color: #fff; width: 400px; height: 200px; padding: 15px; margin: 15px; float: left;>.shadow < box-shadow: 5px 5px rgba(150,150,150,0.5);>     

Смещать тень можно изменяя значение 5px , а задавать тот или иной цвет, применяя rgba . В таком случае у нас получается вот такая тень:

Размытая тень

CSS будет вот такой:

body < margin: 0; padding: 0; background: #ccc;>.shadow < margin: 30px; background: #fff; width: 494px; height: 294px; border-radius: 3px; box-shadow: 0 10px 2px -10px rgba(0,0,0,0.3); font: 15px "Sans-Serif", "Times New Roman"; padding: 3px;>     
Some text.
  

Получаем вот такую тень, которая хорошо будет смотреться под слайдерами:

Двойная тень текста CSS

Синтаксис

shadow-text-double

В одном элементе можно использовать несколько теней. Для этого необходимо прописать параметры обеих теней после двоеточия, разделив их запятой:

Тень по бокам блока в CSS

.boxShadow2

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

Чтобы « развернуть » тень объекта внутрь, достаточно добавить в CSS inset :

Внутренняя тень блока в CSS — inset в box-shadow

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

Если вы сумели разобраться с основным синтаксисом свойства box-shadow , то сделать внутреннюю тень CSS вам не составит труда. Единственный нюанс — можно дополнительно указать цвет в формате RGBA :

Альфа-значение будет отвечать за прозрачность тени:

Внутренняя тень текста CSS: inset в text-shadow

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

Сначала можно применить к h1 светлую тень и темный фон:

У вас получится:

Тень блока div в CSS

Создает тень div CSS :

.boxShadow

Тень внизу блока в CSS

.boxShadow1

Тень картинки в CSS

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

Можно добавить тень картинки CSS следующим образом:

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

Далее следует установить изображение фоном нужного блока:

Тень шрифта в CSS

Тень шрифта с множеством оттенков:

Тень внутри блока в CSS

Добиться эффекта появления тени внутри блока, можно прописав:

body h2 p .bsh-wrap .bsh-shad .bsh-shad:after .bsh-inner

Можно добавить тень с одной или нескольких сторон блока:

boxShadow3

.boxShadow4

Тень вокруг блока в CSS

.boxShadow8

Тень внизу блока в CSS

.boxShadow1

Кроме того, можно поместить тень внизу блока и поменять ее цвет и степень размытия.

Генераторы CSS-теней – эффективные решения

Для упрощения создания нужных эффектов существуют специальные CSS3 -генераторы. Вот самые удобные и функциональные из них:

CSS3 Generator

С помощью CSS3 Generator можно создать до десяти разных эффектов, таких как, например, закругленные углы, плавный переход, тень блока CSS . Генератор очень прост и удобен в использовании:

CSS Gradient generator

В этом генераторе собраны все инструменты для создания идеального CSS -градиента:

CSS button generator

Это один из самых продвинутых CSS -генераторов. Установите параметры, скопируете сгенерированный код и готово!

CSS3Gen

Хороший генератор тени CSS , позволяющий создавать полезные фрагменты и с легкостью переносить их в свой проект. Этот CSS3 -генератор позаботится обо всех префиксах для популярных браузеров:

CSS3 Please

Отличный вариант для тестирования CSS3 -кода: с помощью редактора вносите изменения в CSS -стили, и блок мгновенно изменится, а вы сможете увидеть результат: