Astazi va propun un mic truc, cu ajutorul caruia putem da un efect gradient unui text ajutandu-ne de o imagine PNG ( subliniez PNG si nu javascript sau flash ). Tot ce trebuie sa faceti este sa stergeti tag-ul <span> din heading si sa aplicati ca fundal imaginea utilizand proprietatea CSS position:absolute. Este compatibil cu urmatoarele Browsere: Firefox, Safari, Opera si Internet Explorer 6.

Cum functioneaza ?

Adaugati un text dupa cum urmeaza :

HTML

 
<h1><span></span>CSS Gradient Text</h1>
 

Punctele cheie ale codului CSS sunt : h1 { position: relative } si h1 span { position: absolute }

CSS

 
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;
}

Demo | Download

Articol preluat de pe : Webdesignerwall