Comments on: shadow boxing with -moz-box-shadow

By: Hakim Jonas Ghoula

Hakim Jonas Ghoula — Mon, 07 Nov 2011 19:38:57 +0000

just use rgba for your color and you have transparency/opacity.

For example: rgba(255,0,0,0.5) for red with 50% opacity

By: orangorangan

orangorangan — Wed, 26 Oct 2011 11:16:49 +0000

Thanks mate! nice reference, helps me alot :)

By: Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine

Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine — Sun, 16 May 2010 15:03:41 +0000

[...] instead!For more on box and text drop shadows, see:Take Your Design To The Next Level With CSS3Shadow boxing with -moz-box-shadow (relevant to non-Mozilla browsers to, from hacks.mozilla.org)CSS3 Trials: Box-Shadow And More [...]

By: Dan Pacey

Dan Pacey — Fri, 14 May 2010 06:11:07 +0000

ah, guilty of not reading the whole article.. RGBA it is..

By: Dan Pacey

Dan Pacey — Fri, 14 May 2010 06:00:24 +0000

There’s only really one problem with box-shadow that I’ve found so far, and that’s the inability to set an opacity. Thus, any shadow created as #000 will be solid black. You can’t get around that by setting a lighter shade, as #ccc (for example) will appear as grey.

So, to my design mind, the spec is incomplete and needs to account for such an option.

By: Kadir

Kadir — Mon, 15 Mar 2010 08:15:35 +0000

You also have to adjust the second value, otherwise it will look like a drop shadow: 0px 2px 10px 5px #888;

By: Chad

Chad — Wed, 10 Mar 2010 16:07:59 +0000

Yes you can. You can use the property above: -moz-box-shadow: 0px 20px 10px -10px #888; except instead of using a negative value for the fourth value you can make it positive. so it will look like this: -moz-box-shadow: 0px 20px 10px 10px #888;

By: Rui Falcao Costa

Rui Falcao Costa — Thu, 07 Jan 2010 05:45:51 +0000

AWESOME!!!

By: Kadir

Kadir — Fri, 25 Dec 2009 15:53:36 +0000

So, is there an easy way to display a shadow all around an object without repeating the box-shadow values for all 4 combinations of left-top, right-top etc.?

By: 谋智社区 » Blog Archives » 颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影

谋智社区 » Blog Archives » 颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影 — Thu, 16 Jul 2009 08:06:20 +0000

[...] 原文地址：shadow boxing with -moz-box-shadow 系列地址：颠覆网络35天 [...]

By: Frederic Wenzel

Frederic Wenzel — Mon, 15 Jun 2009 20:27:06 +0000

Andy: Thanks, I am glad you liked it!

By: 颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影 < MJiA

颠覆网络35天 ─ 使用-moz-box-shadow渲染阴影 < MJiA — Sat, 13 Jun 2009 07:46:03 +0000

[...] 原文地址：shadow boxing with -moz-box-shadow 系列地址：颠覆网络35天 [...]

By: Andy

Andy — Fri, 12 Jun 2009 17:17:25 +0000

The best article on box-shadow I’ve seen on the Net.

Thank you!

By: shadow boxing with -moz-box-shadow | fredericiana

shadow boxing with -moz-box-shadow | fredericiana — Fri, 12 Jun 2009 14:48:06 +0000

[...] boxing with -moz-box-shadow This is another cross-post of an article I wrote for the hacks.mozilla.org blog. It shows off some of the fun stuff web developers can do [...]