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';. Це дозволяє створювати привабливі візуальні ефекти, які привертають увагу до тексту.

Порада:

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

Синтаксис

element.style.textShadow

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

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

Переглядач
	-	-

Приклади

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


  See the Pen <a href="https://codepen.io/css_in_ua/pen/zYVZxZz">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

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

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)';
});

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

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 година

JS довідник

JavaScript

Наповнення JS розділу