A LIST Apart: For People Who Make Websites

No. 172

Discuss: CSS Drop Shadows

Pages

 <  1 2 3 4 5 >  Last »

21 DC's responses

But there is a CSS filter for this:
<span style=“FILTER: DropShadow(Color=#0066cc, OffX=5, OffY=-3, Positive=1);width:300px;font-size:20pt;”>DropShadow Filter</span>
Oh yeah I forgot. God forbid ALA would publish something that works on Internet Explorer. Lol. I don’t know who that insults; ALA or IE.

posted at 05:12 pm on February 27, 2004 by Dante-Cubed

22 I'll check it out

I do most of my reseach on this site and it’s articles at work where I have access to a fairly fast connection. But I’ll try it at home too where I’m forced to use a dial-up connection and see what happens there.

Thanks a bunch for the clarification!

Now I know what I want my site to be when it grows up!

posted at 05:29 pm on February 27, 2004 by Critter

23 Actually, Dante...

your snippet of code is a bit old and amounts to a slander of IE. The IE filter that produces the very nice shadows talked about in the article is:

filter: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#aaaaaa,strength=3);

Far more subtle, don’t you think?

posted at 05:34 pm on February 27, 2004 by Brett Merkey

24 Discuss this article.

Discuss this article. OK then. Here’s a good tip – don’t use drop shadows on your web pages. Concentrate on making your site navigable, usable and well indexed and leave special effects and crap for the likes of print designers. Another good tip is to NOT make your site constrained to a particular width, like this one, as it sucks of print design.

posted at 07:10 pm on February 27, 2004 by Rob Shields

25 ALA is about pushing the boundaries

Rob, if you don’t have something constructive to say…at least stay on-topic. Fixed width vs. liquid layouts both have their place – as do drop shadows on occasion. I don’t think every site on the web should have them, and neither does the author.
Sites that only focus on navigation and usability at the expense of all visual craftmanship are soulless and boring. The craft of web design requires both halves of our collective brains to produce engaging experiences online. I appreciate ALA for contributing to both sides of my gray matter, whether or not I use every cutting-edge technique and tactic in their library. Code monkeys and designers need each other!

posted at 08:13 pm on February 27, 2004 by Wazungu

26 Server-Side Drop Shadows with ImageMagick or GD

What I really meant to say when I arrived =), was that ImageMagick, GD and PHP can automatically generate drop shadows on images. While I realize this goes against the grain of the discussion, it is a method that might be considered if all the images are being processed already or are dynamically generated and in a database. No extra markup or CSS to deal with, at least.
An example PHP library:
http://php.amnuts.com/index.php?do=view&id=9
Just food for thought!

posted at 08:26 pm on February 27, 2004 by Wazungu

27 Speaking of Monkeys...

I’m glad Webmonkey is dead. I’ll give my reasons for this in an upcoming article. You’ll see why I am dancing on its grave. I seem to be the only one, but I have valid reasons.
That filter stuff is outdated. The only filters I use in practice are the blendTrans and revealTrans, and that’s rare. I just like the Page Transitions. That’s enough of a filter for me, or anyone else.
Rob, ALA has just published some accessibility and structure articles. Now they’re publishing some “wow-factor” articles. I must say I do like that balance. I kinda agree; I found it a tad pointless, but at least there is some documented way as to how drop shadows are done.

posted at 09:45 pm on February 27, 2004 by Dante-Cubed

28 Here is an imagless version

I was at Silver Orange Labs website today and they had this version:

http://labs.silverorange.com/archives/2004/january/shadowboxing

Karl

posted at 05:02 am on February 28, 2004 by Karl Bedingfield

29 re: imagless version

Yeh i have seen that before. Its a good version, but not as effective. you dont get a fade effect. a proper shadow fades.

Im sure that they dont need to posistion the first div either;

.shadowbox { background: #ccc;
}

plus 2px doesnt really show very much. i recommend a bit more.

.shadowbox div { background: #333; border: 2px solid #000; color: #fff; padding: 10px; position: relative; top: -3px; left: -3px;
}

if just testes it my editing thier code using the firefox css-edit plugin, and it works.

posted at 06:46 am on February 28, 2004 by Phil Baines

30 Ping "support" in IE

I’m a bit surprised nobody has mentioned this yet:

http://www.alistapart.com/articles/pngopacity/

I remembered reading it a while back, I think I first saw that method on youngpup.net and then I saw the article here. It shows you how to force IE to render pings properly, variable opacity and all. Seems like you can get the best of both worlds. ;-)

posted at 09:43 am on February 28, 2004 by Alex Morales

Pages

 <  1 2 3 4 5 >  Last »

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Remember me

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)