UserCSS:ナビゲーションバーのグラデーション
縦方向のグラデーション（淡→濃→淡）
stylexx.css.navbar {
background:
linear-gradient(to top,
var(--base-color, darkblue),
var(--main-color, blue),
var(--base-color, darkblue)
);
}
stylexx.css.navbar {
background: linear-gradient( to bottom,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) center 0% / auto 1400% ; /* グラデーション */
animation: navbar 560s linear infinite;
animation-direction: reverse;
}
@keyframes navbar {
to { background-position-y: 1400%; }
} stylexx.css.navbar {
background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
animation: huerotator 3s infinite alternate;
}
@keyframes huerotator {
0% {
-webkit-filter: hue-rotate(0deg);
filter: hue-rotate(0deg);
}
100% {
-webkit-filter: hue-rotate(360deg);
filter: hue-rotate(360deg);
}
}タイル模様
stylexx.css .navbar {
background:
repeating-linear-gradient(
0deg,
var(--main-color) 0, var(--main-color) 3px,
var(--assort-color) 3px, var(--assort-color) 4px
),
repeating-linear-gradient(
90deg,
var(--main-color) 0, var(--main-color) 3px,
var(--assort-color) 3px, var(--assort-color) 4px
);
opacity:0.95;
} シェパードチェック
style.css.navbar {
--A: var(--main-color, #AAA);
--B: var(--assort-color, #BBB);
background-color: var(--A);
background-image:
linear-gradient(45deg, var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
linear-gradient(-135deg, var(--B) 25%, var(--B) 25%, transparent 25%, transparent 100%),
linear-gradient(-135deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
linear-gradient(45deg, var(--A) 25%, var(--A) 25%, transparent 25%, transparent 100%),
linear-gradient(45deg,
var(--B) 0%, var(--B) 6%, transparent 6%, transparent 11%,
var(--B) 11%, var(--B) 17%, transparent 17%, transparent 22%,
var(--B) 22%, var(--B) 28%, transparent 28%, transparent 33%,
var(--B) 33%, var(--B) 39%, transparent 39%, transparent 44%,
var(--B) 44%, var(--B) 50%, transparent 50%, transparent 55%,
var(--B) 55%, var(--B) 61%, transparent 61%, transparent 66%,
var(--B) 66%, var(--B) 72%, transparent 72%, transparent 77%,
var(--B) 77%, var(--B) 83%, transparent 83%, transparent 88%,
var(--B) 88%, var(--B) 94%, transparent 94%, transparent 100%);
background-size: 24px 24px;
background-position: 0 0, 12px 12px, 0 0, 12px 12px, 0 0;
opacity:0.95;
} 