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

'box-outer-shadow'

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

NEW PROPERTIES

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 
pseudo-classes.


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 
algorithm.


'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 
bandwith.

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
sneakyhybrid@hotmail.com

_________________________________________________________________
Take advantage of powerful junk e-mail filters built on patented Microsoft® 
SmartScreen Technology. 
http://join.msn.com/?pgmarket=en-ca&page=byoa/prem&xAPID=1994&DI=1034&SU=http://hotmail.com/enca&HL=Market_MSNIS_Taglines 
  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