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.boxShadowЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачам змінювати параметри тіні кнопки в реальному часі, що допомагає зрозуміти, як працює властивість element.style.boxShadow і як її можна використовувати для створення динамічних і привабливих інтерфейсів. Використання інтерфейсу з різноманітними елементами керування робить процес навчання інтерактивним і зручним.
У цьому прикладі ми додаємо динамічну тінь до кнопки при натисканні. Коли користувач натискає на кнопку, тінь стає більш інтенсивною та концентрованою, що створює ефект натискання. Після відпускання кнопки тінь повертається до початкового стану, що додає інтерактивності та покращує користувацький досвід.
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)";
};Цей приклад демонструє, як створити ефект спливаючого вікна з використанням мультишарових тіней. При наведенні курсора на вікно, тіні стають глибшими та більш виразними, завдяки чому вікно виглядає більш об'ємним. Це може бути корисно для підкреслення важливості спливаючих елементів або діалогових вікон у вашому веб-додатку.
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)";
};