UserCSS:グラデーションテキスト
テキストのグラデーション
ページタイトルをグラデーションテキストにするテスト
code:style.css
.editor .line-title .text {
font-size: 24px;
font-weight: bold;
/* background: -webkit-linear-gradient(left, #ff26fb, #00b3ff); */
/* background: -webkit-linear-gradient(left, #aaa, #333, #ff26fb); /* */
/*background: linear-gradient(45deg, #ffd800, #ff0000 45%, #ffd800);*/
background: linear-gradient( to top,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
background-clip: text;
color: transparent;
display:inline-block;
}
グラデーションテキスト版 - UserCSS:レインボー記法
グラデーションテキスト版のレインボー記法のテストだよ
テストだよ
code:style.css
.deco-\" {
font-weight: bold;
background: linear-gradient( to right,
red,
orange,
yellow,
green,
aqua,
blue,
purple,
red
) 0% center / 200% auto ; /* グラデーション */
padding: 0.1em 0.2em 0.1em 0.2em;
animation: rainbow 4s linear infinite;
animation-direction: reverse;
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; /* */
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
UserCSS:テキスト
UserCSS:グラデーション
UserCSS:文字装飾記法
https://img.shields.io/badge/UserCSS-グラデーションテキスト-1572B6.svg?logo=css3&style=for-the-badge
UserCSS.icon