CSSplay - Gradual color change on hover and gradient color for text
5th February 2013
For IE10, Firefox, Safari, Chrome, Opera and iPad etc.
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
copyright © stu nicholls - CSS play
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
You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.
Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.
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.
