The Text-shadow property in CSS CSS2 can easily add shadows to text on a Web page, but so far only OS X's Safari browser supports it, and today we will create CSS text shading for other browsers, including Firefox.
The Text-shadow attribute, which has been discussed for years, allows you to control the color, offset, and blur of page element shadows, although it is not yet widely supported, but some designers have decided to use CSS text-shadows properties anywhere. Although this is only for a small number of users to enhance the design.
CSS Text-shadows Safari Implementation
If you are using Safari, you will be able to see the white text with shadows on the white background:
This is white text and on a white background. Yet in Safari, your can read this, because of the black Text-shadow.
If you're not using Safari, look at the effect chart:
Browser Common CSS Text shadow
Firefox is a great browser, but it does not support the above results, so I decided to use CSS to achieve a similar effect, although there is no previous Text-shadow properties you see the effect of perfect, but this method is applicable to a wider range of browsers, including Safari.
This is white text and on a white background. Yet with CSS Drop Shadows, you can read this, because's the black Text-shadow. HTML code
To add a shadow effect, we create a title attribute content in our example paragraph that is consistent with the content of the text that needs to be projected. Because we repeat the text in this method, the method is better suited for paragraphs with shorter headings or text, rather than for the entire page's shadow effect.
<p class= "Shadow" title= "This are white text and on a white background. Yet with CSS Drop Shadows, you can read this, because's the black Text-shadow. " ><span>this is white-text, on a white background. Yet with CSS Drop Shadows, you can read this, because of the black text-shadow.</span></p> we have enhanced a <SPAN&G in the paragraph The label is used to control the position of the normal text to separate it from the shaded area of the build.
The CSS
Css:before virtual elements are used to generate shadows from the title property of a paragraph, and absolute (absolute) positioning is used to place normal text above the shadow text.
. shadow {position:relative; display:block; color: #fff;}. Shadow span {position:absolute; display:block; top:0px; }.shadow:
before {display:block; padding:1px; content:attr (title); color: #666; You can use Position:absolute to control the position of elements within the relative positioning (position:relative) element. This skill allows us to control the placement of normal text and shadow text, and to use that element in the original text flow.
You can control the background color, font, and so on for text and shadows in. Shadow, and you can use the Padding property in. Shadow:before to control the offset of the shadow, using color to set the shade of the shadow, and so on.
