0

Text Gradients Trick Using CSS and a PNG image

Posted on March 8, 2010 by robbychen


A few weeks back I found an useful jQuery plugin called Rainbows to make text gradient. This was an useful JavaScript-based plugin. However, some people disable their browsers’ JavaScript support, make this technique useless. Another technique I discovered today that makes text gradient is by using CSS and a little PNG image. This technique has some advantages and disadvantages over the previous JavaScript technique. First, JS technique has the ability to copy text contained in the gradient where as CSS technique cannot copy the text image and image itself. Second, CSS technique uses basic CSS syntax to achieve this effect by repeat a gradient image vertically where as JavaScript technique borrows JS framework to achieve this effect.

This technique is very easy to create purely using CSS. It uses white gradient background as a background image in order to make this effect working. It’s also cross-browser compatible. The following steps shows how to apply this effect:

  1. First by adding an empty nested span tag after the text you want to make gradient, e.x. <h2>Title<span></span></h2>.
  2. Style the text anyway you want using CSS, except set the position to relative, “position:relative”.
  3. Style the background of empty span to transparent gradient png and repeat-x. That is t set the background image to white gradient background png if you use default white background color.
  4. Lastly, in order to make compatible with other browsers, apply the following CSS styles to the empty span element:

    background-color:#fff;
    background-color:transparent;
    background-image: url(none.gif);
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”gradient_1.png”, sizingMethod=”scale”);

This technique uses an easier but unusual method to achieve the text gradient effect. Once the text is applied with this effect, the produced image cannot be copied nor selected. The best place to use this effect is on the title of an article or as a logo effect.

To learn more about this technique, visit http://cssglobe.com/lab/textgradient/.

There are no posts related to Text Gradients Trick Using CSS and a PNG image.