CSS drop-shadow() — тінь по силуету зображення

Опис

Функція drop-shadow() дозволяє додати тінь до елемента на основі вказаних параметрів, що надає візуального ефекту і може допомогти відокремити або виділити конкретний елемент на сторінці. Синтаксис drop-shadow() є простим та гнучким, з можливістю налаштування тіні за допомогою декількох ключових параметрів. Ось простий приклад використання:

box-shadow: drop-shadow(4px 4px 10px rgba(0, 0, 0, 0.5));

У цьому випадку створюється тінь з відступом 4 пікселі вправо та вниз, радіусом розмиття 10 пікселів та півпрозорим чорним кольором.

Функція drop-shadow() може бути корисною для створення візуальних ефектів на веб-сторінці, таких як підсвічування елементів або створення відчуття глибини.

правити

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

правити

Порада

Експериментуйте з колорами, використовуючи різні значення color, щоб створювати візуально привабливі тіні.

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

Порада

Використовуйте значення offset-x та offset-y для контролю за розташуванням тіні відносно елемента. Зміна цих значень дозволяє створювати різні ефекти.

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

Порада

Налаштуйте blur-radius так, щоб досягти бажаного рівня розмиття тіні. Великі значення зроблять тінь більш розплывчастою, а малі значення - більш виразною.

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

Порада

Використовуйте spread-radius для контролю розповсюдження тіні. Позитивне значення розповсюдить тінь за межі елемента, а від'ємне значення зробить її більш компактною.

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

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

Синтаксис

drop-shadow(<offset-x> <offset-y> <blur-radius> <spread-radius> <color>)

Функція drop-shadow може отримувати 3 значень:

<offset-x> та <offset-y>

Числові значення, включаючи від'ємні, позитивні та нуль. Можуть бути виражені в пікселях (px), відсотках (%) або інших одиницях вимірювання відстані.

автор: Bond

правити

<blur-radius> та <spread-radius>

Числові значення, включаючи нуль. Вимірюються в пікселях (px) або інших одиницях вимірювання відстані.

автор: Bond

правити

<color>

Значення кольору, такі як іменовані колірні ключові слова (наприклад, "red" або "blue"), HEX-коди (наприклад, "#FF0000" для червоного) або функції кольору (наприклад, "rgba(255, 0, 0, 0.5)" для напівпрозорого червоного).

автор: Bond

правити

Переглядачі

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

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

Переглядач
	18	35	6	15	12

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

Переглядач
	4.4	53	35	6

Приклади

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

<div id="description">
  <h2>Приклад 2: ефект тіні</h2>
  <p>Два однакових елементи з різними кольорами, один з них має застосовану функцію тіні.</p>
</div>

<div id="result">
  <div class="container">
    <div class="box">Елемент 1</div>
    <div class="box drop-shadowed">Елемент 2</div>
  </div>
</div>

/* Стилі для заголовку та опису */
#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
}

#description h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#description p {
  font-size: 16px;
}

/* Стилі для прикладу */
.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
  background-color: blue;
  color: white;
  text-align: center;
  padding: 20px;
}

.drop-shadowed {
  filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.75));
}

<div id="description">
  <h2>Приклад 1: ефект тіні</h2>
  <p>Кілька елементів, які змінюють свої тіні при наведенні курсору.</p>
</div>

<div id="result">
  <div class="container">
    <div class="box box0">Елемент 1</div>
    <div class="box box1">Елемент 2</div>
    <div class="box box2">Елемент 3</div>
  </div>
</div>

/* Стилі для заголовку та опису */
#description {
  background-color: #f2f2f2;
  padding: 20px;
  font-family: Arial, sans-serif;
  margin-bottom: 50px;
}

#description h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

#description p {
  font-size: 16px;
}

/* Стилі для прикладу */
#result {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 150px;
  height: 150px;
  background-color: blue;
  color: white;
  text-align: center;
  padding: 20px;
  transition: box-shadow 0.3s;
  margin: 10px;
}

.box0:hover {
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.5));
}

.box1:hover {
  filter: drop-shadow(4px 4px 25px #ff0000);
}

.box2:hover {
  filter: drop-shadow(10px 10px 5px yellow);
}

<div class="row">
    <div class="cell">
        <div class="shape box"></div>
        <p>box-shadow: тінь прямокутника, хоча видно коло</p>
    </div>
    <div class="cell">
        <div class="shape drop"></div>
        <p>drop-shadow(): тінь за формою вмісту</p>
    </div>
</div>

body {
    font-family: sans-serif;
    font-size: 15px;
    line-height: 1.45;
    padding: 30px 24px;
    background: #f2f4f6;
}

.row {
    display: flex;
    gap: 50px;
}

.cell {
    width: 220px;
    text-align: center;
}

.shape {
    width: 150px;
    height: 150px;
    margin: 0 auto 10px;
    background: radial-gradient(circle 62px at 50% 50%,
                #2f6f9f 0 100%, transparent 100%);
}

.box {
    box-shadow: 12px 12px 8px rgb(0 0 0 / 0.45);
}

.drop {
    filter: drop-shadow(12px 12px 8px rgb(0 0 0 / 0.45));
}