UserCSS:赤くなる記法
赤くなる記法 [! ] ノーマル
赤くなる記法[!. ] グラデーション
赤くなる記法[!+ ] くっきり
赤くなる記法[!- ] ぼんやり
赤くなる記法[!_ ] アンダーラインぽい
赤くなる記法 [!" ] アニメーション
赤くなる記法 [!! ] アニメーション
code:style.css
.deco-\! {
color: rgba(100%,100%,100%,0.7);
background-color: rgba(100%,0%,0%,0.7);
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:style.css
.deco-\!.deco-\. {
/* color: #fff; /* 白文字 */
color: rgba(100%,100%,100%,0.7);
background: linear-gradient( to right,
red,
/*yellow,*/
orange,
red
);
padding: 0.1em 0.2em 0.1em 0.2em;
}
code:style.css
.deco-\!.deco-\+ {
color: rgba(100%,100%,100%,1);
background-color: rgba(100%,0%,0%,1);
}
code:style.css
.deco-\!.deco-\- {
color: rgba(100%,100%,100%,0.5);
background-color: rgba(100%,0%,0%,0.5);
}
code:style.css
.deco-\!.deco-\_ {
color: white; /* 白文字 */
background: linear-gradient( to bottom,
red 50%,
/*yellow,*/
orange 70%,
/*red*/
yellow 100%
);
}
code:style.css
.deco-\!.deco-\":hover {
color: #fff; /* 白文字 */
background-color: orange;
}
.deco-\!.deco-\":not(:hover) {
color: #fff; /* 白文字 */
background: linear-gradient( to right,
red,
/*yellow,*/
orange,
red
) 0% center / 200% auto ; /* グラデーション */
animation: emred 4s linear infinite;
}
@keyframes emred {
to { background-position-x: 200%; }
}
だめみたい
code:style.css
.deco-\!! { /* 重要な部分は!を付ける */
color: white;
background-color: rgba(100%,0%,0%,0.7); /* 赤背景 */
font-size: 1.8em; /* 重要なので最初から大きな文字にする */
}
UserCSS:文字装飾記法
UserCSS:朱書き記法
UserCSS.icon
https://img.shields.io/badge/CSS3-UserCSS_赤くなる記法-1572B6.svg?logo=css3&style=for-the-badge