search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

[CSS] Jak dodać gradient do tekstu?

[CSS] Jak dodać gradient do tekstu?

W dzisiejszym wpisie zostanie opisany sposób na stworzenie gradientu na tekście. Jest to jedna z ciekawszych nowych technik związanych ze specyfikacją CSS3 i zdecydowanie rzadziej stosowana niż gradienty dla tła elementu.

Jest to powiązane z tym, że gradienty dla tekstu są wspierane na razie tylko i wyłącznie poprzez przeglądarki z silnikiem Webkit, czyli Google Chrome i Safari. Jednakże, jakiś czas temu szerokim echem odbił się pomysł, aby twórcy pozostałych przeglądarek (Mozilla Firefox, Internet Explorer czy Opera) zaczęli implementować pomysły "webkitowe" do swoich przeglądarek. Na pewno jest to dobry pomysł, ale tylko wtedy gdy z języka CSS znikną prefiksy.

Poczuj magię gradientu w tekście

Jako element tekstowy do którego przypiszemy gradient wybrałem znacznik <h1>. Do dodania gradientu będziemy korzystać z 3-ch atrybutów CSS:

  • -webkit-gradient
  • -webkit-background-clip
  • -webkit-text-fill-color

Kod CSS wygląda następująco:

1
2
3
4
5
6
7
8
9
h1 {
	font-size: 40px;
	background-image: -webkit-gradient(linear,
				left top, left bottom,
				from(#d20000),
				to(#940000));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

Celem powyższego kodu jest stworzenie odpowiedniego gradientu dla tekstu na stronie.

background-image: -webkit-gradient()

Na początku definiujemy kolor tła dla tekstu. Taki sam zapis stosujemy jeśli chcemy utworzyć tło dla elementu. W tym przypadku, gradient jest liniowy i kolor przechodzi z jasnoczerwonego do ciemnoczerwonego, z góry do dołu.

-webkit-background-clip

Ta własność jest odpowiedzialna za "przycinanie" tła tylko do tekstu. Opcja "text" jest obsługiwana tylko i wyłącznie przez przeglądarki z silnikiem Webkit. Może ona zawierać również inne opcje.

-webkit-text-fill-color

Ta własność jest odpowiedzialna za ustawienie przezroczystego koloru dla tekstu, dzięki temu nie kolor tekstu nie zakryje przyciętego tła.

Podsumowanie

Kod jest bardzo prosty. Jedynym problemem może być ręczne definiowanie gradientu. Narzędziem, które może pomóc w jego generowaniu jest generator gradientów.

Dzięki obecnym możliwościom CSS i wspartymi niebanalnymi propozycjami nowych własności, od twórców silnika generowania stron WWW - Webkit, można tworzyć naprawdę interesujące kompozycje na stronach WWW. Szkoda tylko, że efekt będzie widoczny u tak niewielu osób póki co ...

Demo z tego artykułu można zobaczyć tutaj: CSS tekst gradient

  • Comandeer

    Powiem tak: biorę sobie http://www.w3.org/TR/css3-background/#the-background-clip i patrzę czy mam tam wartość „text”… nie ma. więc czy to na pewno jest css3? 😉 ostatnio webkit wyjeżdża z takimi własnymi kwiatuszkami, jak maski w CSS czy inne takie. i raczej do specki nigdy to nie wejdzie

  • Piotr Nalepa

    Wychodzę z założenia, że część ciekawych rzeczy warto przedstawić. W końcu gradient dla tekstu się pojawi we wszystkich przeglądarkach.

  • Dobrze Panie ale warto to zaznaczyć. Moim zdaniem robi się to samo co czasów IE. Co zapomniałeś filtrów? Standard to standard. Nie jakiś urojony i ich. Tak długo to plugastwo musieliśmy usuwać z sieci przez intensywną kampanię reklamową.

  • Tak to niestety jest, że CSS rozwija się za szybko – stopniowo dodawane są kolejne rzeczy do przeglądarek i teraz musimy pisać:
    -khtml-
    -moz-
    -ms-
    -o-
    -webkit-
    [bez przedrostka]