css властивість box-shadow
Властивість box-shadow додає тінь до елементу.
Допускається використовувати кілька тіней, вказуючи їх параметри через кому, при такому записі тіней, вони будуть накладатися одна на одну, перша тінь зі списку буде зверху, остання в самому низу. Якщо для елементу задається радіус округлення через властивість border-radius, то тінь також вийде з закругленими кутами. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокручування в браузері.
Ти можеш встановити колір тіні, а також задати її зміщення (як далеко вона буде від елементу), не обов’язкові параметри - це колір і додаткові ключові слова. Для пропущених значень зміщення задається 0, а для не заданих кольорів браузер самостійно задасть значення.
Також є можливість задання розмитої тіні (розмиття за Гаусом).
автор: NagarD
- Нотатка
-
Internet Explorer до версії 9.0 не підтримує властивість
box-shadow, натомість можна використовувати властивістьfilter:filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);Тут:
автор: NagarDoffX- зміщення тіні по горизонталі;offY- зміщення тіні по вертикалі;color- колір тіні. - Нотатка
-
Застосування фільтру
dropshadowдає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтрshadow.filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);Тут:
автор: NagarDdirection- кут напрямку тіні від 0 до 360°;color- колір тіні;strength- зміщення тіні в пікселях.
Синтаксис
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;Властивість box-shadow може отримувати 9 значень:
-
none -
Без задання. Тіні немає
автор: NagarD -
h-shadow -
Обов'язкове значення. Зсув тіні по горизонталі. Позитивне значення цього параметра задає зсув тіні вправо, від'ємне - вліво
автор: NagarD -
v-shadow -
Обов'язкове значення. Зсув тіні по вертикалі. Позитивне значення задає зсув тіні вниз, від'ємне - вгору.
автор: NagarD -
blur -
Задає радіус розмиття тіні. Чим більше це значення, тим сильніше тінь згладжується, стає ширше і світліше. Якщо цей параметр не заданий, без задання дорівнює 0. Тінь при цьому буде чіткої, а не розмитою.
автор: NagarD -
spread -
Позитивне значення розтягує тінь, від'ємне, навпаки, стискає її. Без задання цей параметр не заданий та дорівнює 0, при цьому тінь буде того ж розміру, що й елемент.
автор: NagarD -
color -
Колір тіні в будь-якому доступному CSS форматі, без задання тінь чорна.
автор: NagarD -
inset -
Тінь виводиться всередині елемента
автор: NagarD -
initial -
Встановлює властивість у значення без задання
автор: NagarD -
inherit -
Вказує на спадковість властивості від свого батьківського елемента
автор: NagarD
| Значення без задання: | none |
|---|---|
| Наслідує: | Ні |
| Анімується: | Так |
| JavaScript синтаксис: | object.style.boxShadow="10px 20px 30px blue" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 10 | 4 | 5.1 | 10.5 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 5 |
Приклади
+ запропонувати свій приклад у пісочниці
Та сама тінь 0 0 25px, але inset малює її всередині блока, а без нього — назовні.
HTML
<div class="box in">inset — тінь усередині</div>
<div class="box out">без inset — назовні</div>CSS
.box {
display: inline-block;
width: 170px;
padding: 30px 16px;
margin: 16px;
background: #fff;
}
.in { box-shadow: inset 0 0 25px #000000; }
.out { box-shadow: 0 0 25px #000000; }Приклад використання властивості
Приклад використання властивості
Динамічний приклад
Коментарі
Коментарів ще немає — будьте першим!