Monday, June 2, 2008

CSS Gradient Text Effect

Inspired by webdesignerwall's CSS Gradient Text Effect. I developed something I think might be useful for the common. Using his CSS, I developed this

Wizard

This technique may be very useful when 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).





screenshot

Literally, you can apply this trick on any solid background color (as long your gradient color is the same as your background color).

screenshot

screenshot

screenshot

screenshot

screenshot

screenshot

Pattern / Texture

You can also apply this trick with a tile background image. Look, here is an example of zebra pattern. So, be creative!

screenshot






All you have to do is


  • Type in your text
  • Copy the code at top
  • Paste them anywhere below head tag.
  • Now copy the code found in the text area below the text font you want
  • And paste it in you site anywhere below body tag where you want them to appear.
Use the easy Wizard


Download CSS

2 comments:

paul said...

it's real nice, but you really shouldn't hotlink..tsk..tsk.

Hanush.H.Nair said...

thanks, sorry for hotlinking, if it hurt you