Jak na stronie umieścić gradientowy (różnokolorowy, ombre) tekst CSS?

Frameworki CSS - czy warto z nich korzystać?

Dzisiaj zajmę się po raz kolejny modyfikowaniem wyglądu tekstu na stronie internetowej a konkretnie pokażę jak uzyskać efekt gradientowego tekstu czyli wielokolorowego tekstu.

Przeważnie na stronach internetowych tekst jest w jednym kolorze. Czasami w obrębie akapitu trafiają się słowa lub grupy słów w innym kolorze. Jednak przeważnie jest to efekt zastosowania odpowiednich znaczników (np. pogrubienie, link).

Wyrazy te jednak w dalszym ciągu są napisane w jednym jednolitym kolorze. Nie ma tak, że pierwsza, druga, trzecia litera ma inny kolor niż kolejne.

Spis treści

Toggle

Tworzymy wielokolorowy, różnokolorowy tekst

Od czego zatem zacząć? Dobre pytanie może na sam początek poznamy właściwości CSS jakie będą nam potrzebne oraz wyjaśnię co kryje co to jest gradient. Tak by nie było już nieporozumień kiedy dojdziemy do efektu końcowego.

Co to jest Gradient?

Gradient to płynne przechodzenie z jednego koloru w drugi (może to być jednocześnie kilka kolorów). Bardzo często efekt ten mylony jest ombre (tego określenia nie używa się w grafice), lub niektórzy stosują te nazwy zamiennie.
Z ombre mamy do czynienia w momencie kiedy mieszczące się obok siebie obiekty mają zbliżone pasujące do siebie kolory. (np. każda litera tekstu jest w innym kolorze jaśniejszym lub ciemniejszym niż sąsiednia)

Tekst z gradientem – co trzeba wiedzieć

Na początek będziemy musieli przypomnieć sobie właściwości CSS background-clip, text-fill-color oraz jak uzyskać gradient w CSS. Wiedza na ich temat przyda nam się w dalszej pracy.

Dwie pierwsze właściwości opiszę poniżej co do gradientu odsyłam do mojego wpisu na jego temat.

Jak działa background-clip?

Właściwość background-clip może przyjmować wartości taki jak

border-box – jest to wartość domyślna. Tło obiektu rozciąga się za granicą
padding-box – tło rozciąga się do wewnętrznej krawędzi obramowania. Czyli jeżeli obiekt posiada tzw. ramkę będzie ona stanowiła granicę tła
content-box – tło rozciąga się do krawędzi pola zawartości obiektu. W tym wypadku tło będzie znajdowało się tylko pod zawartością samego obiektu
text – tło zostaje się jedynie pod tekstem obecnym w obiekcie (-webkit-background-clip)

Brzmi dziwnie dlatego poniżej macie kilka przykładów.

Właściwość jest obsługiwana praktycznie przez wszystkie przeglądarki internetowe.

Jak działa text-fill-color?

Właściwość text-fill-color umożliwia nam określenie jakim kolorem powinno zostać wypełnione wnętrze tekstu. Własność ta nadpisuje działanie color.

Istotne jest byście wiedzieli, że nie jest standardowa własność. Obsługiwana jest jedynie w formie -webkit-text-fill-color czyli z przedrostkiem. Dlatego będziemy w tej formie z niej skowytać.

Działa ona tak samo jak color wiec specjalnych przykładów nam raczej nie trzeba.

Tworzymy tekst pisany gradientem!

Zakładam, że teraz jesteśmy gotowi do dalszej pracy. Efekt tekstu „pomalowanego” gradientem uzyskamy bowiem właśnie z tych 3 własności.

Przykładowo efekt ten uzyskamy z pomocą poniższego kodu:

.text-effect{
background: -webkit-linear-gradient(45deg, #b4ddb4 0%, #83c783 17%, #52b152 33%, #008a00 67%, #005700 83%, #002400 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

W efekcie działania tego kodu tekst przybierze kolory tak jak dzieje się to w przypadku tła. Poniżej zamieściłam przykład z zastosowaniem tego kodu.

Mam nadzieję, że wam się podobał dzisiejszy tutorial. Pytania na jego temat można zostawiać poniżej w komentarzach.

Jak zrobić kolorową czcionkę HTML?

W samym HTML jest to nie możliwe. Bo HTML nie posiada odpowiednich właściwości. Do efektu potrzebujemy CSS lub JS.