CSS учебник

CSS3 тень бывает двух видов: текстовая тень (text-shadow) и блочная тень (box-shadow).

Размытые или объемные, цветные или многослойные тени создают удивительные эффекты для элементов.

Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию элемента

1. Тень для текста

Поддержка браузерами


    IE: 10.0
    Firefox: 3.5
    Chrome: 2.0
    Safari: 4.0
    Opera: 9.6
    iOS Safari: 7.1
    Opera Mini: 8, без радиуса размытия
    Android Browser: 4.1
    Chrome for Android: 44

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

Для создания каждой тени задаются цвет и три длины (смещение по оси Х, смещение по оси Y, радиус размытия). Если значения длин отрицательные, то тень смещается влево и вверх от текста.

Радиус размытия определяется как расстояние от контура тени до края эффекта размытия.

В случае задания нескольких теней, первая располагается в самом верху.

Данный эффект по-разному отображается в различных браузерах. Наследуется.

text-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно текста. Может принимать как положительные, так и отрицательные значения.
y-offset Обязательное значение. Смещение тени по вертикали относительно текста. Может принимать как положительные, так и отрицательные значения.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень.
color Необязательное значение. По умолчанию принимает цвет текста. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha).
none Отсутствие тени текста.

2. Тень для блока

Поддержка браузерами

 

    IE: 9.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 42

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

box-shadow
Значения:
x-offset Обязательное значение. Смещение тени по горизонтали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вправо от блока, отрицательное – влево.
y-offset Обязательное значение. Смещение тени по вертикали относительно блока. Может принимать как положительные, так и отрицательные значения, положительное смещает тень вниз, отрицательное — вверх.
blur Необязательное значение. Определяет радиус размытия тени. Чем больше радиус, тем сильнее размыта тень. Можно использовать только положительные значения.
растяжениеem / px Необязательное значение, расширяет тень, утолщая ее сплошную часть между размытыми краями. Принимает как положительные, так и отрицательные значения.
color Необязательное значение. По умолчанию тень черного цвета. Для установления значения можно использовать следующие форматы записи цвета: #RRGGBB, rgb(red, green, blue), rgba(red, green, blue, alpha). Для Safari цвет тени указывать обязательно.
inset Позволяет создать тень внутри блока.
none Отсутствие тени.

CSS: тени

Языки

Это перевод. Здесь могут содержаться ошибки или страница может быть устаревшей по отношению к Английской версии. Переводчик: Євген (neighbor report)

Отбрасывание теней

С момента написания этой страницы во многие реализации CSS было добавлено свойство ‘box-shadow’ из CSS уровня 3, что делает описанный ниже метод необязательным. Смотрите “Закругленные углы и блоки с тенью” в качестве примера. Эта страница также показывает более мощный, но в то же время более сложный, способ создания теней при помощи CSS уровня 2.

В CSS2 нет свойства, чтобы добавить тень к блоку. Вы можете попробовать добавить кайму справа и внизу, но это не будет выглядеть правильно. Тем не менее, если у вас есть два вложенных элемента, вы можете использовать внешний элемент как тень для внутреннего. Например, если у вас есть такой текст (HTML):

<div class=back>
  <div class=section>
    <h3>Пусть роза пахнет, - разве ощущает</h3>
    <address>Генрих Гейне (1797-1856), пер.  Михаил Фроман</address>
    <p>Пусть роза пахнет, - разве ощущает<br>
    ...
  </div>
</div>

Вы можете использовать наружный DIV в качестве тени для внутреннего. Результат должен выглядеть как эта отдельная страница. Сначала, задайте фоновый цвет для BODY (в нашем примере — светло-зеленый), наружный DIV сделайте немного темнее фона (зелено-серый) и внутренний DIV отличным от фона (например, желто-белый):

body {background: #9db}
div.back {background: #576}
div.section {background: #ffd}

Затем, используя свойства margin и padding, вы смещаете внутренний DIV немного влево и вверх от наружного DIV:

div.back {padding: 1.5em}
div.section {margin: -3em 0 0 -3em}

Вам также нужно переместить наружный DIV немного вправо. И если у вас несколько секций, вы возможно, захотите оставить между ними немного места:

div.back {margin: 3em 0 3em 5em}

В принципе, это всё, что надо сделать.

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

div.section {border: thin solid #999; padding: 1.5em}

Разумеется, вы можете изменять размер теней на ваш вкус.

Текстовые тени

В CSS действительно есть свойство для добавления тени к тексту. У него четыре параметра: цвет тени, горизонтальный отступ (позитивный — вправо), вертикальный отступ (позитивный — вниз) и размытие (0 — резкая тень). Например:

h4 { text-shadow: red 0.2em 0.3em 0.2em }

У этого текста есть тень?

Bert Bos, style activity lead
Copyright © 1994–2021 W3C® Privacy policy

Created 4 April 2002;
Last updated Ср 06 янв 2021 05:40:49

css — тень блока для встроенного элемента

Задавать вопрос

спросил

Изменено 8 лет, 2 месяца назад

Просмотрено 3к раз

Многострочный текст размещен на изображении.

Текст должен появиться на белом фоне, как наклеенный. Каждая строка текста нуждается в небольшом отступе слева и справа. Этого можно добиться с помощью box-shadow для встроенного текста.

 дел.слайд {
    цвет фона: черный;
    высота: 200 пикселей;
    ширина: 600 пикселей;
}
div.show {
    положение: абсолютное;
    верх: 50 пикселей;
    слева: 50 пикселей;
    черный цвет;
    ширина: 200 пикселей;
}
h4 {
    черный цвет;
    цвет фона: белый;
    дисплей: встроенный;
    -moz-box-shadow: 5px 0px 0px белый, -5px 0px 0px белый;
    -webkit-box-shadow: 5px 0px 0px белый, -5px 0px 0px белый;
    box-shadow: 5px 0px 0px белый, -5px 0px 0px белый;
} 
 <дел>
    <дел>
         
Lorem ipsum dolor sit amet, consetetur sadipscing elitr