Use CSS3 to implement texture shadow text

　　Fire Station building school (bkjia.com) NewsRecently, I had to install Firefox 1.4 because of Firebug 3.5, So I accidentally touched the beautiful text shadow in the Wordpress background. That is, the text-shadow attribute in CSS. So today I have organized some documents, hoping to inspire you.

First, let's take a look at the text-shadow section in the wordpress 2.8 background (Green Arrow ). What do you think? Yes, these are all CSS3 attributes, not images.

Figure 1

What is text-shadow?

　　Text-shadow already exists in CSS2, and CSS3 is now ready to add it to it. Since Safari only supports this attribute for a long time, we seldom see real applications. Until recently, Firefox 3.5's support for this attribute has aroused people's interest in it. Bkjia.com

Text-shadow supports adding shadows to text. In this way, we can use the css3 attribute to increase the texture of text instead of using any image. Currently, the supported browsers include Firefox 3.1 +, Safari 3 +, Opera 9.5 +, and other modern browsers (data may be biased ). Of course, the IE family is not supported. JZquan. COm

Next let's take a look at the text-shadow Syntax:

Text-shadow: color length;

Color: color; length indicates the "x-axis direction length, Y-axis direction length, shadow blur radius" in sequence"

A positive value on the X axis indicates the right, and a negative value indicates the left. In the same way, the negative value of the Y axis indicates upward. Any value can be zero or empty (default processing will be performed)

For example:

Text-shadow:-1px 2px 3px # ffb69a;

It indicates that the X-axis direction shadow is 1px to the left, and the y-axis direction shadow is 2px down. The shadow blur radius is 3px, and the color is # ffb69a.

Some tests and demos

I made a small experiment and made a Demo page. To enable users who do not support text-shadow in the browser to see the shadow effect, see the following (a friend said that the Firebird looks like a chicken "):

Figure 2

If you are using Firefox 3.1 +, Safari, and other browsers, click the Demo directly.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page