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

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

element.style.textShadow – це властивість JavaScript, яка дозволяє встановлювати або отримувати ефект тіні для тексту всередині елемента. Вона приймає один або декілька наборів значень, які визначають горизонтальний та вертикальний зміщення тіні, розмиття та колір.

Для встановлення тіні тексту необхідно задати чотири основні параметри: горизонтальне зміщення, вертикальне зміщення, радіус розмиття і колір тіні. Ці параметри вказуються в одному рядку, розділеному пробілами. Наприклад, щоб додати чорну тінь зі зміщенням 2 пікселі вправо і вниз, а також з розмиттям 3 пікселі, використовується такий код:

let element = document.getElementById('myElement');
element.style.textShadow = '2px 2px 3px black';

Горизонтальне зміщення визначає, наскільки тінь буде зміщена вправо (позитивне значення) або вліво (негативне значення). Вертикальне зміщення відповідає за зміщення тіні вниз (позитивне значення) або вгору (негативне значення). Радіус розмиття задає ступінь розмиття тіні: чим більше значення, тим більше розмиття. Колір тіні може бути заданий у будь-якому форматі, підтримуваному CSS, включаючи імена кольорів, HEX, RGB або RGBA.

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

element.style.textShadow = '2px 2px 3px black, -1px -1px 2px red';

У цьому прикладі перша тінь чорного кольору зміщується вправо і вниз, а друга тінь червоного кольору зміщується вліво і вгору. Цей підхід дозволяє створювати складніші та цікавіші візуальні ефекти для тексту.

Щоб отримати поточне значення властивості textShadow, можна скористатися наступним кодом:

let currentShadow = element.style.textShadow;
console.log(currentShadow);

Цей код виведе поточне значення тіні тексту у консоль.

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

правити

Порада

Щоб створити ефект світіння, можна використовувати тіні одного кольору, але з різними зміщеннями і радіусами розмиття. Наприклад, для білого світіння навколо тексту: element.style.textShadow = '0 0 5px white, 0 0 10px white, 0 0 15px white';. Це дозволяє створювати привабливі візуальні ефекти, які привертають увагу до тексту.

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

Порада

Для створення більш природних тіней експериментуйте з радіусом розмиття. Чим більший радіус, тим м'якшою і розмитішою буде тінь. Наприклад, щоб створити м'яку тінь, можна використати наступний код: element.style.textShadow = '2px 2px 10px rgba(0, 0, 0, 0.5)';.

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

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

Синтаксис

element.style.textShadow

Переглядачі

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

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

Переглядач
	2	3.5	1.1	9.5	12	10

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

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

Приклади

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

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

let element = document.getElementById('interactiveText');
element.addEventListener('mouseover', function() {
    element.style.textShadow = '2px 2px 10px rgba(0, 0, 255, 0.7)';
});

element.addEventListener('mouseout', function() {
    element.style.textShadow = '2px 2px 5px rgba(0, 0, 0, 0.5)';
});

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

function updateTextShadowBasedOnTime(element) {
    let now = new Date();
    let hours = now.getHours();
    if (hours >= 6 && hours < 18) {
        // Денний час
        element.style.textShadow = '2px 2px 5px rgba(255, 255, 0, 0.7)'; // Жовта тінь
    } else {
        // Нічний час
        element.style.textShadow = '2px 2px 10px rgba(0, 0, 255, 0.7)'; // Синя тінь
    }
}

let timeSensitiveElement = document.getElementById('timeSensitiveText');
updateTextShadowBasedOnTime(timeSensitiveElement);

// Оновлюємо тінь кожну годину
setInterval(function() {
    updateTextShadowBasedOnTime(timeSensitiveElement);
}, 3600000); // 3600000 мс = 1 година