7 March 2008

Go Glossy!

Автор: admin in Uncategorized

I got this post from http://justtalkaboutweb.com/2008/02/04/css-web-20-glossy-text/ and I feel you may put this too to good news. I’ve tried it and it’s a sure winner.

How to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash)?

Just put an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick works on most browsers like Firefox, Safari, Opera and give some hacks to make it IE6-usable.

The Code

<h1><span></span>Just Talk About Web</h1>

Use the CSS to define styling of the H1.

h1 {/* optional styling, you can use whatever you wish */font: bold 300%/100% “Lucida Grande”;color: #000;

/* now, this is important */

position:relative;}

Now the gradient: we put a transparent PNG as a background image for the span element and set position property to absolute so it can go above the text.

h1 span, h2 span {background: url(gradient-glossy.png) repeat-x;position: absolute;display: block;

width: 100%;

height:27px;

}

Unfortunately, not all browsers support PNG transparency (IE6, for example). So for those browsers, please include this as well.

<!–[if lt IE 7]>
h1 span {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’gradient-glossy.png’, sizingMethod=’scale’);
}<![endif]–>

Our finished product!

Tags: Go Glossy!

Uncategorized,

Подписаться,

(No Ratings Yet)

424 views

Эта статья была опубликована на7 March 2008на1:12 PM в категории Uncategorized. Вы можете следить за обновлениями в этой статье с помощьюRSS 2.0фидов. Вы можете оставить ответ, или обратную ссылку из ваше сайте.