JS властивість CSSStyleDeclaration.boxShadow

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

element.style.boxShadow задає тінь для рамки елемента. Це властивість дозволяє створювати різноманітні ефекти тіні, що значно покращують вигляд вашого веб-додатку. Тінь може бути налаштована за допомогою різних параметрів, таких як горизонтальне і вертикальне зміщення, розмиття, розповсюдження і колір.

Щоб застосувати тінь до елемента, необхідно використовувати властивість element.style.boxShadow. Це дозволяє задавати тінь в реальному часі за допомогою JavaScript, без потреби у зміні CSS файлів.

Основний синтаксис для boxShadow виглядає так:

element.style.boxShadow = "h-offset v-offset blur spread color";

Де h-offset - горизонтальне зміщення тіні, v-offset - вертикальне зміщення тіні, blur - радіус розмиття тіні, spread - розповсюдження тіні, а color - колір тіні.

Розглянемо приклад, де ми задаємо тінь для елемента з id "myElement":

let element = document.getElementById('myElement');
element.style.boxShadow = "10px 10px 5px 0px rgba(0, 0, 0, 0.75)";

У цьому прикладі тінь зміщується на 10 пікселів вправо і вниз, має радіус розмиття 5 пікселів, не має розповсюдження і має прозорий чорний колір з непрозорістю 75%.

Властивість boxShadow також підтримує множинні тіні для одного елемента. Для цього просто розділіть кожну тінь комою:

element.style.boxShadow = "10px 10px 5px 0px rgba(0, 0, 0, 0.75), -5px -5px 3px 0px rgba(0, 0, 255, 0.5)";

У цьому прикладі ми додаємо дві тіні: перша - як в попередньому прикладі, а друга зміщується на 5 пікселів вліво і вгору, має радіус розмиття 3 пікселя і прозорий синій колір з непрозорістю 50%.

Для створення внутрішньої тіні використовуйте ключове слово "inset":

element.style.boxShadow = "inset 5px 5px 10px rgba(0, 0, 0, 0.5)";

Цей приклад створює тінь всередині елемента, що зміщується на 5 пікселів вправо і вниз, має радіус розмиття 10 пікселів і прозорий чорний колір з непрозорістю 50%.

Щоб прибрати тінь, просто встановіть значення boxShadow в порожній рядок:

element.style.boxShadow = "";

Таким чином, element.style.boxShadow є потужним інструментом для додавання різноманітних ефектів тіней, що можуть значно покращити візуальне сприйняття вашого веб-додатку. Використання цієї властивості дозволяє гнучко і динамічно налаштовувати тіні, надаючи елементам привабливий та сучасний вигляд.

правити

Порада

Використовуйте анімації для плавного переходу тіней, що створює кращий користувацький досвід. CSS-транзиції можуть допомогти зробити зміни тіней більш природними. Наприклад, для створення ефекту наведеного курсора:

element.style.transition = "box-shadow 0.3s ease";
element.onmouseenter = () => element.style.boxShadow = "5px 5px 15px rgba(0, 0, 0, 0.5)";
element.onmouseleave = () => element.style.boxShadow = "2px 2px 5px rgba(0, 0, 0, 0.3)";

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

Порада

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

element.style.boxShadow = "3px 3px 5px rgba(255, 255, 255, 0.5)";

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

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

Синтаксис

element.style.boxShadow

Переглядачі

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

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

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

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

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

Приклади

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

<button id="myButton">Натисни</button>

let button = document.getElementById('myButton');
button.onmousedown = () => {
    button.style.boxShadow = "0px 0px 20px 5px rgba(0, 0, 0, 0.7)";
};
button.onmouseup = () => {
    button.style.boxShadow = "5px 5px 15px rgba(0, 0, 0, 0.5)";
};

<div id="myPopup">Демонстраційний елемент</div>

let popup = document.getElementById('myPopup');
popup.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.1)";
popup.style.transition = "box-shadow 0.5s ease";
popup.onmouseenter = () => {
    popup.style.boxShadow = "0px 0px 15px rgba(0, 0, 0, 0.4), 0px 0px 30px rgba(0, 0, 0, 0.3), 0px 0px 45px rgba(0, 0, 0, 0.2)";
};
popup.onmouseleave = () => {
    popup.style.boxShadow = "0px 0px 10px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.2), 0px 0px 30px rgba(0, 0, 0, 0.1)";
};