Frameworki CSS - czy warto z nich korzystać?

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).

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

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.

ź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