CSS box-shadow — тінь елемента: приклади й параметри

Властивість box-shadow додає тінь до елементу.

Допускається використовувати кілька тіней, вказуючи їх параметри через кому, при такому записі тіней, вони будуть накладатися одна на одну, перша тінь зі списку буде зверху, остання в самому низу. Якщо для елементу задається радіус округлення через властивість border-radius, то тінь також вийде з закругленими кутами. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокручування в браузері.

Ти можеш встановити колір тіні, а також задати її зміщення (як далеко вона буде від елементу), не обов’язкові параметри - це колір і додаткові ключові слова. Для пропущених значень зміщення задається 0, а для не заданих кольорів браузер самостійно задасть значення.

Також є можливість задання розмитої тіні (розмиття за Гаусом).

правити

Загальний опис

правити

Нотатка

Internet Explorer до версії 9.0 не підтримує властивість box-shadow, натомість можна використовувати властивість filter:

filter: progid:DXImageTransform.Microsoft.dropshadow(offX=5, offY=5, color=#000000);

Тут: offX - зміщення тіні по горизонталі; offY - зміщення тіні по вертикалі; color - колір тіні.

автор: NagarD правити

Нотатка

Застосування фільтру dropshadow дає чітку різку тінь, тому для ефекту розмиття можна використовувати фільтр shadow.

filter: progid:DXImageTransform.Microsoft.shadow(direction=120, color=#000000, strength=10);

Тут: direction - кут напрямку тіні від 0 до 360°; color - колір тіні; strength - зміщення тіні в пікселях.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	10	4	5.1	10.5	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	5

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box in">inset — тінь усередині</div>
<div class="box out">без inset — назовні</div>

.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; }

<div class="info">
	<p>За допомогою властивості <code>box-shadow</code> ми можемо задати для блоку тінь.</p>
	<p>Нижче розташовані три ідентичні блоки. Для двох останніх задана тінь.</p>
</div>

<div class="wrapper">
	<div class="block"></div>
	<div class="block one"></div>
	<div class="block two"></div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 16px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 25%;
	height: 150px;
	background-color: gold;
}

.block.one {
	-webkit-box-shadow: 3px 3px 5px 6px #666;
	-moz-box-shadow:    3px 3px 5px 6px #666;
	box-shadow:         3px 3px 5px 6px #666;
}

.block.two {
	-moz-box-shadow:    inset 0 0 25px #000000;
	-webkit-box-shadow: inset 0 0 25px #000000;
	box-shadow:         inset 0 0 25px #000000;
}

<div class="block">
  <code>Без тіней</code>
</div>
<div class="block block-1">
  <code>box-shadow: 10px 5px 5px black;</code>
</div>
<div class="block block-2">
  <code>box-shadow: 0 0 1em gold;</code>
</div>
<div class="block block-3">
  <code>box-shadow: inset 0 0 1em gold, 0 0 1em red;</code>
</div>
<div class="block block-4">
  <code>box-shadow: 60px -16px teal;</code>
</div>

.block {
  width: 350px;
  height: 150px;
  margin-bottom: 50px;
  margin-left: 25px;
  border: 2px solid #666;
  
  display: inline-block;
  margin-top: 20px;
  text-align: center;
  font-family: monospace;
  color: #666;
  line-height: 146px;
}

.block-1 {
  box-shadow: 10px 5px 5px black;
}
.block-2 {
  box-shadow: 0 0 1em gold;
}
.block-3 {
  box-shadow: inset 0 0 1em gold, 0 0 1em red;
}
.block-4 {
  box-shadow: 60px -16px teal;
}

<div class="row">
  <div class="card soft">багатошарова</div>
  <div class="card in">inset</div>
  <div class="card ring">рамка тінню</div>
</div>

.row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px;
    background: #eef1f5;
}
.card {
    width: 130px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 10px;
    font: 14px sans-serif;
}
.soft {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, .12),
        0 4px 8px rgba(0, 0, 0, .10),
        0 12px 24px rgba(0, 0, 0, .08);
}
.in {
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, .35);
}
.ring {
    box-shadow: 0 0 0 3px #d2451e;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>box-shadow</strong>.</p>

<p>Вона встановлює тінь для елементу на сторінці. У цьому прикладі Ви мусите вибрати розміри, а також колір тіні.</p>

<strong>box-shadow: </strong>
<input type="number" class="input" id="offx" value="8">px 
<input type="number" class="input" id="offy" value="8">px 
<input type="number" class="input" id="blur" value="8">px 
<input type="number" class="input" id="radius" value="8">px 
<input type="color" class="input" id="color" value="#F74C32">
<strong>;</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
}

.box {
  background-color: #f7f7f7;
  padding: 16px;
  box-shadow: 8px 8px 8px 8px #F74C32;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var offx = document.querySelector('#offx').value;
  var offy = document.querySelector('#offy').value;
  var blur = document.querySelector('#blur').value;
  var radius = document.querySelector('#radius').value;
  var color = document.querySelector('#color').value;
  document.querySelectorAll('.box').forEach((n) => n.style.setProperty('box-shadow', offx + 'px ' + offy + 'px ' + blur + 'px ' + radius + 'px ' + color));
}));