Comments on: Optimized Css Text Gradient

By: Bobb

Bobb — Thu, 05 Aug 2010 13:26:15 +0000

I think it is a gradient, well done !!

By: telmac

telmac — Sun, 04 Jul 2010 13:52:33 +0000

i dont understand why you are calling this a gradient. its an interesting effect, but its no gradient.

By: Black Shirt

Black Shirt — Thu, 22 Apr 2010 20:10:37 +0000

Nice job mate. rocks.

By: JuksWebGuy

JuksWebGuy — Tue, 01 Sep 2009 05:55:35 +0000

Topic bookmarked.

By: uujka

uujka — Sat, 28 Mar 2009 21:49:36 +0000

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

By: Adam

Adam — Tue, 03 Feb 2009 05:40:15 +0000

Thanks for this…looking at ways to optimise my site!

By: Steep » Имитация градиентных заголовков на чистом CSS

Steep » Имитация градиентных заголовков на чистом CSS — Tue, 23 Dec 2008 13:11:41 +0000

[...] Источник описанной техники – Optimized Css Text Gradient. [...]

By: Dimox

Dimox — Tue, 25 Nov 2008 16:55:41 +0000

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 */
}

By: virgil

virgil — Sat, 22 Nov 2008 22:19:29 +0000

Check out my JavaScript version of Text Gloss Effect at http://www.jampmark.com/web-scripting/dynamic-text-gloss-effect.html

By: Useful Links (22/11/2008) | Apramana

Useful Links (22/11/2008) | Apramana — Sat, 22 Nov 2008 19:47:38 +0000

[...] Optimized Css Text Gradient [...]