Skip to content

Commit e80195f

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

File tree

1 file changed

+177
-0
lines changed

1 file changed

+177
-0
lines changed

‎css-backgrounds-4/Overview.bs‎

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

0 commit comments

Comments
 (0)