Poradnik który teraz przeczytacie nauczy was dodawania gradientu na tekst, czyli różnokolorowy tekst. Efekt będzie działał każdym silniku(IE nie działa, na Google Chrome 100%). Również jest to technologia CSS3 jak w poprzednim poradniku. Definicje po rozwinięciu kodu. Zacznijmy od pliku CSS.
h1 { /* Ustawiamy dla <h1>AMXX.PL</h1> */ font-size: 50px; /* Tekst o rozmiarze 50 pixeli */ background-image: -webkit-gradient(linear, /* Tło jako gradient liniowy */ left top, left bottom, /* Gradient od Gory do Dołu */ from(#74cd00), /* Z Góry Kolor #74cd00 Zielony */ to(#4c8700)); /* Do Dołu Kolor #4c8700 Zielony */ -webkit-background-clip: text; /* Przycinanie tła do tekstu */ -webkit-text-fill-color: transparent; /* Kolor tekstu jest przezroczysty dzięki temu nie nakłada się kolor z gradientem */ -moz-background-clip: text; /* Firefox */ -moz-text-fill-color: transparent; /* Firefox */ background-clip: text; /* Inne */ text-fill-color: transparent; /* Inne */ } /* Koniec h1 */
A HTML jest taki:
<h1>AMXX.PL</h1>
Efekt ciekawy... kolory lub gradienty możecie wziąć z tego generatora
KLIKNIJ TUTAJ