Skip to content

Commit 1222ae2

Browse files
SebastianZSebastianZ
committed
[css-backgrounds-4] Added 'box-shadow-*' longhand properties
1 parent a92feba commit 1222ae2

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
@@ -690,6 +690,184 @@ The 'border-clip' properties</h3>
690690
<p>The fragments are shown in red for illustrative purposes; they should be black in compliant UAs.
691691
</div>
692692

693+
<h2 id="misc">Drop Shadows</h2>
694+
695+
<h3 id="box-shadow-color">Coloring shadows: the 'box-shadow-color' property</h3>
696+
697+
<pre class="propdef">
698+
Name: box-shadow-color
699+
Value: <<color>>#
700+
Initial: currentcolor
701+
Applies to: all elements
702+
Inherited: no
703+
Percentages: N/A
704+
Computed value: list, each item a computed color
705+
Animatable: by computed value
706+
</pre>
707+
708+
<p>The 'box-shadow-color' property defines one or more drop shadow colors.
709+
The property accepts a comma-separated list of shadow colors.
710+
711+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
712+
Other Details”]] for how 'box-shadow-color' interacts with other
713+
comma-separated drop shadow properties to form each drop shadow
714+
layer.
715+
716+
<h3 id="box-shadow-offset">Offsetting shadows: the 'box-shadow-offset' property</h3>
717+
718+
<pre class="propdef">
719+
Name: box-shadow-offset
720+
Value: none | <<length>>{2}#
721+
Initial: none
722+
Applies to: all elements
723+
Inherited: no
724+
Percentages: N/A
725+
Computed value: either 'none' or a list,
726+
each item a pair of offsets (horizontal and vertical) from the element‘s box
727+
Animatable: by computed value
728+
</pre>
729+
730+
<p>The 'box-shadow-offset' property defines one or more drop shadow offsets.
731+
The property accepts a comma-separated list of horizontal and vertical offset pairs,
732+
where both values are described as <<length>> values.
733+
734+
<dl>
735+
<dt><dfn id="shadow-offset-x">1st <<length>></dfn>
736+
<dd>
737+
Specifies the <dfn>horizontal offset</dfn> of the shadow.
738+
A positive value draws a shadow that is offset to the right of the box,
739+
a negative length to the left.
740+
741+
<dt><dfn id="shadow-offset-y">2nd <<length>></dfn>
742+
<dd>
743+
Specifies the <dfn>vertical offset</dfn> of the shadow.
744+
A positive value offsets the shadow down, a negative one up.
745+
</dl>
746+
747+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
748+
Other Details”]] for how 'box-shadow-offset' interacts with other
749+
comma-separated drop shadow properties to form each drop shadow
750+
layer.
751+
752+
<h3 id="box-shadow-blur">Blurring shadows: the 'box-shadow-blur' property</h3>
753+
754+
<pre class="propdef">
755+
Name: box-shadow-blur
756+
Value: <<length [0,&infin;]>>#
757+
Initial: 0
758+
Applies to: all elements
759+
Inherited: no
760+
Percentages: N/A
761+
Computed value: list, each item a <<length>>
762+
Animatable: by computed value
763+
</pre>
764+
765+
<p>The 'box-shadow-blur' property defines one or more blur radii for drop shadows.
766+
The property accepts a comma-separated list of <<length>> values.
767+
768+
<p>Negative values are invalid.
769+
If the blur value is zero, the shadow’s edge is sharp.
770+
Otherwise, the larger the value, the more the shadow’s edge is blurred.
771+
See [[css-backgrounds-3#shadow-blur|Shadow Blurring]], below.
772+
773+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
774+
Other Details”]] for how 'box-shadow-blur' interacts with other
775+
comma-separated drop shadow properties to form each drop shadow
776+
layer.
777+
778+
<h3 id="box-shadow-spread">Spreading shadows: the 'box-shadow-spread' property</h3>
779+
780+
<pre class="propdef">
781+
Name: box-shadow-spread
782+
Value: <<length>>#
783+
Initial: 0
784+
Applies to: all elements
785+
Inherited: no
786+
Percentages: N/A
787+
Computed value: list, each item a <<length>>
788+
Animatable: by computed value
789+
</pre>
790+
791+
<p>The 'box-shadow-spread' property defines one or more spread distances for drop shadows.
792+
The property accepts a comma-separated list of <<length>> values.
793+
794+
<p>Positive values cause the shadow to expand in all directions by the specified radius.
795+
Negative values cause the shadow to contract.
796+
See [[css-backgrounds-3#shadow-shape|Shadow Shape]], below.
797+
<p class="note">Note that for inner shadows,
798+
expanding the shadow (creating more shadow area)
799+
means contracting the shadow’s perimeter shape.
800+
801+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
802+
Other Details”]] for how 'box-shadow-spread' interacts with other
803+
comma-separated drop shadow properties to form each drop shadow
804+
layer.
805+
806+
<h3 id="box-shadow-position">Spreading shadows: the 'box-shadow-position' property</h3>
807+
808+
<pre class="propdef">
809+
Name: box-shadow-position
810+
Value: [ outset | inset ]#
811+
Initial: outset
812+
Applies to: all elements
813+
Inherited: no
814+
Percentages: N/A
815+
Computed value: list, each item one of the keywords
816+
Animatable: by computed value
817+
</pre>
818+
819+
<p>The 'box-shadow-position' property defines one or more drop shadow positions.
820+
The property accepts a comma-separated list of 'outset' and 'inset' keywords.
821+
822+
<dl dfn-type=value dfn-for=box-shadow-position>
823+
<dt><dfn>outset</dfn>
824+
<dd>
825+
Causes the drop shadow to be an <dfn local-lt="outer shadow">outer box-shadow</dfn>.
826+
That means, one that shadows the box onto the canvas, as if it were lifted above the canvas.
827+
828+
<dt><dfn>inset</dfn>
829+
<dd>
830+
Causes the drop shadow to be an <dfn local-lt="inner shadow">inner box-shadow</dfn>.
831+
That means, one that shadows the canvas onto the box, as if the box were cut out
832+
of the canvas and shifted behind it.
833+
</dl>
834+
835+
<p>See the section [[css-backgrounds-3#shadow-layers|“Layering, Layout, and
836+
Other Details”]] for how 'box-shadow-position' interacts with other
837+
comma-separated drop shadow properties to form each drop shadow
838+
layer.
839+
840+
<h3 id="box-shadow" oldids="the-box-shadow">Drop Shadows Shorthand: the 'box-shadow' property</h3>
841+
842+
<pre class="propdef">
843+
Name: box-shadow
844+
Value: <<spread-shadow>>#
845+
Initial: none
846+
Applies to: all elements
847+
Inherited: no
848+
Percentages: N/A
849+
Computed value: either the keyword ''box-shadow-offset/none'' or
850+
a list, each item consisting of four absolute lengths
851+
plus a computed color and optionally also a ''box-shadow-position/inset'' keyword
852+
Animatable: by computed value,
853+
treating ''box-shadow-offset/none'' as a zero-item list
854+
and appending blank shadows (''transparent 0 0 0 0'')
855+
with a corresponding ''box-shadow-position/inset'' keyword as needed
856+
to match the longer list
857+
if the shorter list is otherwise compatible with the longer one
858+
</pre>
859+
860+
<p>The 'box-shadow' property attaches one or more drop-shadows to the box.
861+
The property accepts either the ''box-shadow-offset/none'' value, which indicates no shadows,
862+
or a comma-separated list of shadows, ordered front to back.
863+
864+
<p>Each shadow is given as a <<spread-shadow>>,
865+
outlining the 'box-shadow-offset', and optional values for the 'box-shadow-blur',
866+
'box-shadow-spread', 'box-shadow-color', and 'box-shadow-position'.
867+
Omitted lengths are 0; omitted colors default to the ''currentcolor'' value.
868+
<pre class=prod>
869+
<dfn><<spread-shadow>></dfn> = <<'box-shadow-color'>>? &amp;&amp; [ <<'box-shadow-offset'>> [ <<'box-shadow-blur'>> <<'box-shadow-spread'>>? ]? ] &amp;&amp; <<'box-shadow-position'>>?</pre>
870+
693871
<h2 id="changes">
694872
Changes</h2>
695873

0 commit comments

Comments
 (0)