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

Sekcja 1Poczuj 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.

Sekcja 1.1background-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.

Sekcja 1.2-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.

Sekcja 1.3-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.

Sekcja 2Podsumowanie

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