How do you dropshadow text in IE?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you dropshadow text in IE?

Post by simonmlewis »

I know how to add shadow to Firefox text. It's relatively easy.
But I've never discovered how within the same class, to do it to IE9 as well.

Plus, is there a way for the "hover" state to move the text down a pixel and right a pixel - to give the impression of it being pushed down?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How do you dropshadow text in IE?

Post by social_experiment »

“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you dropshadow text in IE?

Post by simonmlewis »

Everything I am reading, and trying there, fails in IE9.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How do you dropshadow text in IE?

Post by social_experiment »

Code: Select all

<!doctype html>
<html lang="en" >
<head>
	<meta charset="utf-8" >
	<title>Test</title>
	<style >
#myelement {
    color: #000000;
    text-shadow:
    -1px -1px 0 #ffffff,  
    1px -1px 0 #ffffff,
    -1px 1px 0 #ffffff,
    1px 1px 0 #ffffff;
}

p#myelement {
    filter: progid:DXImageTransform.Microsoft.Chroma(color='red') progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#ff0000,offX=1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ff0000,offX=-1,offY=1) progid:DXImageTransform.Microsoft.dropshadow(color=#ff0000,offX=1,offY=-1) progid:DXImageTransform.Microsoft.dropshadow(color=#ff0000,offX=-1,offY=-1);
    zoom: 1;
}
	</style>
</head>
<body>
<h1>Hello World</h1>
<p id="myelement" >Hello World</p>
</body>
</html>
weird; i got a red drop-shadow with this snippet. From the few pages i read there is a jQuery alternative for IE9.
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you dropshadow text in IE?

Post by simonmlewis »

This doesn't work in IE9. I literally copied all you entered.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you dropshadow text in IE?

Post by simonmlewis »

http://www.cssportal.com/css3-text-shadow-generator/
This page when running directly from IE9 doesn't work.

Is there something in IE9 that has to be changed at my end??
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: How do you dropshadow text in IE?

Post by Christopher »

This seems to work for me in Firefox, Chrome and IE10 but perhaps not IE9 (does not work in Compatibility View). The web would be a much better place without IE.

Code: Select all

<!doctype html>
<html lang="en" >
<head>
	<meta charset="utf-8" >
	<title>Test</title>
	<style >
.shadow { 
	text-shadow:1px 1px 1px red; /* CSS3 */
	filter: Shadow(Color=red, Direction=130, Strength=1); /* IE Proprietary Filter*/
}
	</style>
</head>
<body>
<h1>Hello World</h1>
<p class="shadow" >Hello World</p>
</body>
</html>
(#10850)
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you dropshadow text in IE?

Post by simonmlewis »

So IE9 just doesn't do it at all, but now IE10 does (even tho the majority don't use it).

Ok thank you.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
social_experiment
DevNet Master
Posts: 2793
Joined: Sun Feb 15, 2009 11:08 am
Location: .za

Re: How do you dropshadow text in IE?

Post by social_experiment »

simonmlewis wrote:So IE9 just doesn't do it at all
the ie9 i use does. When the page loads it asks to allow activeX controls or block content. If allowed it displays the dropshadow; this page http://www.cb.restaurantconnectinc.com/ also uses the drop-shadow effect; it doesn't look particularly good but it does display
Capture.JPG
“Don’t worry if it doesn’t work right. If everything did, you’d be out of a job.” - Mosher’s Law of Software Engineering
User avatar
penweb
Forum Newbie
Posts: 7
Joined: Mon Oct 07, 2013 12:32 pm

Re: How do you dropshadow text in IE?

Post by penweb »

Wasn't IE9 deprecated? Lol. Sorry, I just hate that browser so much I just dont even worry about it anymore. Tell your customers to upgrade!
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: How do you dropshadow text in IE?

Post by requinix »

penweb wrote:Wasn't IE9 deprecated? Lol.
Depends how you define "deprecated". End of life? Not even close. Superseded by another version? Sure. No longer in use? Hardly.
penweb wrote:Tell your customers to upgrade!
Image
Post Reply