/    Sign up×
Community /Pin to ProfileBookmark

Drop shadow on text but NOT on Image?

Copy linkTweet thisAlerts:
Jul 03.2007

Is there a way to show a drop shadow on text but NOT on an image within the same <span> tag which it has to be? I’m running into images having lines on the bottom and right.

Here is the code I’m using and trying to modify to work.

<span style=”FILTER: DropShadow(Color=#4A005C, OffX=1, OffY=1, Positive=1);width:350px; border-style:none; border:0;”><font
size=”5″ face=”tahoma,verdana,arial” color=”ffffff” ><b>test
<img src=”/test.gif” border=”0″ style=”border-style:none; border:0;”>
</b></font></span>

Any help is appreciated!

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelJul 04.2007 — I shortened your code up a little bit, but making the image "position:relative;" gets it done.

CSS:<style>.dropShadow {FILTER: DropShadow(Color=#4A005C, OffX=1, OffY=5, Positive=1); width:350px; border:0; font:44px #000 bold tahoma,verdana,arial;}

.dropShadow [COLOR="Red"]img[/COLOR] {[B]position:relative[/B]}

</style>[/QUOTE]HTML:<p class="dropShadow">test<[COLOR="Red"]img[/COLOR] src="#" style="width:50px; height:50px;" />

</p>[/QUOTE]

Even if you added a border to the image, the drop-shadow is not present:

HTML:<p class="dropShadow">test<[COLOR="Red"]img[/COLOR] src="#" style="width:50px; height:50px; [B]border:2px solid #000;[/B]" />

</p>[/QUOTE]
Copy linkTweet thisAlerts:
@adalbyauthorJul 05.2007 — Works great man, thanks!
Copy linkTweet thisAlerts:
@pathfinder74Mar 01.2008 — How would you write that out for an external style sheet?

I'm trying to do it now but I always seem to botch it up.
Copy linkTweet thisAlerts:
@WebJoelMar 01.2008 — How would you write that out for an external style sheet?...[/quote] Explain. The bulk of this [I]is[/I] external... What part do you want to not be [I]inline[/I]?

Rather an old thread... nearly a year old. :o
Copy linkTweet thisAlerts:
@pathfinder74Mar 02.2008 — This part

<style>.dropShadow {FILTER: DropShadow(Color=#4A005C, OffX=1, OffY=5, Positive=1); width:350px; border:0; font:44px #000 bold tahoma,verdana,arial;}

.dropShadow img {position:relative}

</style> [/QUOTE]
Copy linkTweet thisAlerts:
@WebJoelMar 03.2008 — Save:
.dropShadow {FILTER: DropShadow(Color=#4A005C, OffX=1, OffY=5, Positive=1); width:350px; border:0; font:44px #000 bold tahoma,verdana,arial;}

.dropShadow img {position:relative}[/QUOTE] as a [B]*css[/B] file, -let's call it "shadow" and save it to the same folder as your "index.html" page, and create a [B]link[/B] to it in index.html, before "</head>"... ?? is this what you mean?

<link rel="stylesheet" [B]href="shadow.css"[/B] type="text/css" />[/QUOTE] Now, this is "[U]external[/U]"...
×

Success!

Help @adalby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...