Distorted Designers

Posted: **Sat Feb 28, 2009 4:47 pm**

Hello friends..
Here is a coll tutorial from http://www.webdesignerwall.com for decorate your site for web 2.0 gredient effect with CSS. Try it.. I know you will love to do...

Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Safari, Opera, and even Internet Explorer 6. Continue to read this article to find out how.

Benefits

This is pure CSS trick, no Javascript or Flash.
It works on most browsers including IE6 (PNG hack required).
It is perfect for designing headings.
You don’t have to render each heading with Photoshop.
This will save you time and bandwidth.
You can use on any web fonts and the font size remains scalable.

Demos http://www.webdesignerwall.com/demo/css-gradient-text/

Tutorial http://www.webdesignerwall.com/tutorial ... e-gallery/

Download Source

Code: Select all

http://www.webdesignerwall.com/file/css-gradient-demo.zip

Thanks

Posted: **Sat Feb 28, 2009 4:55 pm**

asholei.... CSS koto egiye geche....beparta emon je amader Photoshop ee haat ee dite dibena...

thanks partha bhai

Posted: **Sat Feb 28, 2009 5:00 pm**

You are right Asif bhai.. you can do some extra ordinary work with CSS.. check the other post "CSS decorative gallery" (http://distortedesigners.com/forum/view ... =73&t=1440) I use it at my son's site... http://www.prodipto.com.. I will invite you to check after completed designing.

I just forgot to post the IE png hack...

Here is it

IE PNG Hack

To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Download a copy of iepngfix.htc(http://www.twinhelix.com/css/iepngfix/) and insert the following code in between the <head> tag:

Posted: **Sat Feb 28, 2009 5:56 pm**

Thanks bhai, It is realy helpful for all.

Distorted Designers

CSS Gradient Text Effect

CSS Gradient Text Effect

Re: CSS Gradient Text Effect

Re: CSS Gradient Text Effect

Re: CSS Gradient Text Effect