Dreamweaver - CSS drop shadow

Author

CSS drop shadow

raizel

2004-04-08, 5:31 pm

Guess this is slightly OT?

I'm trying to do the drop shadow from A List Apart. However, I'm not
understanding how to create the shadow gif and why they suggest the
large size.

My images are in two sizes: 450x300 and 300x450. How do I create the
"empty selection" shadow I need? Do i just create a two-sided image in
FW?'

<QUOTE>
Here¹s how it works: you need to make a drop shadow image in the image
editor of your choice. It should be only the shadow, without a visible
border (an easy way to do this is by applying the effect to an empty
selection). Make sure your image is big enough to cover the maximum
expected size of the block elements that will use it. In practice, we¹ve
found that 800 x 800 is a respectable enough size.
http://www.alistapart.com/articles/cssdropshadows/

--
raizel
remove the STARS from your eyes to reply

David Stiller

2004-04-08, 5:31 pm

Best chance on an answer for a question regarding an ALA article is to
post the question there. :)

David
stiller ( at ) quip ( dot ) net

"raizel" <739239@STARSistar.ca> wrote in message
news:c53qft$smp$1@forums.macromedia.com...
> Guess this is slightly OT?
>
> I'm trying to do the drop shadow from A List Apart. However, I'm not
> understanding how to create the shadow gif and why they suggest the
> large size.
>
> My images are in two sizes: 450x300 and 300x450. How do I create the
> "empty selection" shadow I need? Do i just create a two-sided image in
> FW?'
>
>
> <QUOTE>
> Here¹s how it works: you need to make a drop shadow image in the image
> editor of your choice. It should be only the shadow, without a visible
> border (an easy way to do this is by applying the effect to an empty
> selection). Make sure your image is big enough to cover the maximum
> expected size of the block elements that will use it. In practice, we¹ve
> found that 800 x 800 is a respectable enough size.
> http://www.alistapart.com/articles/cssdropshadows/
>
> --
> raizel
> remove the STARS from your eyes to reply

raizel

2004-04-08, 10:29 pm

In article <c540f5$89m$1@forums.macromedia.com>,
"David Stiller" <stiller-NO-SPAM-@quip.net> wrote:
[color=darkred]
> Best chance on an answer for a question regarding an ALA article is to
> post the question there. :)
>
>
> David
> stiller ( at ) quip ( dot ) net
>
>
> "raizel" <739239@STARSistar.ca> wrote in message
> news:c53qft$smp$1@forums.macromedia.com...

thanks, found another 2 sites with images supplied. Am now trying to
figure them out!

--
raizel
remove the STARS from your eyes to reply

Dan Vendel *GOF*

2004-04-09, 7:28 am

SpinnyWoman wrote:

> I found some tricks on [L=link to Web Thang]http://www.webthang.co.uk[/L] here
> is the suggested code for CSS Text Shadow Effect
>
> Place inbetween <head> </head>
>
> <STYLE TYPE="TEXT/CSS">
> .shadow {width:220; height:80; filter: Shadow(color=#66666, Direction=135)}
> </STYLE>
>
> I haven't tried it out yet but looks like fun!
>
>
>

No fun. That's not html nor css but a filter for IE on Win only. No
other browser is supporting it.

--
Dan Vendel - *GOF*
Contact me directly at http://contact.vendel.info
Formmail tutorial at http://www.vendel.info/tut/formmail.html
Nested table demonstration at http://www.vendel.info/tabletut/
Search Engine Optimization & Rank Control Utility at http://awr.vendel.info
Search Dreamweaver newsgroup at http://www.vendel.info/google.html

SpinnyWoman

2004-04-09, 7:28 am

I found some tricks on [L=link to Web Thang]http://www.webthang.co.uk[/L] here
is the suggested code for CSS Text Shadow Effect

Place inbetween <head> </head>

<STYLE TYPE="TEXT/CSS">
.shadow {width:220; height:80; filter: Shadow(color=#66666, Direction=135)}
</STYLE>

I haven't tried it out yet but looks like fun!

Dan Vendel *GOF*

2004-04-09, 7:28 am

raizel wrote:

> Guess this is slightly OT?
>
> I'm trying to do the drop shadow from A List Apart. However, I'm not
> understanding how to create the shadow gif and why they suggest the
> large size.
>
> My images are in two sizes: 450x300 and 300x450. How do I create the
> "empty selection" shadow I need? Do i just create a two-sided image in
> FW?'

I also looked at that tutorial once. Frankly, it's a ridiculous
"much-ado-about-nothing", and I'm a bit surprised that ALA (considering
its otherwise impressive reputation) actually is offering this "solution".
All it does is making you break your back to produce something that'll
take you exactly 360 degrees, i.e. back where you started.
Instead, simply use your image editor, add a shadow to the image, and
you're done.
Just because an authority says something that *sounds* good, it doesn't
necessarily mean that it *is* good.

--
Dan Vendel - *GOF*
Contact me directly at http://contact.vendel.info
Formmail tutorial at http://www.vendel.info/tut/formmail.html
Nested table demonstration at http://www.vendel.info/tabletut/
Search Engine Optimization & Rank Control Utility at http://awr.vendel.info
Search Dreamweaver newsgroup at http://www.vendel.info/google.html

raizel

2004-04-12, 4:35 am

In article <c55nku$4bt$4@forums.macromedia.com>,
Dan Vendel *GOF* <see_my_signature_@_the_bottom_of_the_post.org>
wrote:

> I also looked at that tutorial once. Frankly, it's a ridiculous
> "much-ado-about-nothing", and I'm a bit surprised that ALA (considering
> its otherwise impressive reputation) actually is offering this "solution".
> All it does is making you break your back to produce something that'll
> take you exactly 360 degrees, i.e. back where you started.
> Instead, simply use your image editor, add a shadow to the image, and
> you're done.
> Just because an authority says something that *sounds* good, it doesn't
> necessarily mean that it *is* good.
>
> --
> Dan Vendel - *GOF*

but Dan, i have a few hundred images! The CSS way i could use
find/replace to apply (existing site). The image way, I'd have to open
all those image PSDs (where they exist), create the border and resave.
tons more time :)

While I've not got the shadow working properly, even the border it
applies adds a bit more effect than the plain image.

--
raizel
remove the STARS from your eyes to reply

Dan Vendel *GOF*

2004-04-12, 4:36 am

raizel wrote:

> but Dan, i have a few hundred images! The CSS way i could use
> find/replace to apply (existing site). The image way, I'd have to open
> all those image PSDs (where they exist), create the border and resave.
> tons more time :)
>
> While I've not got the shadow working properly, even the border it
> applies adds a bit more effect than the plain image.
>

Yes, that's what I'd do:
Get the <img> tag in CSS. Add a few px wide right and bottom border with
an extremely light gray color (assuming you're on white background) and
you'll get the same effect. Sure, it's not fading like a "real"
artificial shadow, but OTH, few people know how to do a realistic shadow
in PS or FW anyway.

--
Dan Vendel - *GOF*
Contact me directly at http://contact.vendel.info
Formmail tutorial at http://www.vendel.info/tut/formmail.html
Nested table demonstration at http://www.vendel.info/tabletut/
Search Engine Optimization & Rank Control Utility at http://awr.vendel.info
Search Dreamweaver newsgroup at http://www.vendel.info/google.html

raizel

2004-04-12, 4:37 am

In article <c56q0l$l8g$1@forums.macromedia.com>,
Dan Vendel *GOF* <see_my_signature_@_the_bottom_of_the_post.org>
wrote:

> Yes, that's what I'd do:
> Get the <img> tag in CSS. Add a few px wide right and bottom border with
> an extremely light gray color (assuming you're on white background) and
> you'll get the same effect. Sure, it's not fading like a "real"
> artificial shadow, but OTH, few people know how to do a realistic shadow
> in PS or FW anyway.

Hey, sounds like a neat option! thanks, Dan :)

--
raizel
remove the STARS from your eyes to reply