Gradient text CSS/JS

Poniżej wygląd tekstu jaki chcemy uzyskać.

Będą to dwa przykłady. Pierwszy w czystym css, nie będzie kompatybilny ze starymi przeglądarkami czyli IE11 i niżej, druga zaś będzie wersją opartą na SVG + javascript i co najzabawniejsze działa nawet w IE9 przetestowane 😉
Wielkość czcionki będzie ustawiania dynamicznie za po pomocą vw - viewport width, na temat jednostek polecam skarbnicę wiedzy w postaci tej strony developer.mozilla.org

Wersja gradientu z wykorzystaniem CSS

Najpierw dodajemy zwykły najprostszy html.

<h1 class="text">Hello</h1>

Teraz czas na styl:

.text {
  text-transform: uppercase;
  background: linear-gradient(to right, #30CFD0 0%, #330867 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 20vw;
  font-family: "Poppins", sans-serif;
}

Najważniejsza część w powyższych stylach to background-clip oraz -webkit-text-fill-color: transparent;. Jak się domyślacie te dwa wpisy nie są kompatybilne ze "złomkami" 😉

See the Pen
Gradient text CSS by Greg (@Tomik23)
on CodePen.

Wersja gradientu z wykorzystaniem SVG i javascript

Problem jaki występuje przy skalowaniu svg to to że i viewBox svg musi się skalować wraz z wielkością czcionki.
Ta wersja oczywiście opiera się na svg czyli najpierw tworzymy svg z gradientem.

<svg>
  <defs>
    <linearGradient id="gradient">
      <stop offset="0%" stop-color="#30CFD0"></stop>
      <stop offset="100%" stop-color="#330867"></stop>
    </linearGradient>
  </defs>
  <text id="text" x="0" y="0" fill="url(#gradient)">Hello</text>
</svg>

Małe wytłumaczenie, element linearGradient odpowiada za gradient, oczywiście możemy dodać więcej przejść czyli kolorów. Wystarczy że dodamy następny element. offset="25%" stop-color="#30CFD0" sterujemy offset jak i stop-color
Gradient ten dodajmy do elementu text fill="url(#gradient)" gdzie #gradient to id w elemencie linearGradient.

Potrzebny nam będzie również styl, jest on bardzo podobny do poprzedniego przykładu.

svg {
  font-size: 20vw;
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  border: 1px solid blue;
}

Na potrzeby przykładu dodałem niebieski border dookoła aby pokazać jak skaluje się svg viewBox.
Teraz najważniejsza cześć czyli js.

function setStyleToSVG() {
  var svg = document.querySelector('svg');
  var text = document.getElementById('text');
  var box = text.getBBox();

  svg.setAttribute('width', box.width);
  svg.setAttribute('height', box.height);
  svg.setAttribute('viewBox', box.x + ' ' + box.y + ' ' + box.width + ' ' + box.height);
}

window.addEventListener('resize', setStyleToSVG);
window.addEventListener('DOMContentLoaded', setStyleToSVG());

Krótki opis, dobieramy się do elementów svg oraz text.
Następnie używamy magicznej właściwości getBBox która to zwraca nam aktualny bounding box, inaczej mówiąc współrzędne najmniejszego prostokąta, w którym mieści się obiekt. W naszym wypadku test Hellow.

Aby nasz svg odpowiednio się skalował wraz z tekstem ustawiamy atrybuty przez setAttirbute dla wysokości, szerokości oraz ustwiamy viewBox svg.

Polecam wyświetlić obiekt jaki jest zwracany przez console.log(text.getBBox());.
Następną a zarazem ostatnią rzeczą, którą musimy zrobić to wywołać naszą funkcję.
Najpierw uruchamiamy funkcję na dzień dobry przez DOMContentLoaded a później przez każdy resize.

I poniżej działający przykład.

See the Pen
Gradient text JS by Greg (@Tomik23)
on CodePen.

Ostanie pytanie i chyba najważniejsze, czy ten tekst w SVG jest indeksowany przez google?
Tak jak najbardziej, dowód znajduje się tutaj webmasters.stackexchange.com