CSSPLAY

CSS DEMOS › Gradual color change on hover and gradient color for text

Date : 5th February 2013

For all modern browsers

This demo is too wide for your mobile screen.
Please view on a tablet or PC.

Swipe left to right color change on mouseover with right to left change on mouseout

Typography

Swipe top to bottom color change on mouseover with bottom to top change on mouseout

Typography

Swipe left to right color change on mouseover with left to right change on mouseout

Typography

A gradient text color using no graphics

Typography

Swipe right to left color change on mouseover with left to right change on mouseout

Typography 

Swipe right to left color change on mouseover with right to left change on mouseout

Typography

Information

Three methods of styling a gradual change of color on hover and a method of applying a color gradient to text using just CSS.

The first and second demos use the :before pseudo class to copy the text and overlay it on hover and produce a left/right and top/bottom color change on hover. The color change reverse when the mouse is moved off the text.

The third method has a change of color for each letter and the change is delayed to give a left to right color change. When the mouse is moved off the text the change back to the original color is also left to right.

The fourth demo shows how to style text with a color gradient using just CSS. In this case the :before pseudo class is used to apply an overlay with a gradient opacity. The only downside is that the overlay color must be the same as the background color.

5th February 2013

Two additional demos added to demonstrate how to reverse the direction for each method.

Copyright

Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.

1. If you are using this on a personal web site then please retain the copyright comment in the stylesheet.
   A support donation is now required for this demonstration.
2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.
3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.