- From: Christoph Päper via GitHub <sysbot+gh@w3.org>
- Date: Mon, 18 Nov 2024 16:32:15 +0000
- To: public-css-archive@w3.org
Crissov has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-backgrounds][css-text-decor] Keywords for predefined shadows ==
[`box-shadow`](https://drafts.csswg.org/css-backgrounds/#propdef-box-shadow) and [`text-shadow`](https://drafts.csswg.org/css-text-decor/#propdef-text-shadow) now share a [value definition `<shadow>`](https://drafts.csswg.org/css-backgrounds/#typedef-shadow), while [`filter: drop-shadow()`](https://drafts.fxtf.org/filter-effects/#funcdef-filter-drop-shadow) slightly differs.
Frameworks and Design Systems provide some presets for them (e.g. [Tailwind](https://tailwindcss.com/docs/box-shadow)), which are mostly very basic, often defaulting to a very transparent black.
Since drop shadow are cast by the light obstructed by elements and the light source is often directly above the element, it usually has zero horizontal offset and some positive vertical offset. The blur rasius is often one to three tiems the offset.
Material Design notes:
> Shadow size reflects elevation. Surfaces at higher elevations have larger shadows, while those at lower elevations have smaller shadows.
Other Design systems, e.g. [Microsoft’s Fluent](
[Fluent Design ](https://fluent2.microsoft.design/elevation#shadow-system)), also describe the use of shadows to emulate physical characteristics like elevation and material. Overall, *key shadows* are sharp, directional shadows used to define edges and *ambient shadows* are soft, diffused shadows used to imply distance.
This feels like it should be possible to define some simple presets available as keywords in the shadow properties (and perhaps even the filter), so graphics-illiterate people like myself can get some decent defaults and readable source code in vanilla CSS without the use of external presets. I have no concrete idea how many of these should exist and what they would look like, but maybe start with something like this:
* `low-elevation`, `medium-elevation`, `high-elevation` or
* `elevated`, `raised`, `floating`, `embossed`
I am also not sure whether CSS should prescribe the actual values for those keywords or leave it up to implementations, but since CSS3 the trend has been to be rather prescriptive. I think there's even an open issue to normatively specify `border-style` keywords like `groove` and `ridge`.
<!--
~~~~ css
.tailwind {
/* offset blur spread */
/* small */ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%);
/* default */ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%),
0 1px 2px -1px rgb(0 0 0 / 10%);
/* medium */ box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%),
0 2px 4px -2px rgb(0 0 0 / 10%);
/* large */ box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%),
0 4px 6px -4px rgb(0 0 0 / 10%);
/* extra large */ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%),
0 8px 10px -6px rgb(0 0 0 / 10%);
/* huge */ box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%);
/* inner */ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%) inset;
/* none */ box-shadow: 0 0 rgb(0 0 0 / 0%);
}
.bootstrap { /* 1rem => 16px */
/* default */ box-shadow: 0 8px 16px 0 rgb(0 0 0 / 15%);
/* small */ box-shadow: 0 2px 4px 0 rgb(0 0 0 / 7.5%);
/* large */ box-shadow: 0 16px 48px 0 rgb(0 0 0 / 17.5%);
/* inner */ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 7.5%) inset;
}
.material {
/* offset blur spread */
/* floating */ box-shadow: 0 3px 5px -1px rgb(0 0 0 / 20%),
0 6px 10px 0 rgb(0 0 0 / 14%),
0 1px 18px 0 rgb(0 0 0 / 12%);
/* simple float */box-shadow: 0 6px 10px 0 rgb(0 0 0 / 20%);
/* drop */ box-shadow: 0 4px 4px 0 rgb(0 0 0 / 20%);
/* text drop */ text-shadow: -1px 3px 2px 0 rgb(0 0 0 / 30%);
}
.apple {
/* default */ box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
~~~~
[Fluent Design ](https://fluent2.microsoft.design/elevation#shadow-system) provides its formulas, which should look like this in CSS:
~~~~ css
.fluent {
--n: 2 /* 4 8 16 */;
/* Low Elevation Ramp Light */
box-shadow: 0 calc(0.5px * --var(n)) calc(1px * --var(n)) 0 rgb(0 0 0 / 14%),
0 calc(0.5px * --var(n)) calc(1px * n) 0 rgb(0 0 0 / 14%);
/* Low Elevation Ramp Dark */
box-shadow: 0 calc(0.5px * --var(n)) calc(1px * --var(n)) 0 rgb(0 0 0 / 28%),
0 calc(0.5px * --var(n)) calc(1px * --var(n)) 0 rgb(0 0 0 / 14%);
/* High Elevation Ramp Light */
box-shadow: 0 calc(0.5px * --var(n)) calc(1px * --var(n)) 0 rgb(0 0 0 / 24%),
0 0 8px 0 rgb(0 0 0 / 20%);
/* High Elevation Ramp Dark */
box-shadow: 0 calc(0.5px * --var(n)) calc(1px * --var(n)) 0 rgb(0 0 0 / 28%),
0 0 2px 0 rgb(0 0 0 / 20%);
}
~~~~
Colored surfaces
Luminosity: 0.2126 * R + 0.7152 * G + 0.0722 * B
Shadow 1 opacity: Round ( 42 - 0.116 * luminosity )
Shadow 2 opacity: Round ( 34 - 0.09 * luminosity )
-->
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11234 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Monday, 18 November 2024 16:32:16 UTC