背景画像にグラデーションを使用したUserCSS
CSS3では背景画像にグラデーションを指定することができます
サンプルをいくつか示します
原色の暴力
code:style1.css
body {
background:
conic-gradient(from 90deg,
hsl(0,100%,50%),
hsl(30,100%,50%),
hsl(60,100%,50%),
hsl(90,100%,50%),
hsl(120,100%,50%),
hsl(150,100%,50%),
hsl(180,100%,50%),
hsl(210,100%,50%),
hsl(240,100%,50%),
hsl(270,100%,50%),
hsl(300,100%,50%),
hsl(330,100%,50%),
hsl(360,100%,50%));
}
レインボー
code:style2.css
body {
background:
repeating-linear-gradient(150deg,
red 100px,
orange 200px,
yellow 300px,
green 400px,
aqua 500px,
blue 600px,
purple 700px,
red 800px
);
}
方眼紙みたいな格子模様
code:style.css
body {
background:
repeating-linear-gradient( 0deg,
transparent 0px 9px,
silver 10px,
transparent 11px 15px
),
repeating-linear-gradient( 90deg,
var(--body-bg, transparent) 0px 9px,
silver 10px,
var(--body-bg, transparent) 11px 15px
);
}
UserCSS.icon