UserCSS:ハッシュタググラデーション
ハッシュタグにグラデーションをかける
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 ナビバーのアイコン（グローバルメニュー） */
--navi-icon: url("https://daiiz-apps.appspot.com/today/jp.svg");
--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);
}共通の設定
style.css a[type="hashTag"] {
padding: 2px 4px;
border-radius: 4px;
}stylexx.css a[type="hashTag"] {
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); /* */
}グラデーションをかけない（テスト用）
stylexx.css a[type="hashTag"]:not(:hover) {
color: var(--assort-color);
background-color: var(--main-color);
}グラデーションをかける
stylexx.css a[type="hashTag"]:not(:hover) {
color: var(--assort-color, #ccc); /* */
background: linear-gradient( to right,
var(--main-color),
var(--base-color),
var(--main-color)
) ;
} グラデーションをかける
stylexx.css a[type="hashTag"]:not(:hover) {
color: var(--assort-color, #ccc); /* */
background: linear-gradient( to right,
var(--li-color-1),
var(--li-color-2),
var(--li-color-3)
) ;
} グラデーションでアニメーション（横）
stylexx.css a[type="hashTag"]:not(:hover) {
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%; }
} グラデーションでアニメーション（縦）
style.css a[type="hashTag"]:not(:hover) {
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%; }
} 