W3C home > Mailing lists > Public > www-style@w3.org > April 2005

[CSS3] Backgrounds and Borders [for B. Bos and T. Boland]

From: l b <sneakyhybrid@hotmail.com>
Date: Sat, 23 Apr 2005 01:22:27 +0000
Message-ID: <BAY17-F4026330D39850D44D542ACC82D0@phx.gbl>
To: www-style@w3.org

'box-shadow' could be expanded .

Suggestion 1


horizontal-offset: 2px <lenght>
vertical-offset: 2px <lenght>
blur: 0 <lenght>


shadow-style: [[gradient]] | normal
shadow-color: [[inherit]] | specify (from parent or nearest ancestor 
background color=[abg] that is non-transparent and/or non-black)

It works well with all CSS Colors, except Black.

Here is the algorithm for a 2px gradient box-shadow.

where Shadow 1 = [abg]/2                           (closest to border)
          Shadow 2 = S1 + (S1/2)                   (closest to nearest 
ancestor background)

this algorithm would apply to all 3 RGB values, respectively.

for example: if ABG is white or 255,255,255
                  then S1 would be 128,128,128
                  and   S2 would be 192,192,192

All calculated values should be rounded off to nearest non-decimal number. 
[> x.5 = x+1] or [< x.5 = x-1]

Same applies to 'box-[[inner]]-shadow' except [abg] inherits the current 
element's background color.  Or it can be specified otherwise with 

This algorithm works on ALL applicable colors.  Making the shadow realistic 
in contrast to the background color inherited.

If you want a gradience of 3px, just use [3] instead of [2] in the 

'box-inner-shadow' would allow authors to create :hover classes that look 
like their backgrounds are cut away from their containers, creating a 
layered effect. and reduce the use of background images. Thus, saving 

If you wish, I have a very detailed GIF image that may give you more insight 
as to what I'm trying to convey.  Just ask me for it.

Keep up the excellent work.

Luc Belanger

Take advantage of powerful junk e-mail filters built on patented Microsoft® 
SmartScreen Technology. 
  Start enjoying all the benefits of MSN® Premium right now and get the 
first two months FREE*.
Received on Saturday, 23 April 2005 12:20:53 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Monday, 27 April 2009 13:54:36 GMT