Proposal: box-shadow

Hi,

The box-shadow property

  Name:            box-shadow
  Value:           none | [ <length> <length> <color>? ]
  Initial:         none
  Applies to:      all block-level elements
  Inheritet:       no
  Percentages:     N/A
  Media:           visual
  Computed value:  specified value (except for 'inherit')

This property specifies a drop shadow effect of a block-level box. Both
<length> values specify the offset of the shadow area from the top-left
border edge of the box. The shadow area has the same size as the box's
width including padding and borders. The first value specifies the
horizontal distance, the second value the vertical distance. The
optional <color> value specifies the color of the shadow effect. If the
<color> value is omitted, it defaults to the element's
'background-color'. The shadow effect does not alter the size of the
box, but may extend beyond its boundaries. The stack level is the same
as for the box itself.

Rationale:

  It is currently not possible to create such drop shadow effects but it
is quite common to use such effects to make certain sections standing
out. If you want to create such effects, you have to abuse markup to
create several boxes and then add some margin/padding/background-color
magick to achieve what you want. Since this is a strictly presentational
effect, CSS should provide a way to specify it. I've kept this proposal
rather simple, but people may wish to have additional features, e.g.

  * the ability to specify a comma separated list of effects to create
    different drop shadow effects

  * another <length> value to specify a blur distance as the text-shadow
    property has

  * the ability to specify an image instead of a color for the shadow 
    area

  * ...

Oh, I've just seen this effect (achieved by abusing markup) on various
http://www.w3.org/Style/CSS/ pages. The effect used there could be
achieved very easily with something like

  div.section { box-shadow: 1em 3ex darkgray }

instead of what is used in http://www.w3.org/Style/shadows.css

regards,
-- 
Björn Höhrmann { mailto:bjoern@hoehrmann.de } http://www.bjoernsworld.de
am Badedeich 7 } Telefon: +49(0)4667/981028 { http://bjoern.hoehrmann.de
25899 Dagebüll { PGP Pub. KeyID: 0xA4357E78 } http://www.learn.to/quote/

Received on Saturday, 15 September 2001 11:50:28 UTC