CSS3 Shining Text, CSS2 Flaming Text - Updated
Update: The CSS2
text-shadow property sure is versatile. If you combine it with some CSS3 animations you can create a pretty decent vanishing smokey text effect.
text-shadow. I posted it on Twitter but never got around to posting it here. Today I pulled together another text effect, shining text, by using CSS3 properties and animation. I thought I'd cover both in one post.
Flaming Text Using CSS2 text-shadow
Now we're cooking with gas.
Most readers should see the previous line of text on fire since it just uses the CSS2 property
text-shadow. If you don't see that you're probably using Internet Explorer or something. Do note, there's no use of images, and the text is still selectable.
The key to this effect is using multiple text shadows applied to the same text, each with a different color, position, and blur.
text-shadow: color1 x1 y1 blur1, color2 x2 y2 blur2, …;
Shining Text Using CSS3 WebKit Properties
Check out the shine on this.
This effect is created through a combination of a CSS3 gradient in the background, a CSS3 background clipping property which clips the background to the text, and a CSS3 animation to move the background gradient. I was inspired by a demo done by Trent Walton, and took it to the next level by removing the use of any image files. Open my shining text example and view source.
The background gradient is created with the
-webkit-gradient CSS3 property. Firefox 3.6 added support for CSS gradients to the Firefox browser family.
The "trick" CSS property here to complete this effect is the CSS3 property
-webkit-background-clip. This defines the region to which the CSS
background property will be clipped. By using transparent or semi-transparent text and
-webkit-background-clip: text I can make the background gradient only visible where the text is.
Welp, that's about it. I hope you found it enjoyable. Happy hacking!