Тени css3: box-shadow — CSS | MDN

Leave a Comment / Css / By /

box-shadow — тень блока (внешняя и внутренняя)

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

12.0+ 9.0+ 4.0+ 10.0+ 10.5+ 5.1+

Описание

CSS свойство box-shadow позволяет добавить одну или более тень для блока. Тень блока не влияет на размер и расположение самого элемента (несмотря на то, что тень может быть расположена далеко за его пределами), но она может перекрываться другими элементами, расположенными в коде после текущего элемента, или перекрывать другие элементы, расположенные в коде перед текущим элементом.

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


div {
  width: 300px;
  height: 200px;
  margin: 100px;
  background-color: silver;
  box-shadow: 0 0 10px 5px black,
              40px -30px 15px lime,
			  40px 30px 50px red,
			 -40px 30px 15px yellow,
			 -40px -30px 50px blue;
}

Попробовать »

При наложении теней друг на друга каждая последующая тень в списке будет располагаться под предшествующей.

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

Примечание: для добавления тени к тексту используйте CSS свойство text-shadow.

Значение по умолчанию: none
Применяется: ко всем элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.boxShadow=»10px 10px 5px #888888″

Синтаксис

box-shadow: none|смещение-х смещение-у размытие размер цвет [inset]|inherit;

Значения свойства

Примечание: первые 4 значения, описываемые в таблице, указываются с помощью единиц измерения поддерживаемых в CSS.

Значение Описание
смещение-x и смещение-y Первые два значения устанавливают смещение тени. Первое значение (смещение-x) указывает расстояние смещения по горизонтали. Отрицательные значения располагают тень слева от элемента. Второе значение (смещение-y) указывает расстояние смещения по вертикали. Отрицательные значения располагают тень над элементом. Если оба значения 0, тень располагается за элементом и её не будет видно, так как по умолчанию тень имеет тот же размер, что и элемент. (обязательные параметры)
размытие Третье значение устанавливает степень размытия тени. Чем больше это значение, тем сильнее размытость — тень становится более большой и светлой. Отрицательные значения не допускаются. Если значение отсутствует или равно 0, это означает, что тень будет без размытия — с острыми углами. (необязательное значение)
размер тени Четвёртое значение изменяет размер тени. Положительное значение увеличивает размер тени со всех сторон, отрицательное — уменьшает. Если значение отсутствует или равно 0, это означает, что тень будет того же размера, что и элемент. (необязательное значение)
цвет Определяет цвет тени. Цвет можно установить различными способами, например: указать имя цвета, использовать шестнадцатеричные значения (HEX), с помощью синтаксиса RGB (RGBA) или HSL (HSLA). Всегда указывайте цвет тени, так как браузеры по разному обрабатывают отсутствие значения цвета.
inset Ключевое слово, указывающее, что тень должна располагаться внутри элемента. Внутренняя тень создаёт эффект вдавленности и располагается над фоновым цветом и/или фоновым изображением, но под любым содержимым элемента. Если ключевое слово не указано, тень будет отбрасываемая, т.е. будет располагаться под элементом. Ключевое слово может быть расположено в качестве первого или последнего значения. (необязательное значение)
none Указывает на отсутствие тени.

Пример

box-shadow:

10px 10px black

50px 50px black

50px 50px 5px black

50px 50px 20px black

50px 50px 50px 5px black

50px 50px 50px 10px black

50px 50px 50px 20px red

50px 50px 50px 20px blue

40px 40px 50px 20px pink

20px 20px 50px 20px pink

10px 10px 30px 20px pink inset

10px 10px 5px 20px pink inset

10px 10px 5px 10px pink inset

div#myDIV {
background-color: yellow;
width: 200px;
height: 100px;
box-shadow: 10px 10px black;
}

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 Shadow Effects

❮ Предыдущая Далее ❯

Тени

С помощью CSS вы можете создавать эффекты теней!

Наведите на меня!

CSS Shadow Effects

С помощью CSS вы можете добавить тень к тексту и элементам.

В этих главах вы узнаете о следующих свойствах:

  • text-shadow
  • коробка-тень

Тень текста CSS

CSS свойство text-shadow применяет тень к тексту.

В простейшем случае вы указываете только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px;
}

Попробуйте сами »

Затем добавьте цвет тени:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px красный;
}

Попробуйте сами »

Затем добавьте к тени эффект размытия:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 2px 2px 5px красный;
}

Попробуйте сами »

В следующем примере показан белый текст с черной тенью:

Текстовый эффект тени!

Пример

h2 {
  цвет: белый;
  text-shadow: 2px 2px 4px #000000;
}

Попробуйте сами »

В следующем примере показана красная неоновая светящаяся тень:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 0 0 3px #FF0000;
}

Попробуйте сами »

Множественные тени

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

В следующем примере показана красная и синяя неоновая светящаяся тень:

Текстовый эффект тени!

Пример

h2 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Попробуйте сами »

В следующем примере показан белый текст с черной, синей и темно-синей тенью:

Текстовый эффект тени!

Пример

h2 {
  цвет: белый;
  text-shadow: 1px 1px 2px черный, 0 0 25px синий, 0 0 5px темно-синий;
}

Попробуйте сами »

Вы также можете использовать свойство text-shadow для создания простой границы вокруг какой-то текст (без теней):

Рамка вокруг текста!

Пример

ч2 {
  цвет: коралловый;
  text-shadow: -1px 0 черный, 0 1px черный, 1px 0 черный, 0-1px черный;
}

Попробуйте сами »

❮ Предыдущая Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery

Основные ссылки
HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference


4 Top4 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры How To
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

box-pack — CSS: каскадные таблицы стилей

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

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

Предупреждение: Это свойство исходного черновика модуля CSS Flexible Box Layout, которое было заменено более новым стандартом. См. flexbox для получения информации о текущем стандарте.

Свойства CSS -moz-box-pack и -webkit-box-pack определяют, как -moz-box или -webkit-box упаковывает свое содержимое в направлении перемещения. макет. Эффект от этого виден только в том случае, если в коробке есть лишнее место.

 /* Значения ключевых слов */
коробка-упаковка: старт;
коробка-упаковка: центр;
коробка-упаковка: конец;
коробка-упаковка: обосновать;
/* Глобальные значения */
коробка-упаковка: наследовать;
коробка-упаковка: начальная;
коробка-упаковка: не установлена;

Направление компоновки зависит от ориентации элемента: горизонтальной или вертикальной.

Свойство box-pack указано как одно из значений ключевого слова, перечисленных ниже.

Значения

пуск

Коробка упаковывает содержимое в начале, оставляя лишнее место в конце.

центр

Содержимое коробки упаковывается по центру, а лишнее пространство распределяется поровну между началом и концом.

конец

Содержимое коробки упаковывается в конце, оставляя лишнее место в начале.

выравнивание

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

Край коробки, обозначенный как начало для целей упаковки, зависит от ориентации и направления коробки:

  • Для горизонтальных элементов начало является верхним краем.
  • Для вертикальных элементов начало — это левый край.
Обычный Реверс
Горизонтальный ушел справа
Вертикальный топ снизу

Ребро, противоположное началу, обозначается как конец .

Если упаковка задана с использованием атрибута элемента pack , то стиль игнорируется.

Исходное значение начало
Применимо к elements with a CSS display value of -moz-box , -moz-inline-box , -webkit-box or -webkit-inline-box
Inherited no
Расчетное значение как указано
Тип анимации дискретный
 box-pack =
  начать | центр | конец | оправдывать

Примеры box-pack 

 div. example {
  стиль границы: сплошной;
  дисплей: -moz-box; /* Мозилла */
  дисплей: -webkit-box; /* Веб-кит */
  /* Сделать эту коробку выше дочерних,
     так что есть место для коробки-упаковки */
  высота: 300 пикселей;
  /* Сделайте это поле достаточно широким, чтобы показать содержимое
     центрированы по горизонтали */
  ширина: 300 пикселей;
  /* Дети должны быть ориентированы вертикально */
  -moz-box-orient: вертикальный; /* Мозилла */
  -webkit-box-orient: вертикальный; /* Веб-кит */
  /* Выравнивание дочерних элементов по горизонтальному центру этого блока */
  -moz-box-align: по центру; /* Мозилла */
  -webkit-box-align: по центру; /* Веб-кит */
  /* Упаковать дочерние элементы в нижнюю часть этого блока */
  -moz-box-pack: конец; /* Мозилла */
  -webkit-box-pack: конец; /* Веб-кит */
}
div.example p {
  /* Делаем дочерние элементы более узкими, чем их родитель,
     так что есть место для box-align */
  ширина: 200 пикселей;
}
 
 <дел>
Я буду вторым снизу div.

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

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