Apply Drop Shadow Effect To Text Using CSS (Cross Browser Compatibility Issue)
Out of boredom, I tried manipulating the drop shadow effect of text in a simple html file. The browsers tested where IE 9, Firefox 12 and Chrome version 32.However, I found some difficulties on controlling the drop shadow effect in IE 9. After doing some research, I found a solution using
filter.
Here's my simple html markup:
Here's the css for Chrome and Firefox (textShadowGreg.css)
Here's the css for IE 9(textshadowID.css)
These are the rendered html in different browsers.
a. IE 9
b. Mozilla Firefox 12
c. Google Chrome
Reference: useragentman
Cheers!
Here's my simple html markup:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Chapter 2: Drop shadows on text</title> <link rel="stylesheet" href="textshadowGreg.css" /> <!-- http://reference.sitepoint.com/css/conditionalcomments --> <!--[if IE ]> <link href="textshadowIE.css" rel="stylesheet" type="text/css"> <![endif]--> </head> <body> <h1>What is CSS?</h1> <p> Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. It can also be used to allow the web page to display differently depending on the screen size or device on which it is being viewed. While the author of a document typically links that document to a CSS file, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. </p> </body> </html>
h1 {
font-size: 250%;
color:black;
text-shadow: 3px 3px 3px #999;
}
h1
{
font-size: 250%;
color: black;
filter: progid:DXImageTransform.Microsoft.Chroma(Color=white)
progid:DXImageTransform.Microsoft.Shadow(Color=#9f9b9b, Direction=120, Strength=5);
}
a. IE 9
b. Mozilla Firefox 12
c. Google Chrome
Reference: useragentman
Cheers!
Comments
Post a Comment