Frameworki CSS - czy warto z nich korzystać?
by: Aurelia SypniewskaPosted on:

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

Czas czytania: 2 minut

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.

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)

See the Pen
Untitled by Aura (@Julka85)
on CodePen.0

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.

See the Pen
background-clip by Aura (@Julka85)
on CodePen.0

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.

See the Pen
Gradient Text – CSS 3 by Aura (@Julka85)
on CodePen.0

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.

źródła: