Recently, I had to install Firefox 3.5 because I wanted to install Firebug 1.4 , so I accidentally came into contact with the beautiful text shadow in the WordPress background. It is also the text-shadow property in CSS. So today I compiled some information, I hope It can be an inspiration to everyone.
First, let’s take a look at the part where text-shadow is used in the backend of WordPress 2.8 (green arrow). What do you think? Yes, these are CSS3 properties, not images.
What is text-shadow?
text-shadow already existed in CSS2, and now CSS3 is preparing to add it to it. And since only Safari has always supported this attribute, we rarely see real applications until recently when Firefox 3.5's support for it was revived. aroused people's interest in it.
text-shadow can support adding shadow to text, so that we can use css3 attributes to increase the texture of text during design without using any images.
Currently supported browsers include Firefox 3.1+, Safari 3+, Opera 9.5+ and other modern browsers (the data may be biased). Of course, the IE family cannot support it.
Next, look at the syntax of text-shadow:
text-shadow:color length length length;
color: color; length respectively refers to " X-axis direction length Y-axis direction length shadow blur radius " in order
Positive values on the X-axis mean to the right, and negative values on the left. In the same way, negative values on the Y-axis mean upward. Any one of the values can be zero or empty (will be processed by default)
For example:
text-shadow: -1px 2px 3px #ffb69a;
It means that the shadow is 1px to the left in the X-axis direction, 2px downward in the Y-axis direction, and the shadow blur radius is 3px, and the color is #ffb69a
Some experiments and demos
I did a little experiment and made a Demo page . In order to let users whose browsers do not support text-shadow see the shadow effect, please look at the screenshot below (a friend said that the "Firebird" looks like "chicken"):
If you are using Firefox 3.1+, Safari and other browsers, please click Demo directly.