Check 5 typical css3 text effects

In the past two years, HTML5 and css3 seem to be setting off an Internet revolution, and various talents are surging towards this wave. Innovative HTML5 applications are also popping up. Indeed, this should be the trend of web in the future. I have also learned about HTML5 and css3 over the past two days. I also summarized several typical CSS 3 text effects and put them on my blog "HTML5 Chinese website. There are many examples of CSS 3 text effects on the Internet, but these effects are representative. Others are basically extended based on these five effects. Let's take a look at them.

3D effect text

It mainly uses multi-layer stacking of text-shadow to achieve smooth projection effect, and uses transform to zoom in and fade in and out text slides.

Css3 burning text effects

It is mainly achieved through text-shadow and jquery's dynamic rendering.

Css3 text color gradient effect

This is mainly implemented through-WebKit-gradient. Because it is based on the WebKit kernel, it is only effective in chrome and Safari browsers Based on the WebKit kernel.

Css3 text border and hollow text effects

This effect is mainly achieved using-WebKit-text-stroke.-WebKit-text-stroke can add borders for text. It not only sets the width of the text border, but also sets its color. In addition, you can use the color: transparent attribute to create a hollow font.

Effects of inset shadow in css3

This inset effect is mainly achieved by using the background-clip attribute. In css3, the background-clip attribute is used to determine the cropping area of the background. In other words, it is used to control the display area of the element background.

After summary, we generally use the text-shadow, transform, transition,-WebKit-text-stroke, and background-clip attributes when performing CSS 3 text effects. Many other effects are nothing more than the different combinations of these types. Of course, I just started to learn this aspect. Please point out some points that are not correct.

You are welcome to subscribe to my HTML5 blog: http://feed.feedsky.com/cnhtml5. Study and explore together.

Reproduced Please consciously indicate the source: http://www.itivy.com/html5/archive/2012/1/12/five-css3-text-effects.html