flexnds
Power Member
- Jan 4, 2010
- 643
- 699
Ok, I'm sure most of us know that your header is prime real estate for your main keyword, especially on an EMD.
Typical problem, you make a nice header then lay text over it only to find out you can't find a good text color that will be readable. Then you figure out text shadow in css only to find out that IE does not support it, well, unless you wanna get technical with javascript and all sorts of other sh*t. Quick way to get text shadow working in FF, Chrome, and IE. Only tested in IE9 so far. If you get the chance to test in another version post here.
I know there are literally hundreds of ways to add shadow, but this one it quite nice with just a few lines of css. Sample below:
Typical problem, you make a nice header then lay text over it only to find out you can't find a good text color that will be readable. Then you figure out text shadow in css only to find out that IE does not support it, well, unless you wanna get technical with javascript and all sorts of other sh*t. Quick way to get text shadow working in FF, Chrome, and IE. Only tested in IE9 so far. If you get the chance to test in another version post here.
I know there are literally hundreds of ways to add shadow, but this one it quite nice with just a few lines of css. Sample below:
HTML:
#header h1 {
font-size: 50px;
color:#fff;
padding-top: 50px;
padding-left: 50px;
filter: glow(color=#333333,strength=3);
text-shadow:
1px -1px 5px rgba(0, 0, 0, 0.2),
-1px 1px 5px rgba(0, 0, 0, 0.2),
1px 1px 5px rgba(0, 0, 0, 0.2),
-1px -1px 5px rgba(0, 0, 0, 0.2),
0px 1px 5px rgba(0, 0, 0, 0.2),
0px -1px 5px rgba(0, 0, 0, 0.2),
1px 0px 5px rgba(0, 0, 0, 0.2),
-1px 0px 5px rgba(0, 0, 0, 0.2);
}
