5610af1b77
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.
55 lines
1.8 KiB
CSS
55 lines
1.8 KiB
CSS
a {
|
|
background-image: radial-gradient(ellipse farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
b {
|
|
background-image: radial-gradient(ellipse farthest-corner at center, rgb(255,255,0) 0, rgb(0,128,0) 100%);
|
|
}
|
|
|
|
c {
|
|
background-image: radial-gradient(ellipse farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
d {
|
|
background-image: radial-gradient(circle farthest-corner at center, rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
e {
|
|
background-image: radial-gradient(ellipse farthest-corner at center, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
f {
|
|
background-image: radial-gradient(ellipse farthest-side at left bottom, rgb(255,0,0), rgb(255,255,0) 50px, rgb(0,128,0));
|
|
}
|
|
|
|
g {
|
|
background-image: radial-gradient(ellipse closest-side at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
h {
|
|
background-image: radial-gradient(ellipse 20px 30px at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
i {
|
|
background-image: radial-gradient(circle closest-side at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
j {
|
|
background-image: radial-gradient(ellipse 20px 20px at 20px 30px, rgb(255,0,0), rgb(255,255,0), rgb(0,128,0));
|
|
}
|
|
|
|
k {
|
|
background-image: radial-gradient(ellipse 20px 20px at center, rgb(255,0,0), rgb(255,255,0));
|
|
border-image-source: repeating-radial-gradient(ellipse 20px 20px at center, rgb(255,0,0), rgb(255,255,0));
|
|
}
|
|
|
|
l {
|
|
background-image: radial-gradient(ellipse 20px 20px at center in oklch, rgb(255,0,0), rgb(255,255,0));
|
|
border-image-source: repeating-radial-gradient(ellipse 20px 20px at center in oklch, rgb(255,0,0), rgb(255,255,0));
|
|
}
|
|
|
|
m {
|
|
background-image: radial-gradient(circle farthest-corner at center in hsl longer hue, rgb(255,0,0), rgb(255,255,0));
|
|
border-image-source: repeating-radial-gradient(circle farthest-corner at center in hsl longer hue, rgb(255,0,0), rgb(255,255,0));
|
|
}
|