CSS Gradient Text Effect

Post Reply
User avatar
parthasarker
Insanely Distorted
Insanely Distorted
Posts: 2369
Joined: Mon Dec 01, 2008 5:17 pm
Full Name: Partha Sarker
Expertise: Web Design

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.

Image

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


User avatar
asifshahid
Insanely Distorted
Insanely Distorted
Posts: 4329
Joined: Tue Oct 16, 2007 2:35 pm
Full Name: Asif Shahid
x 37

asholei.... CSS koto egiye geche....beparta emon je amader Photoshop ee haat ee dite dibena... :D thanks partha bhai
Asif Shahid
Sydney, Australia 🇦🇺
User avatar
parthasarker
Insanely Distorted
Insanely Distorted
Posts: 2369
Joined: Mon Dec 01, 2008 5:17 pm
Full Name: Partha Sarker
Expertise: Web Design

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:
<!--[if lt IE 7]>
<style type="text/css">

.photo span { behavior: url(iepngfix.htc); }

</style>
<![endif]-->
User avatar
mahbubulislam
DD Addict
DD Addict
Posts: 674
Joined: Tue Jan 22, 2008 10:07 pm
Full Name: Mahbubul Islam
Expertise: Web Design

Thanks bhai, It is realy helpful for all.
Image
Post Reply

Return to “CSS”