Home
1
Gradient Text Using CSS Sat Jun 26, 2010 12:50 am
Nem
Registered Member
Posts : 445
Points : 0
Age : 30
Location : Canada
Browser :
Gradient Text Using CSS Apply gradient effect to text with CSS |
This tutorial will purely focus on using css to apply a gradient effect to your text. How this works is simply by adding a 1px gradient png (with alpha transparency) over the text. The HTML markups:
For css the key points are: h1 { position: relative } and h1 span { position: absolute }
and that's it! This will only work for solid background colors. Also your gradient image (png) must be the same color as your background. If your gradient image is taller then the heading, the text will not be selectable. If you want to test it out go to http://webartzeditor.tk and put in the css and html codes and replace the "gradient.png" with this image: https://i.servimg.com/u/f68/15/18/69/86/gradie12.png and have fun with it!  |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Nem on Sun Jun 27, 2010 9:43 pm; edited 1 time in total
, and Umm Nem , can you give me a demo of how it looks like?
