Box-Shadow back on the Menu (and other updates)

A recent editors draft of the CSS3 Background and Borders module (published on 5th may) indicates that the box-shadow property could be set to make a reappearance before the specification is released as a Proposed Recommendation.

The specification also features several other updates including the addition of a ‘content-box’ value to the background-clip property, changes to the background shorthand syntax for background-clip and background-origin, and the removal of a recommendation to use gradients for color transitions when border-radius produces a curve, further details below.

Last week also saw the release of an updated working draft of the CSS3 Template Layout module, read on for further details.

Box-Shadow

The box-shadow property, which allows for the creation of drop shadows on box elements, was removed from the Backgrounds and Borders specification prior to it entering the Candidate Recommendation phase of development last December, as the working group felt that the property needed more work, however the property makes a reappearance in a recent editors draft of the specification (published on 5th May).

The overall syntax and functionality remains the same as in previous versions, however the specification now offers further clarification with regard to the blur radius and spread radius functionality as follows.

Blur Radius

Previous specification:

“The third length is a blur radius. Negative values are not allowed. If it is 0, the shadow is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorithm is not specified.”

Editors draft (5th May):

“The blur radius is perpendicular to and centered on the shadow’s edge and defines a gradient color transition from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it: if the blur radius is 0, the shadow’s edge is sharp, otherwise the larger the value, the more the shadow is blurred. The exact algorith for the blur transition is not specified.”

Spread Radius

Previous specification:

“Positive values cause the shadow to grow in all directions by the specified radius. Negative values cause the shadow to shrink. The shadow should not change shape when a spread radius is applied: sharp corners should remain sharp.”

Editors draft (5th May):

“Positive values cause the shadow shape to exapand in all directions by the specified radius. Negative values cause the shadow shape to contract. For corners with a zero border-radius, the corner remains sharp. Otherwise the spread radius outsets the edge of the shadow by the amount of the spread radius in the direction perpendicular to the shadow’s edge. (Note that for inner shadows, expanding the shadow means shrinking the shadow’s perimeter.) The UA may approximate the spread shape by outsetting (insetting, for inner shadows) the shadow’s straight edges by the spread radius and increasing (decreasing, for inner shadows) and flooring at zero the corner radii by the same amount. If both a blur radius and a spread radius are defined, the blur is applied to the resulting shape after the spread is applied.”

Interactions

The updated specification also offers further definition as to how the box-shadow property interacts with other backgrounds and borders properties, particularly in relation to the border-image property, with the updated specification stating clearly that the border-image property has no effect on the shape of box shadows.

The specification also further clarifies how the box-shadow property interacts with tables and pseudo-elements:

“The ‘box-shadow’ property applies to the ‘::first-letter’ pseudo-element, but not the ‘::first-line’ pseudo-element. Outer shadows have no effect on internal table elements in the collapsing border model. If a shadow is defined for single border edge in the collapsing border model that has multiple border thicknesses (e.g. an outer shadow on a table where one row has thicker borders than the others, or an inner shadow on a rowspanning table cell that adjoins cells with different border thicknesses), the exact position and rendering of its shadows are undefined.”

Box-Shadow Examples

The draft also includes a number of examples (see the diagram below) as to how the property should behave in certain circumstances:

Box-Shadow Examples, W3C

Additional Updates to CSS3 Backgrounds and Borders

In addition to the reinclusion of the box-shadow property, the specification introduces a ‘content-box’ value to the background-clip property allowing the background to be clipped to the content box (previously border box and padding box were the only clipping options), a change to the background shorthand syntax in relation to background-clip and background-origin, the removal of the recommendation to use gradients for color transitions when border-radius produces a curve, and various other clarifications.

You can view the editors draft here.

New Working Draft of CSS3 Template Layout Module Released

Last week also saw the release of an updated working draft specification of the CSS3 Template Layout module. The updated release contains a small number of minor updates, but according to the working group minutes was published more to “show it is still active.” The updated draft can be viewed here and I’ll provide further details when I’ve had a chance to take a closer look it.

frmo CSS3.info