CSS3: Text Shadow Effect

Source: Internet
Author: User
Tags join
Text-shadow already existed in CSS2, and now CSS3 is ready to join him.

Recently I have to install the Firebug 1.4 cause I have to install Firefox 3.5, so very accidentally touch the WordPress backstage that beautiful text shadow. Text-shadow in CSS property. So today I have compiled some information, I hope it can inspire you. First, let's take a look at WordPress 2.8 background using the Text-shadow section (green arrow). What do you think? Yes, these are CSS3 attributes, not pictures.

What is Text-shadow?
Text-shadow already existed in CSS2, and now CSS3 is ready to join him. And since only Safari supports this attribute so rarely do we see real apps until the recent Firefox 3.5 support has revived interest in it. What is Text-shadow?
Text-shadow already existed in CSS2, and now CSS3 is ready to join him. And since only Safari supports this attribute so rarely do we see real apps until the recent Firefox 3.5 support has revived interest in it.
Next look at the syntax of Text-shadow:
Length length length of text-shadow:color;
Color: colour; Length in order refers to "x-axis length, y-axis, shadow blur radius "
Positive values represent the right in the x-axis, negative values to the left. Same reason. The Y-axis negative value is the upward. Either of these values can be zero or null (default processing will be done)
As an example:
Text-shadow: -1px 2px 3px #ffb69a;
Represents the x-axis direction shadow left 1px,y axis direction shadow down 2px, while shadow blur radius 3px, color is #ffb69a
Some experiments and demo
I did a little experiment and made a demo page . For browsers that do not support Text-shadow users to see the shadow effect, please look directly at the screenshot below (a friend said that the "Fire bird" looks like "chicken." ”):



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.