Skip to content

Commit 99ff48a

Browse files
committed
Added stripes() function to CSS Images 4
1 parent a92feba commit 99ff48a

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

css-images-4/Overview.bs

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1117,7 +1117,45 @@ Cycle Detection</h4>
11171117
any ''element()'' functions participating in the cycle are <a>invalid images</a>.
11181118

11191119

1120+
<!--
1121+
██████ ████████ ████████ ████ ████████ ███████ ██████ ███ ███
1122+
██ ██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██ ██
1123+
██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██
1124+
██████ ██ ████████ ██ ████████ █████ ██████ ██ ██
1125+
██ ██ ██ ██ ██ ██ █ ██ ██ ██
1126+
██ ██ ██ ██ ██ ██ ██ █ ██ ██ ██ ██
1127+
██████ ██ ██ ██ ████ ██ ███████ ██████ ███ ███
1128+
-->
1129+
1130+
Stripes: the ''stripes()'' notation {#stripes-function}
1131+
----------------------------------------------------------------------
1132+
1133+
The ''stripes()'' function allows to define a number of stripes of
1134+
different colors with different widths. How those stripes are actually
1135+
painted depends on the context the function is used in.
1136+
1137+
The syntax for ''stripes()'' is defined as:
1138+
1139+
<pre class=prod>
1140+
<dfn>stripes()</dfn> = stripes( [ <<color>> && [ <<length-percentage>> | <<flex>>]? ]# )
1141+
</pre>
1142+
1143+
The function represents a 1-dimensional image generated by a list
1144+
of colors and an optional thickness for each of them.
1145+
1146+
A <<percentage>> or <<flex>> value refers to the total length of the image
1147+
in the used context.
1148+
The <<percentage>> must be between ''0%'' and ''100%'' inclusive;
1149+
any other value is invalid.
1150+
1151+
If the thickness of a stripe is omitted, it is meant to be ''1fr''.
11201152

1153+
If the width of the context the function is used in exceeds the total
1154+
thickness of the stripes, the rest is painted transparent. I.e. it behaves
1155+
as if there were an additional last ''transparent'' stripe.
1156+
If the width of the context the function is used in is smaller than the
1157+
total thickness of the stripes, the stripes are clipped starting from the
1158+
last defined color.
11211159

11221160
<!--
11231161
██████ ████████ ███ ████████ ████ ████████ ██ ██ ████████ ██████

0 commit comments

Comments
 (0)