プロジェクトタイトルを台無しにするUserCSS
suto3.icon
すごく残念なUserCSSができてしまった
ダサいグラデーション
どんなにかっこいいデザインにしても、これをつけるだけで、20世紀のダメなホームページ感になる
（でも実は気に入っている）
https://gyazo.com/1c5333e69a3725c7733e34b1b5cebda6
ワロタyosider.icon
グラデーションの色を調整すればイケイケな感じになりそう(?)blu3mo.icon
グレースケールかつハイコントラストにすると、金属光沢感が出てかっこいいと思うsuto3.icon
やってみたsuto3.icon
かっこいい!erniogi.iconyosider.icon
暗い部分が見にくい気はするyosider.icon
でも、私のセンスは普通とずれているみたいなので、なんとも言えない
（もちろん、デザイン全体のバランスを考慮するのも大事）
code:style.css
.quick-launch .project-home .title {
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 10s linear infinite;
animation-direction: reverse;
-webkit-background-clip: text; /* */
-webkit-text-fill-color: transparent; /* */
background-clip: text;
color: transparent;
}
@keyframes rainbow {
to { background-position-x: 200%; }
}
技術的な解説
ページタイトルの背景画像をlinear-gradient()線形グラデーションで作る
red,orange 〜 purple,red までがグラデーションに使う色である
色数はいくつでも指定できる
最初の色と最後の色は同じものを指定したほうがいい
200%がグラデーションの大きさである（テキストの2倍）
background-clip（-webkit-background-clip）で、背景画像をテキストの形にくり抜く
color（-webkit-text-fill-color）で、文字色を透明にする
結果として、グラデーションがかかった文字が表示される
10s というのが、アニメーションが一周する秒数（10秒）
この値が大きくなればゆっくりに、小さくなれば早くなる
animation-direction: reverse; でグラデーションが流れる方向を左→右にする