<header>
  <h2 class="title">element.style.textShadow</h2>
  <p class="description">Додає тінь до тексту всередині елемента, дозволяючи налаштувати її вигляд.</p>
</header>
<main>
  <div class="result">
    <p id="textElement" class="text">Це текст з налаштовуваною тінню, змініть параметри нижче, щоб побачити результат.</p>
    <form id="shadowForm">
      <label for="hOffset">Горизонтальне зміщення (px):</label>
      <input type="range" id="hOffset" name="hOffset" min="-50" max="50" value="2">
      <span id="hOffsetValue">2</span>
      <br><br>
      <label for="vOffset">Вертикальне зміщення (px):</label>
      <input type="range" id="vOffset" name="vOffset" min="-50" max="50" value="2">
      <span id="vOffsetValue">2</span>
      <br><br>
      <label for="blurRadius">Радіус розмиття (px):</label>
      <input type="range" id="blurRadius" name="blurRadius" min="0" max="50" value="5">
      <span id="blurRadiusValue">5</span>
      <br><br>
      <label for="shadowColor">Колір тіні:</label>
      <input type="color" id="shadowColor" name="shadowColor" value="#000000">
    </form>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#textElement {
  margin-top: 20px;
}

form {
  margin-top: 20px;
}

label {
  font-weight: bold;
}

input[type="range"] {
  width: 100%;
}

document.addEventListener('DOMContentLoaded', function() {
    const textElement = document.getElementById('textElement');
    const hOffset = document.getElementById('hOffset');
    const vOffset = document.getElementById('vOffset');
    const blurRadius = document.getElementById('blurRadius');
    const shadowColor = document.getElementById('shadowColor');
    const hOffsetValue = document.getElementById('hOffsetValue');
    const vOffsetValue = document.getElementById('vOffsetValue');
    const blurRadiusValue = document.getElementById('blurRadiusValue');

    function updateTextShadow() {
        const hValue = hOffset.value + 'px';
        const vValue = vOffset.value + 'px';
        const bValue = blurRadius.value + 'px';
        const colorValue = shadowColor.value;
        textElement.style.textShadow = `${hValue} ${vValue} ${bValue} ${colorValue}`;

        hOffsetValue.textContent = hOffset.value;
        vOffsetValue.textContent = vOffset.value;
        blurRadiusValue.textContent = blurRadius.value;
    }

    hOffset.addEventListener('input', updateTextShadow);
    vOffset.addEventListener('input', updateTextShadow);
    blurRadius.addEventListener('input', updateTextShadow);
    shadowColor.addEventListener('input', updateTextShadow);

    // Initial settings
    updateTextShadow();
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.