←  Tutoriale

AMXX.pl: Support AMX Mod X i SourceMod

»

CSS
Gradient w Tekście

  • +
  • -
Michael. - zdjęcie Michael. 26.08.2012

Witam,
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
Odpowiedz

  • +
  • -
Raen - zdjęcie Raen 26.08.2012

Szkoda że podgląd efektu nie działa i link do generatora :)
Ale ogólnie + :P
Odpowiedz

  • +
  • -
Michael. - zdjęcie Michael. 26.08.2012

Nie mogę już edytować.
Generator tutaj - http://www.colorzill...radient-editor/
Wygląda to tak - Dołączona grafika
(26.08.2012 16:55):
Link do generatora poprawiony
Odpowiedz