Box-shadow - тінь блоку. Приклади, ефекти (: hover), анімація тіні.

1. підтримка браузерами
2. 1. Синтаксис властивості box-shadow
3. 2. Приклади тіні для блоку
4. 2.2. Плоска тінь з одного боку
5. 2.3. Тінь в стилі «матеріальний дизайн»
6. 3. Ефекти для тіні при наведенні
7. 4. Анімація тіні

Наша взаимовыгодная связь https://banwar.org/

Властивість box-shadow додає елементу одну або більше тіней. Тінь є копією елемента, зміщену на вказану відстань. Тіні бувають зовнішні або внутрішні, розмиті або плоскі, вони можуть слідувати контурам блоків із закругленими кутами. За допомогою ключового слова inset створюються тіні всередині елемента, роблячи елемент візуально об'ємним або утисненим.

підтримка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-

1. Синтаксис властивості box-shadow

Властивість box-shadow прикріплює одну або кілька тіней до блоку. Властивість приймає або значення none, яке вказує на відсутність тіней, або список тіней через кому, упорядкований від початку до кінця.

Кожна тінь є окремою тінню, представленої від 2 до 4-х значень довжини, необов'язковим кольором і необов'язковим ключовим словом inset. Допустимі довжини 0; опущені кольору за замовчуванням дорівнюють значенню властивості color.

Властивість не успадковується.

Мал. 1. Синтаксис властивості box-shadow box-shadow Значення: x-offset Задає горизонтальне зміщення тіні. Позитивне значення малює тінь, зміщену вправо від тексту, негативна довжина - вліво. y-offset Задає вертикальне зміщення тіні. Позитивне значення зміщує тінь вниз, негативне - вгору. blur Задає радіус розмиття. Негативні значення не допускаються. Якщо значення розмиття дорівнює нулю, то край тіні чіткий. В іншому випадку, чим більше значення, тим більше розмитий край тіні. розтягнення Задає відстань, на яке тінь збільшується. Позитивні значення змушують тінь розширюватися у всіх напрямках на вказаний радіус. Негативні значення змушують тінь стискатися. Для внутрішніх тіней розширення тіні означає стиснення форми периметра тіні. колір Задає колір тіні. Якщо колір відсутній, використовуваний колір береться із властивості color. Для Safari колір тіні вказувати обов'язково. inset Змінює відкидається тінь блоку з зовнішньої тіні на внутрішню. none Значення за замовчуванням, означає відсутність тіні. initial Встановлює значення властивості в значення за замовчуванням. inherit Успадковує значення властивості від батьківського елемента.

Ефекти тіні застосовуються наступним чином: перша тінь знаходиться зверху, а решта - ззаду. Тіні не впливають на компонування і можуть перекривати інші елементи або їх тіні. З точки зору контекстів укладання та порядку малювання зовнішні тіні елемента малюються безпосередньо під фоном цього елемента, а внутрішні тіні елемента малюються безпосередньо над фоном цього елемента (нижче border і border-image, якщо такі є).

Якщо елемент має кілька ящиків, всі вони отримують тіні, але тіні малюються тільки там, де також будуть намальовані кордону; см. box-decoration-break.

Тіні не викликають прокрутку або не збільшують розмір прокручуваному області.

2. Приклади тіні для блоку

2.1. Внутрішня тінь

<P class = "example-shadow-1"> <span> </ span> </ p> .example-shadow-1 {background: # e6e3df; text-align: center; } .Example-shadow-1 span {margin: 50px; height: 100px; width: 200px; display: inline-block; box-shadow: inset 2px 2px 5px rgba (154, 147, 140, 0.5), 1px 1px 5px rgba (255, 255, 255, 1); }

2.2. Плоска тінь з одного боку

flat

<P class = "example-shadow-2"> <a href="#btn"> flat </a> </ p> .example-shadow-2 {background: beige; text-align: center; } .Example-shadow-2 a {display: inline-block; border-radius: 5px; padding: 15px 35px; font-size: 22px; text-decoration: none; margin: 20px; color: white; background: # 55acee; box-shadow: 0 5px 0 # 3C93D5; transition: .3s; } .Example-shadow-2 a: hover {background: # 6FC6FF; }

2.3. Тінь в стилі «матеріальний дизайн»

<P class = "example-shadow-3"> <span> </ span> </ p> .example-shadow-3 {background: # e8e8e8; text-align: center; } .Example-shadow-3 span {background: white; display: inline-block; width: 200px; height: 100px; margin: 50px; box-shadow: 0 14px 28px rgba (0,0,0,0.25), 0 10px 10px rgba (0,0,0,0.22); }

3. Ефекти для тіні при наведенні

See the Pen xRwqWo by Elena ( @ html5book ) on CodePen .

4. Анімація тіні

See the Pen YpypeE by Elena ( @ html5book ) on CodePen .

за матеріалами CSS Backgrounds and Borders Module Level 3