/    Sign up×
Community /Pin to ProfileBookmark

Shadow

Copy linkTweet thisAlerts:
Nov 29.2002

How do you make a shadow. Like on Microsoft’s homepage they have the side banner. When you move your mouse over items with arrows to their right, a new menu pops out. This menu has a shadow behind it. I know that the shadow was done with CSS but can anyone tell me how? Thanks.?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@StefanNov 30.2002 — There are shadow properties in CSS, but AFAIK no browser implements them.

IE also has a lot of "SFX" proprietary CSS lookalike. It's very likely that it's one of them you are seeing on MS own site.

For documentation of proprietary MS code, ms developer pages is probably the best place.

Obviously the code will only work in MS browsers.
Copy linkTweet thisAlerts:
@Rick_BullNov 30.2002 — You could do something like this also, not quite right, but close:

<i>
</i> &lt;p style="border-right:1px solid black; border-bottom:1px solid black;"&gt;
Blah
&lt;/p&gt;
Copy linkTweet thisAlerts:
@Zach_ElfersauthorNov 30.2002 — No. I wouldn't like the look of that. The border would go all the way down to the edge and it wouldn't be a gradual shadow.
Copy linkTweet thisAlerts:
@XeenslayerDec 02.2002 — I believe that it is done using CSS Filters, either the Shadow or Drop Shadow. I might be wrong, but in case you don't know the code for these...

----------

SHADOW:

<span style="width:100%;filter:shadow(color=#F00, direction=145);color:#008;font-size:2em">Blue text with Red Shadow</span>

----------

DROPSHADOW:

<span style="width:100%;filter:dropshadow(color=#AAA, OffX=2, OffY=2);color:#800;font-size:2em">Red text with Grey DropShadow</span>

----------

Maybe you'd want to try them out.
Copy linkTweet thisAlerts:
@Zach_ElfersauthorDec 03.2002 — Thanks! I'll try that.?
Copy linkTweet thisAlerts:
@XeenslayerDec 10.2002 — ? That's ok.

So does it work?
×

Success!

Help @Zach_Elfers 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 5.5,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

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