Creati efect de gradient la text folosind CSS
Vreti sa creati titluri cu efect de gradient fara sa stati sa desenati de fiecare data in Photoshop? In urmatoarele randuri va voi arata cum sa creati aceasta foarte simplu utilizand doar CSS si o imagine PNG.
Ceea ce aveti nevoie este un element <span> in heading si sa aplicati pozitia imaginii de fundal folosind proprietatea CSS position:absolute. Acest efect a fost testat pe mai multe browser-e: Firefox, Safari, Chrome, Opera, IE7, chiar si pe IE6.
Plus-uri
- - Acest efect se face utilizand numai CSS, fara Javascript sau Flash. Functioneaza pe majoritatea browser-elor incluzand IE6 (necesar hack-ul PNG)
- - Este perfect pentru Titluri. Nu mai trebuie sa renderizati fiecare titlu in parte cu Photoshop-ul sau alt program de grafica. Folosind metoda economisiti timp, spatiu pe server si chiar latimea de banda a internetului
. - - Poate fi folosit cu orica font, iar dimensiunea fontului ramane modificabila.
Cum functioneaza?
Este foarte simplu. Practic vom aplica o imagine PNG de doar 1px latime cu (transparent) peste text.
Codul HMTL
CSS Gradient Text
Codul CSS
Elementul caruia ii vom aplica efectul este h1 si h1 span
h1 {
font: bold 330%/100% "Lucida Grande";
position: relative;
color: #464646;
}
h1 span {
background: url(gradient.png) repeat-x;
position: absolute;
display: block;
width: 100%;
height: 31px;
}
Folosirea in IE6
Din moment ce IE6 nu afiseaza PNG-24 corect, urmatorul cod este necesar pentru afisarea corecta a PNG transparente (adaugati oriunde intre <head> si </head>)
Versiunea JQuery (pentru adeptii javascript)
Daca nu vreti sa aveti elementele <span> in heading, puteti folosi versiune Javascript.
Mai multe exemple:
Practic puteti aplica pe orice culoare de fundal atata timp cat culoarea de gradient este ca si fundaul.
Limitari
- - Se poate folosi doar peste culori de fundal uniforme. Culoarea gradientului trebuie sa fie aceeasi cu cea de fundal.
- - Hack-ul PNG este necesar pentru a functiona pe IE6.
- - Daca imaginea PNG este mai inalta decat textul, nu veti mai putea selecta textul.
URL scurt catre acest articol: http://tinyurl.com/2vpd4px
Tweet
.