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.
Tags: background text opacity, css gradient, CSS Text, Gradient Text, html text gradient, Optimized Css Text Gradient, Text without image png, Web Design
Good trick but using an image is a better solution for anti-aliasing.
[...] teniendo en cuenta dicho artículo como base, nos dejan otra variante en este otro artículo Optimized Css Text Gradient, con la posibilidad de darle un aspecto degradado sin usar un gradiente con un archivo PNG [...]
To be fair, this is really not a gradient. The top of the text is one color, thanks to the overlay, and the bottom of the text is another, but there is no smooth transition from one color to the other.
A better title might be “Optimized Css Gloss Effect”
art i i agree i should have name this optimized css gloss effect. thanks for the correction.
Hasan, yeah image is better to make it smooth but i want it optimized.
thanks for the comment though
i think the title “Pure CSS Text Gloss Effect” is cool. Nicely done cris.
[...] Optimized Css Text Gradient [...]
Check out my JavaScript version of Text Gloss Effect at http://www.jampmark.com/web-scripting/dynamic-text-gloss-effect.html
Thanks for the great trick! But this not working in IE6. CSS must be like this for IE6:
h2 span{
position:absolute;
display:block;
top:0;
left:0;
height: 22px; /* for IF6 */
width:100%;
background-color:#FFFFFF;
filter: alpha(opacity=65);
-moz-opacity: 0.65;
opacity: 0.65;
overflow: hidden; /* for IF6 */
}
[...] Источник описанной техники – Optimized Css Text Gradient. [...]
Thanks for this…looking at ways to optimise my site!
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
My Cool Title
My Cool Title
Topic bookmarked.
Nice job mate. rocks.
i dont understand why you are calling this a gradient. its an interesting effect, but its no gradient.