Gradient (różnokolorowy, ombre) tekst na stronie [CSS][HTML]

Kategoria wpisu Kurs CSS, Kursy, Tekst Tagi: , , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

Dzisiaj zajmę się po raz kolejny modyfikowaniem wyglądu tekstu na stronie internetowej. Tym razem 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).

Słowa te jednak w dalszym ciągu są jedno kolorowe.

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.


Pole z zastosowaniem domyślnego ustawienia background-clip: border-box;


Przykład z background-clip: padding-box;


Efekt z background-clip: content-box;


A teraz pokażę wam  jak to wygląda w CSS

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:

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.

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

źródła:
https://www.w3schools.com/cssref/css3_pr_background-clip.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
http://webkod.pl/kurs-css/wlasciwosci/kontur-tekstu/text-fill-color

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *