UserCSS:ナビゲーションバーのグラデーション

縦方向のグラデーション（淡→濃→淡）

code:stylexx.css

.navbar {

background:

linear-gradient(to top,

var(--base-color, darkblue),

var(--main-color, blue),

var(--base-color, darkblue)

);

}

code: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%; }

}

code:stylexx.css

.navbar {

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);

}

}

タイル模様

code: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;

}

シェパードチェック

code:style.css

.navbar {

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;

}

UserCSS.icon

https://img.shields.io/badge/UserCSS-ナビゲーションバーのグラデーション-1572B6.svg?logo=css3&style=for-the-badge