UserCSS:背景色のグラデーション
グラデーション。imageの特殊型。グラデーションと画像は共存できない。 共存できる（けどめんどい） code:stylexx.css
body {
/* background: linear-gradient(#e66465, #9198e5); /* グラデーション */ background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}
円形グラデーション。使い所がよくわからない。
code:stylexx.css
body {
background:
repeating-radial-gradient(
white 2px,
silver 4px,
white 6px
);
}
旭日旗の意匠は日章旗同様、太陽をかたどっており、大漁旗や出産・節句の祝い旗等、日本国内で現在までも広く使用されているものであり、特定の政治的・差別的主張である等の指摘は当たらない。 code:style.css
body {
/* --A: var(--navbar-bg, #AAA); /* */ /* --B: var(--body-bg, #BBB); /* */ background:
/* 中心の丸*/
radial-gradient(circle at 40% 50%,
var(--A) 9%,
transparent 12%),
/* 16条にするため紅白のグラデーションを16個並べている（バカだね） */
conic-gradient(at 40% 50%,
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),
var(--A),var(--B),var(--B),var(--A),var(--B),var(--B),var(--A)
);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right top;
background-size: auto 100%;
}
原色の暴力
code:stylexx.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%));
/* background */
}
レインボー
code:stylexx.css
body {
background:
repeating-linear-gradient(150deg,
red 100px,
orange 200px,
yellow 300px,
green 400px,
aqua 500px,
blue 600px,
purple 700px,
red 800px
);
}
方眼紙みたいな格子模様
code:stylexx.css
body {
background:
repeating-linear-gradient( 0deg,
transparent 0px 9px,
silver 10px,
transparent 11px 15px
),
repeating-linear-gradient( 90deg,
transparent 0px 9px,
silver 10px,
transparent 11px 15px
);
}
code:stylexx.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
);
}
立体方眼紙（斜方眼）みたいな背景
code:stylexx.css
body {
background:
repeating-linear-gradient( 30deg,
silver 0px,
transparent 1px,
transparent 15px
),
repeating-linear-gradient( 150deg,
silver 0px,
transparent 1px,
transparent 15px
),
/*
** 交点はx軸の垂線をずらして調整する（ダサ）
*/
repeating-linear-gradient( 90deg,
transparent 0px 10px,
silver 11px,
transparent 12px 15px
);
}
https://img.shields.io/badge/UserCSS-背景色のグラデーション-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon