Front-end web developers always want to find ways to optimize your HTML and CSS code. I saw a post on Cssglobe.com by Alen Grakalic about CSS Text Gradient and it opened me the idea about CSS Text Gradient. So maybe I can have this look gradient without using a transparent gradient PNG file. Bestwebbuzz.com presents text gradient without transparent gradient PNG file. This is how it works.
css gradient
CSS
h2 {
font-size:250%;
color:#0079b6;
font-weight:normal;
letter-spacing:-.05em;
margin:.6em 0;
position:relative;
font-weight:bold;
}
h2 span{
position:absolute;
display:block;
top:0;
left:0;
height:60%;
width:100%;
background-color:#FFFFFF;
filter: alpha(opacity=65); /* <—-this part do the magic——*/
-moz-opacity: 0.65;/* <—–this part do the magic———*/
opacity: 0.65;/* <—-this part do the magic———-*/
}
HTML
<h2>My Cool Title<span></span></h2>
<h3>My Cool Title<span></span></h3>
You can download the demo file here demo
I would like to thank Alen of cssglobe and Virgil of jampmark.com for the idea and concept.