Ciekawy efekt z cieniem na każdej literze

Mała odskocznia i trochę styli na wieczór. Dzisiaj prosty przykład użycia text-shadow.
Zaczynamy oczywiście od prostego html. Na podstawie klasy 'add-shadow' pobieramy tekst i każdą literę owijamy w span

<div class="content">
  <h1 class="add-shadow">Frontend development</h1>
</div>

Teraz przejdźmy do styli. Najlepszym wyborem będzie wąska czcionka i oczywiście musi być pogrubiona. Importujemy ją do naszych styli.

@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");

*,
:after,
:before {
  box-sizing: border-box;
}

body {
  position: relative;
  font-family: "Bebas Neue", cursive;
  color: #ffffff;
  padding: 15px;
  font-size: 1.6rem;
  background-color: #1b1818;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  text-transform: uppercase;
  word-break: break-word;
}

h1 {
  margin: 0;
  font-size: 10rem;
  line-height: 100%;
}

.content {
  max-width: 900px;
}

.shadow {
  text-shadow: -1rem 0 1.2rem rgba(34, 51, 68, 0.4);
}

Oczywiście text-shadow należy ustawić indywidualnie, każda czcionka jest inna. Tak samo możemy poprawić wygląd używając letter-spacing jeżeli odstępy między literami są zbyt duże.
Należy poeksperymentować na własną rekę 😉

Teraz przyszła kolej na js.

document.addEventListener("DOMContentLoaded", () => {
  // pobieramy wszystkie nasze elementy które są oznaczone 'add-shadow'
  const texts = document.querySelectorAll(".add-shadow");

  for (let i = 0; i < texts.length; i++) {
    // zmienna do które przypiszemy wszystkie elementy span z literami
    let newText = "";
    // pobieramy nasz tekst przez textContent a zarazem
    // dzielimy na poszczególne litery 
    [].slice.call(texts[i].textContent).forEach((element) => {
      // przypisujemy nasz span z literami
      newText += `<span class="shadow">${element}</span>`;
    });
    // czyścimy element w naszym przypadku h1 z tekstu
    texts[i].innerHTML = "";
    // i dodajemy elementy span z literami
    texts[i].innerHTML = newText;
  }
});

Poniżej cały efekt

See the Pen
Shadow of each letter by Greg (@Tomik23)
on CodePen.