CSS text gradient

Krzysiek Furtak CSS 0 Comments

Moim zdaniem jednym z ładniejszych efektów tekstowych jakie możemy osiągnąć za pomocą HTMLa i CSSa jest gradient na tekście. Wykorzystujemy do tego: background-image jako linear-gradient, background-clip: text;, text-fill-color: transparent; oraz w pewnych przypadkach line-height.

Rozpatrzymy dwa przypadki. W pierwszym pokolorujemy linie tekstu na różne kolory, a w drugim nałożymy na tekst gradient.

Różne kolory linii tekstu

W tym przypadku przyda nam się wysokość linii oraz gradient składający się z wielu kolorów.

See the Pen LEzRqW by Krzysztof Furtak (@KrzysiekF) on CodePen.0

HTML to zwykły DIV z odrobiną tekstu. Ale za to w CSSie dzieje się znacznie więcej:

.text-content {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 22px;
background-image: linear-gradient(
to bottom,
#813050,
#813050 22px,
#C63E54 22px,
#C63E54 44px,
#D6741D 44px,
#D6741D 66px,
#EEA53E 66px,
#EEA53E);
}

Pierwszą rzeczą na którą musimy zwrócić uwagę 2 i 3 linia kodu. background-clip: text – ustawia na DIVie maskę, która przybierze postać tekstu który się w nim znajduje. Natomiast text-fill-color: transparent ustawia wypełnienie tekstu na przezroczystość. W ten sposób tekst przyjmuje kolor tła DIVa. Kolejną rzeczą o którą musimy zadbać to wysokość linii. Musi się ona zgadzać z wysokością „przedziałów” poszczególnych kolorów w gradiencie (podświetlone linie).

Tekst z gradientem

Tutaj różnica jest tylko taka, że nie zwracamy uwagi na wysokość linii.

See the Pen wBrzLQ by Krzysztof Furtak (@KrzysiekF) on CodePen.0

.text-content {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: -moz-linear-gradient(top, #c63e54 0%, #eea53e 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c63e54), color-stop(100%,#eea53e));
background-image: -webkit-linear-gradient(top, #c63e54 0%,#eea53e 100%);
background-image: -o-linear-gradient(top, #c63e54 0%,#eea53e 100%);
background-image: -ms-linear-gradient(top, #c63e54 0%,#eea53e 100%);
background-image: linear-gradient(to bottom, #c63e54 0%,#eea53e 100%);
}

Musimy jedynie zapamiętać, że rozpiętość gradientu jest uzależniona od wysokości DIVa, w którym znajduje się tekst. Niestety w tej chwili przykład działa jedynie z przeglądarkami WEBKIT. W pozostałych usimy poczekać, aż zaczną poprawnie interpretować text-fill-color