UserCSS:ハッシュタググラデーション

ハッシュタグにグラデーションをかける

code:style.css

:root {

--main-color: var(--navbar-bg, DarkGray); /* 主調色 */

--assort-color: var(--card-bg, White); /* 従属色 */

--base-color: var(--body-bg, WhiteSmoke); /* 背景色 */

--accent-color: var(--cursor-color, gray); /* 強調色 */

--text-color: var(--page-text-color, black); /* 文字色 */

/* 1 ナビバーのアイコン（グローバルメニュー） */

--li-color-1: hsla(0,100%,60%,0.4);

--li-color-2: hsla(180,100%,60%,0.4);

--li-color-3: hsla(270,100%,60%,0.4);

}

共通の設定

code:style.css

padding: 2px 4px;

border-radius: 4px;

}

code:stylexx.css

color: var(--assort-color);

background-color: var(--text-color);

padding: 4px 6px;

border-radius: 4px;

/* フォント指定 */

font-family: '游ゴシック体', 'Yu Gothic', YuGothic, sans-serif;

font-size: 14px;

/* フォントを太字にする */

font-weight: bold;

/* ボックスシャドウ */

box-shadow: 2px 2px var(--accent-color);　/* */

}

グラデーションをかけない（テスト用）

code:stylexx.css

color: var(--assort-color);

background-color: var(--main-color);

}

グラデーションをかける

code:stylexx.css

background: linear-gradient( to right,

var(--main-color),

var(--base-color),

var(--main-color)

) ;

}

グラデーションをかける

code:stylexx.css

background: linear-gradient( to right,

var(--li-color-1),

var(--li-color-2),

var(--li-color-3)

) ;

}

グラデーションでアニメーション（横）

code:stylexx.css

background: linear-gradient( to right,

var(--main-color),

var(--base-color),

var(--main-color)

) 0% center / 300% auto ; /* グラデーション */

animation: emblue 4s linear infinite;

animation-direction: reverse;

/*animation-direction: alternate;*/

}

@keyframes emblue {

to { background-position-x: 300%; }

}

グラデーションでアニメーション（縦）

code:style.css

background: linear-gradient( to bottom,

var(--main-color),

var(--base-color),

var(--main-color)

) center 0% / auto 600% ; /* グラデーション */

animation: emblue 10s linear infinite;

animation-direction: reverse;

/*animation-direction: alternate;*/

}

@keyframes emblue {

to { background-position-y: 600%; }

}

https://img.shields.io/badge/UserCSS-ハッシュタググラデーション-1572B6.svg?logo=css3&style=for-the-badge

UserCSS.icon