Тень и эффект свечения через CSS для текста и блоков

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

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

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

Здесь:

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

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

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

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

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

HTML5CSS3IE 9+CrOpSaFx

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

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

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

Свойство 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> <divclass=»primer1″>Пример №1. Рамка с тенью</div> </body> </html>

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



Пример 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> <divclass=»primer2″>Пример №2. Рамка со смещенной тенью</div> </body> </html>

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


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

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

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

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


Пример 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> <divclass=»primer4″>Пример №4.

Делаем тень блока в CSS

Внутреннее свечение</div> </body> </html>

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



Пример 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> <divclass=»primer5″>Пример №5. Совмещение теней</div> </body> </html>

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


Примечание: старые браузеры

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
• Свойство display
• Свойство text-shadow
• Свойство transform
• Свойство transform-origin
• Свойство border
• Свойство background
• Свойство transition
• Свойство nth-child
• font-weight
• Свойство overflow
• Свойство position relative
• Вендорные префиксы CSS

← Перейти в каталог CSS уроков

Пример №2. Рамка со смещенной тенью
Пример №4. Внутреннее свечение
Пример №5.

Совмещение теней

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

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

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

Давайте рассмотрим несколько примеров, как это можно использовать на практике.

Пример 1. Свечение для элемента div.

<div style=»width:100px; height:50px; background:#fcfcfc; -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;»> Блок </div>

Вот те стили, которые отвечают за создание свечения:

-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;

Пример 2. Заставляем светиться изображение.

<img src=»https://bit-digest.ru/wp-content/uploads/2018/06/82971.jpg» width=»300″ style=»-moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; box-shadow:0 0 10px #000;»»>

Пример 3. Свечение для текста.

Текст тоже можно заставить светится.

<h1 style=»-moz-text-shadow:0 0 10px #c00; -webkit-text-shadow:0 0 10px #c00; text-shadow:0 0 10px #c00;»>Текст</h1>

Здесь все аналогично, только используется свойство text-shadow.

Цвет свечения можно задавать любым.

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

Услуга верстки посадочных страниц.

ОБНОВЛЕНИЕ 4

То же, что и обновление 3, но с современными css (= меньше правил), так что не требуется специального позиционирования на псевдоэлементе.

ОБНОВЛЕНИЕ 3

Все мои предыдущие ответы использовали дополнительную разметку для создания этого эффекта, что необязательно необходимо. Я думаю, что это гораздо более чистое решение … Единственный трюк — это играть со значениями, чтобы получить правильное расположение тени, а также правильную силу / непрозрачность тени. Вот новая скрипка, использующая pseudo-elements :

http://jsfiddle.net/UnsungHero97/ARRRZ/2/

HTML

CSS

ОБНОВЛЕНИЕ 2

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

http://jsfiddle.net/K88H9/821/

CSS

Это было бы лучшим решением. Дополнительный параметр, который добавляется, описывается как:

Четвертая длина — это расстояние распространения. Положительные значения заставляют теневую форму расширяться во всех направлениях по указанному радиусу. Отрицательные значения заставляют теневую форму сжиматься.

ОБНОВИТЬ

Просмотрите демо в jsFiddle: http://jsfiddle.net/K88H9/4/

То, что я сделал, это создать «теневой элемент», который будет скрываться за фактическим элементом, который вы хотели бы иметь в тени. Я сделал ширину «теневого элемента» ровно менее широкой, чем фактический элемент, в 2 раза превышающей указанную тень; затем я выровнял его правильно.

HTML

CSS

Оригинальный ответ

Да, вы можете сделать это с тем же синтаксисом, который вы предоставили. Первое значение контролирует горизонтальное позиционирование, а второе значение контролирует вертикальное позиционирование. Поэтому просто установите первое значение в а второе — на любое смещение, которое вы хотели бы сделать следующим образом:

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

Надеюсь, это поможет.

Если у вас фиксированный цвет на фоне, вы можете скрыть эффект боковой тени двумя тенями маскирования, имеющими тот же цвет фона и blur = 0, например:

Обратите внимание, что черная тень должна быть последней и имеет отрицательный разброс (-3px), чтобы предотвратить ее расширение за пределами углов.

Тень блока (свойство box-shadow) | CSS

Здесь fiddle (измените цвет маскирующих теней, чтобы увидеть, как это работает).

Как насчет того, как использовать только содержащий div, который имеет переполнение, установленное в скрытое и некоторое дополнение в нижней части? Это похоже на простейшее решение.

Извините, что я не думал об этом сам, но видел его где-то в другом месте .

Используя элемент для обертывания элемента, получающего тень и переполнение ящика: скрытые на обертке, вы можете сделать лишнюю коробчатую тень исчезающей и по-прежнему иметь пригодную для использования границу. Это также устраняет проблему, когда элемент меньше, как кажется, из-за разброса.

Как это:

Содержание здесь

Все еще умное решение, когда это нужно делать в чистом CSS!

Как сказал Йорген Эвенс .

Если ваш фон твердый (или вы можете воспроизвести его с помощью CSS), вы можете использовать линейный градиент таким образом:

Это создаст градиент 5px в нижней части элемента, от черного с непрозрачностью 30% до полностью прозрачного. Остальная часть элемента имеет белый фон. Конечно, изменив последние 2 цветовых окончания линейного градиента, вы можете сделать фон полностью прозрачным.

CSS тень или как повысить видимость блока или текста

Я считаю, что указывать тень в слепую в редакторе неудобно и сложно, по этому пользуюсь онлайн генератором CSS теней www.css3gen.com, я не буду росписывать, как им пользоваться, потому что все и так понятно. Сервис состоит из трех генераторов: закругления углов, тень для текста и тень для блоков, смотреть рис.2 и рис.3 

 

 

 

рис.2

рис.3

Преимущества онлайн сервиса css3gen.com в том, что сразу наглядно видно как будет выглядеть тень, и не нужно заворачиваться как правильно  прописать тень в CSS3, а также про минихаки для других браузеров. Как вы можете убедиться сделать тень в CSS3 для блока (div) довольно просто, а в веб дизайне тень всегда пригодиться.

онлайн сервис создает тень в CSS3 для блока в три клика

13 742 просмотров

Catchable fatal error: Object of class WP_Post could not be converted to string in /home/wcdt00/wcdt.com.ua/www/wp-content/plugins/qtranslate/qtranslate_core.php on line 455

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

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