Как сделать тень в css для div
Перейти к содержимому

Как сделать тень в css для div

  • автор:

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

Свойство CSS box-shadow позволяет задать тень элементу html. Используется дизайнерами сайтов довольно часто, чтобы как-то украсить и выделить рамки с текстом, изображения, сделать более читабельным контент.

Синтаксис CSS box-shadow

. box-shadow: X Y R1 R2 color [inset]; .
  • X — смещение по оси Х (горизонтали)
  • Y — смещение по оси У (вертикали)
  • R1 — размытие (чем больше значение, тем плавне переход)
  • R2 — радиус растяжения (если положительный, то растягивает, отрицательный — сжимает)
  • color — цвет (можно задавать в любом формате: #RGB, название цвета)
  • inset — при наличии этого значения тень будет располагаться внутри блока (элемента)

Пример 1. HTML рамка с тенью box-shadow без смещения

Ниже представлен самый простой вариант использования тени свойством CSS box-shadow на странице html, когда она равномерно обтекает всю рамку без смещений.

html> head> style> .primer1< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 5px #a34b23; > /style> /head> body> div class css">primer1">Пример №1. Рамка с тенью/div> /body> /html>

На странице преобразуется в следующее

Пример №1. Рамка с тенью

Пример 2. HTML рамка со смещенной тенью box-shadow

Практически тот же пример, что и первый, но только со смещением рамки.

html> head> style> .primer2< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 1px 1px 2px 3px #a34b23; > /style> /head> body> div class css">primer2">Пример №2. Рамка со смещенной тенью/div> /body> /html>

На странице преобразуется в следующее

Пример №2. Рамка со смещенной тенью

Пример №3. Свечение рамки html

Реализация тени в виде свечения

html> head> style> .primer3< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 20px #b04b66; > /style> /head> body> div class css">primer3">Пример №3. Свечение/div> /body> /html>

На странице преобразуется в следующее

Пример №3. Свечение

Пример 4. Внутреннее свечение границы html

Свечение, которое направлено внутрь блока и никак не выходит за его пределы. Эффект создается за счет атрибута inset .

html> head> style> .primer4< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 20px #b04b66 inset; > /style> /head> body> div class css">primer4">Пример №4. Внутреннее свечение/div> /body> /html>

На странице преобразуется в следующее

Пример №4. Внутреннее свечение

Пример 5. Совмещение теней в html

Эффект тени можно совмещать через запятую. В таком случае образуется очень интересные результаты. Например, можно сделать разноцветную рамку в стиле 3D.

html> head> style> .primer5< padding: 10px; margin: 10px; width: 200px; height: 100px; box-shadow: 0px 0px 15px 3px #0f0 inset, 5px 5px 10px #00f, -5px -5px 10px #f00; > /style> /head> body> div class css">primer5">Пример №5. Совмещение теней/div> /body> /html>

На странице преобразуется в следующее

Пример №5. Совмещение теней
Примечание: старые браузеры

IE младше 9 версии не поддерживают box-shadow. Префиксы браузеров для box-shadow

  • -webkit-box-shadow — для Chrome до 10, Safari до 5.1, Android до 4 и iOS до 5
  • -moz-box-shadow — для Firefox до версии 4.0

Как сделать тень в css для div

Сайт о программировании

Создание тени у элемента

Последнее обновление: 21.04.2016

Свойство box-shadow позволяет создать у элемента тень. Это свойство может принимать сразу несколько значений:

box-shadow: hoffset voffset blur spread color inset
  • hoffset : горизонтальное смещение тени относительно элемента. При положительном значении тень смещается вправо, а при отрицательном — влево
  • voffset : вертикальное смещение тени относительно элемента. При положительном значении тень смещается вниз, а при отрицательном — вверх
  • blur : необязательное значение, которое определяет радиус размытия тени. Чем больше это значение, тем более размытыми будут края тени. По умолчанию имеет значение 0.
  • spread : необязательное значение, которое определяет направление тени. Положительное значение распространяет тень во вне во всех направлениях от элемента, а отрицательное значение направляет тень к элементу
  • color : необязательное значение, которое устанавливает цвет тени
  • inset : необязательное значение, которое заставляет рисовать тент внутри блока элемента
    Тени в CSS3 div  

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

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

box-shadow: 5px 3px 8px 3px #faa, 10px 4px 10px 3px #888 inset;

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

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

Обновлено: 2021-01-27 15:19:02 НП Наталья Патлаха автор материала

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

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

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

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

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

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

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

Чтобы сделать жесткую 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);>    Basic Shadow 

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

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

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

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;>    Blurred Spread Shadow 
Some text.

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

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

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

Синтаксис

shadow-text-double

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

Синтаксис

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

.boxShadow2

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.boxShadow

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

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

.boxShadow1

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

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

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

airplane

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

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

Однако ее плохо видно:

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

Решить эту проблему можно, обернув изображение в div :

div < height: 200px; width: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9);>img

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

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

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

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

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

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

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

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

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

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

boxShadow3

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

.boxShadow4

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

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

.boxShadow8

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

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

.boxShadow1

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

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

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

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

CSS3 Generator

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

CSS Gradient generator

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

CSS button generator

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

CSS3Gen

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

CSS3 Please

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

box — shadow

Свойство, с помощью которого можно задать блоку тень.

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье

  1. Кратко
  2. Пример
  3. Как пишется
  4. Как понять
  5. Подсказки
  6. На практике
    1. Никита Дубко советует
    2. Алёна Батицкая советует
    3. Татьяна Фокина советует

    Контрибьюторы:

    Обновлено 6 октября 2022

    Кратко

    Скопировать ссылку «Кратко» Скопировано

    Свойство, бросающее тень на ваши блоки ��

    Создано, чтобы имитировать объекты реального мира и создавать иллюзию объёма для плоских элементов интерфейса.

    Пример

    Скопировать ссылку «Пример» Скопировано

    Частая ситуация — выделить кнопку, задав ей тень, что визуально сделает её объёмной.

      button class="button">Купить немедленно!button>      

    Помимо основных оформительских стилей задаём нашей кнопке тень:

     .button  box-shadow: -15px 15px 0 0 #ED6742;> .button  box-shadow: -15px 15px 0 0 #ED6742; >      

    Получаем псевдообъёмную кнопку, которая парит над страницей:

    Старый и новый дизайн иконок Apple

    + Развернуть

    Алёна Батицкая советует

    Скопировать ссылку «Алёна Батицкая советует» Скопировано

    �� С помощью тени можно создать блок с несколькими рамками!

     div class="box square">div> div class="box circle">div>      
     .box  width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff;> .box  width: 120px; height: 120px; box-shadow: inset 0 0 6px 0 #c000ff, 0 0 0 3px #c000ff, 0 0 6px 3px #c000ff, 0 0 0 7px #18191C, 0 0 0 10px #6e4aff, 0 0 6px 10px #6e4aff, 0 0 0 14px #18191C, 0 0 0 17px #c000ff, 0 0 6px 17px #c000ff; >      

    �� Тени можно использовать для ховер-эффектов. При помощи теней кнопка сделана выпуклой, а при нажатии она становится вдавленной за счёт изменения положения теней.

      button class="btn">Зажмиbutton>      
     .btn  box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5;> .btn:active  box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9;> .btn  box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5; > .btn:active  box-shadow: 5px 5px 10px #020d18, inset -5px -5px 8px -4px #020d18, inset -6px -6px 8px 0 #3185d5, -5px -5px 10px #3185d5, inset 5px 5px 8px -4px #3185d5, inset 6px 6px 8px 0 #c9c9c9; >      

    Открыть демо в новой вкладке + Развернуть

    Татьяна Фокина советует

    Скопировать ссылку «Татьяна Фокина советует» Скопировано

    �� Если используете box — shadow для стилей фокуса, то они не поддерживаются в режиме высокой контрастности в Windows. Режим ограничивает количество цветов, чтобы повысить читаемость текста за счёт изменения контраста текста и фона.

    Чтобы фокус был виден всем пользователям, задайте альтернативные стили в директиве @media со значением forced — colors .

     a:focus  outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;> @media (forced-colors: active)  a:focus  outline: 0.2em solid; >> a:focus  outline: none; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; > @media (forced-colors: active)  a:focus  outline: 0.2em solid; > >      

    Второй способ решения проблемы с видимостью box — shadow в режиме высокой контрастности — прозрачный outline .

     a:focus  outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato;> a:focus  outline: 2px solid transparent; box-shadow: 0 0 0 0.2em white, 0 0 0 0.4em tomato; >      

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

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