Skip to content

Commit 776f2d3

Browse files
SebastianZSebastianZ
authored
[css-backgrounds-4] Added 'box-shadow-*' longhand properties (#6083)
1 parent ef7d13e commit 776f2d3

File tree

1 file changed

+178
-0
lines changed

1 file changed

+178
-0
lines changed

‎css-backgrounds-4/Overview.bs‎

Lines changed: 178 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -739,6 +739,184 @@ The 'border-clip' properties</h3>
739739
<p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
740740
</div>
741741

742+
<h2 id="misc">Drop Shadows</h2>
743+
744+
<h3 id="box-shadow-color">Coloring shadows: the 'box-shadow-color' property</h3>
745+
746+
<pre class="propdef">
747+
Name: box-shadow-color
748+
Value: <<color>>#
749+
Initial: currentcolor
750+
Applies to: all elements
751+
Inherited: no
752+
Percentages: N/A
753+
Computed value: list, each item a computed color
754+
Animatable: by computed value
755+
</pre>
756+
757+
<p>The 'box-shadow-color' property defines one or more drop shadow colors.
758+
The property accepts a comma-separated list of shadow colors.
759+
760+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
761+
Other Details”]] for how 'box-shadow-color' interacts with other
762+
comma-separated drop shadow properties to form each drop shadow
763+
layer.
764+
765+
<h3 id="box-shadow-offset">Offsetting shadows: the 'box-shadow-offset' property</h3>
766+
767+
<pre class="propdef">
768+
Name: box-shadow-offset
769+
Value: none | <<length>>{2}#
770+
Initial: none
771+
Applies to: all elements
772+
Inherited: no
773+
Percentages: N/A
774+
Computed value: either 'none' or a list,
775+
each item a pair of offsets (horizontal and vertical) from the element‘s box
776+
Animatable: by computed value
777+
</pre>
778+
779+
<p>The 'box-shadow-offset' property defines one or more drop shadow offsets.
780+
The property accepts a comma-separated list of horizontal and vertical offset pairs,
781+
where both values are described as <<length>> values.
782+
783+
<dl>
784+
<dt><dfn id="shadow-offset-x">1st <<length>></dfn>
785+
<dd>
786+
Specifies the <dfn>horizontal offset</dfn> of the shadow.
787+
A positive value draws a shadow that is offset to the right of the box,
788+
a negative length to the left.
789+
790+
<dt><dfn id="shadow-offset-y">2nd <<length>></dfn>
791+
<dd>
792+
Specifies the <dfn>vertical offset</dfn> of the shadow.
793+
A positive value offsets the shadow down, a negative one up.
794+
</dl>
795+
796+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
797+
Other Details”]] for how 'box-shadow-offset' interacts with other
798+
comma-separated drop shadow properties to form each drop shadow
799+
layer.
800+
801+
<h3 id="box-shadow-blur">Blurring shadows: the 'box-shadow-blur' property</h3>
802+
803+
<pre class="propdef">
804+
Name: box-shadow-blur
805+
Value: <<length [0,&infin;]>>#
806+
Initial: 0
807+
Applies to: all elements
808+
Inherited: no
809+
Percentages: N/A
810+
Computed value: list, each item a <<length>>
811+
Animatable: by computed value
812+
</pre>
813+
814+
<p>The 'box-shadow-blur' property defines one or more blur radii for drop shadows.
815+
The property accepts a comma-separated list of <<length>> values.
816+
817+
<p>Negative values are invalid.
818+
If the blur value is zero, the shadow’s edge is sharp.
819+
Otherwise, the larger the value, the more the shadow’s edge is blurred.
820+
See [[css-backgrounds-3#shadow-blur|Shadow Blurring]], below.
821+
822+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
823+
Other Details”]] for how 'box-shadow-blur' interacts with other
824+
comma-separated drop shadow properties to form each drop shadow
825+
layer.
826+
827+
<h3 id="box-shadow-spread">Spreading shadows: the 'box-shadow-spread' property</h3>
828+
829+
<pre class="propdef">
830+
Name: box-shadow-spread
831+
Value: <<length>>#
832+
Initial: 0
833+
Applies to: all elements
834+
Inherited: no
835+
Percentages: N/A
836+
Computed value: list, each item a <<length>>
837+
Animatable: by computed value
838+
</pre>
839+
840+
<p>The 'box-shadow-spread' property defines one or more spread distances for drop shadows.
841+
The property accepts a comma-separated list of <<length>> values.
842+
843+
<p>Positive values cause the shadow to expand in all directions by the specified radius.
844+
Negative values cause the shadow to contract.
845+
See [[css-backgrounds-3#shadow-shape|Shadow Shape]], below.
846+
<p class="note">Note that for inner shadows,
847+
expanding the shadow (creating more shadow area)
848+
means contracting the shadow’s perimeter shape.
849+
850+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
851+
Other Details”]] for how 'box-shadow-spread' interacts with other
852+
comma-separated drop shadow properties to form each drop shadow
853+
layer.
854+
855+
<h3 id="box-shadow-position">Spreading shadows: the 'box-shadow-position' property</h3>
856+
857+
<pre class="propdef">
858+
Name: box-shadow-position
859+
Value: [ outset | inset ]#
860+
Initial: outset
861+
Applies to: all elements
862+
Inherited: no
863+
Percentages: N/A
864+
Computed value: list, each item one of the keywords
865+
Animatable: by computed value
866+
</pre>
867+
868+
<p>The 'box-shadow-position' property defines one or more drop shadow positions.
869+
The property accepts a comma-separated list of 'outset' and 'inset' keywords.
870+
871+
<dl dfn-type=value dfn-for=box-shadow-position>
872+
<dt><dfn>outset</dfn>
873+
<dd>
874+
Causes the drop shadow to be an <dfn local-lt="outer shadow">outer box-shadow</dfn>.
875+
That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.
876+
877+
<dt><dfn>inset</dfn>
878+
<dd>
879+
Causes the drop shadow to be an <dfn local-lt="inner shadow">inner box-shadow</dfn>.
880+
That means, one that shadows the canvas onto the box, as if the box were cut out
881+
of the canvas and shifted behind it.
882+
</dl>
883+
884+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
885+
Other Details”]] for how 'box-shadow-position' interacts with other
886+
comma-separated drop shadow properties to form each drop shadow
887+
layer.
888+
889+
<h3 id="box-shadow" oldids="the-box-shadow">Drop Shadows Shorthand: the 'box-shadow' property</h3>
890+
891+
<pre class="propdef">
892+
Name: box-shadow
893+
Value: <<spread-shadow>>#
894+
Initial: none
895+
Applies to: all elements
896+
Inherited: no
897+
Percentages: N/A
898+
Computed value: either the keyword ''box-shadow-offset/none'' or
899+
a list, each item consisting of four absolute lengths
900+
plus a computed color and optionally also a ''box-shadow-position/inset'' keyword
901+
Animatable: by computed value,
902+
treating ''box-shadow-offset/none'' as a zero-item list
903+
and appending blank shadows (''transparent 0 0 0 0'')
904+
with a corresponding ''box-shadow-position/inset'' keyword as needed
905+
to match the longer list
906+
if the shorter list is otherwise compatible with the longer one
907+
</pre>
908+
909+
<p>The 'box-shadow' property attaches one or more drop-shadows to the box.
910+
The property accepts either the ''box-shadow-offset/none'' value, which indicates no shadows,
911+
or a comma-separated list of shadows, ordered front to back.
912+
913+
<p>Each shadow is given as a <<spread-shadow>>,
914+
outlining the 'box-shadow-offset', and optional values for the 'box-shadow-blur',
915+
'box-shadow-spread', 'box-shadow-color', and 'box-shadow-position'.
916+
Omitted lengths are 0; omitted colors default to the ''currentcolor'' value.
917+
<pre class=prod>
918+
<dfn><<spread-shadow>></dfn> = <<'box-shadow-color'>>? &amp;&amp; [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] &amp;&amp; <<'box-shadow-position'>>?</pre>
919+
742920
<h2 id="changes">
743921
Changes</h2>
744922

0 commit comments

Comments
 (0)