Shulou(Shulou.com)06/01 Report--

This article mainly introduces "css3 how to achieve font sunken protruding special effects". In daily operation, I believe many people have doubts about how to achieve font sunken protruding special effects in css3. The editor consulted all kinds of data and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts of "how to achieve font sunken protruding special effects in css3". Next, please follow the editor to study!

An example of the code for css fonts to achieve a sunken protruding that is three-dimensional is as follows:

Css3 fonts achieve three-dimensional effect

Body {

Background: gray

}

H2 {

Font-size: 200px

Color: gray

Text-shadow: 3px 3px 2px black

-3px-3px 2px white;}

H2:hover {

Text-shadow: 3px 3px 2px white

-3px-3px 2px black

}

PHP Chinese website

Here we want to achieve the effect of sag and bulge on "PHP Chinese net", and use: hover selector.

The hover selector represents the element used to select the mouse pointer floating over it.

The final effect of this code is as follows:

When you move the mouse over the text, the effect is as shown below, showing the font sunken effect:

When the mouse moves away from the text, the effect is as follows, showing the font protruding effect:

The text-shadow attribute is mainly used here.

Text-shadow attribute: add shadows to fonts. You can achieve some desired font shading effects by setting relevant property values to the text-shadow property, reducing the use of images.

Note: all major browsers support the text-shadow attribute. However, the text-shadow attribute is not supported in Internet Explorer 9 and earlier browsers.

At this point, the study of "how to achieve the special effects of sunken and protruding fonts in css3" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.