8da70fec91
Parse things like "in hsl hue longer". For details, see the CSS Images Module Level 4, https://www.w3.org/TR/css-images-4. Tests included. Gradient interpolation color spaces aren't supported for rendering yet.
125 lines
4.6 KiB
CSS
125 lines
4.6 KiB
CSS
a {
|
|
background-image: linear-gradient(rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
b {
|
|
background-image: linear-gradient(to top, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to top, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
c {
|
|
background-image: linear-gradient(rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
d {
|
|
background-image: linear-gradient(to left, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to left, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
e {
|
|
background-image: linear-gradient(to right, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to right, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
f {
|
|
background-image: linear-gradient(to bottom left, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to bottom left, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
g {
|
|
background-image: linear-gradient(to bottom right, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to bottom right, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
h {
|
|
background-image: linear-gradient(to top right, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to top right, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
i {
|
|
background-image: linear-gradient(to bottom left, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(to bottom left, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
j {
|
|
background-image: linear-gradient(1turn, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(1turn, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
k {
|
|
background-image: linear-gradient(-0.25turn, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(-0.25turn, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
l {
|
|
background-image: linear-gradient(3.125deg, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(3.125deg, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
m {
|
|
background-image: linear-gradient(90rad, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(90rad, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
n {
|
|
background-image: linear-gradient(-100grad, rgb(255,0,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(-100grad, rgb(255,0,0), rgb(0,0,255));
|
|
}
|
|
|
|
o {
|
|
background-image: linear-gradient(rgb(255,0,0), rgb(0,128,0), rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0), rgb(0,128,0), rgb(0,0,255));
|
|
}
|
|
|
|
p {
|
|
background-image: linear-gradient(rgb(255,0,0) -50%, rgb(0,128,0), rgb(0,0,255) 150%);
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0) -50%, rgb(0,128,0), rgb(0,0,255) 150%);
|
|
}
|
|
|
|
q {
|
|
background-image: linear-gradient(rgb(255,0,0) -50%, rgb(0,128,0), rgb(0,0,255) 150%);
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0) -50%, rgb(0,128,0), rgb(0,0,255) 150%);
|
|
}
|
|
|
|
r {
|
|
background-image: linear-gradient(rgb(255,0,0) 1px, rgb(0,128,0) 2em);
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0) 1px, rgb(0,128,0) 2em);
|
|
}
|
|
|
|
s {
|
|
background-image: linear-gradient(rgb(255,0,0), rgb(0,128,0) 2px, rgb(0,0,255));
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0), rgb(0,128,0) 2px, rgb(0,0,255));
|
|
}
|
|
|
|
t {
|
|
background-image: linear-gradient(rgb(255,0,0), rgb(0,128,0), rgb(0,0,255), rgb(128,0,128), rgb(255,192,203), rgb(255,255,0), rgb(0,0,0), rgb(255,165,0));
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0), rgb(0,128,0), rgb(0,0,255), rgb(128,0,128), rgb(255,192,203), rgb(255,255,0), rgb(0,0,0), rgb(255,165,0));
|
|
}
|
|
|
|
u {
|
|
background-image: linear-gradient(rgb(255,0,0) -5px, rgb(0,128,0) 20em, rgb(0,0,255), rgb(128,0,128) -42%, rgb(255,192,203) 3pt);
|
|
border-image-source: repeating-linear-gradient(rgb(255,0,0) -5px, rgb(0,128,0) 20em, rgb(0,0,255), rgb(128,0,128) -42%, rgb(255,192,203) 3pt);
|
|
}
|
|
|
|
v {
|
|
background-image: linear-gradient(to top left, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
border-image-source: repeating-linear-gradient(to top left, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
}
|
|
|
|
w {
|
|
background-image: linear-gradient(to top left in hsl longer hue, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
border-image-source: repeating-linear-gradient(to top left in hsl longer hue, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
}
|
|
|
|
x {
|
|
background-image: linear-gradient(25deg in rec2020, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
border-image-source: repeating-linear-gradient(25deg in rec2020, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
}
|
|
|
|
y {
|
|
background-image: linear-gradient(in hwb, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
border-image-source: repeating-linear-gradient(in hwb, rgb(255,0,0) 0, rgb(0,128,0) 100%);
|
|
}
|