[CSS] コピペで使える両端をグラデーションにした見出し
やりたいこと
- 見出しの装飾で帯に白文字はよくあるパターンですが、一手間加えてグラデーションをつけると、少しきれい目なイメージになります
- ということで、帯の両端にグラデーションをつけるCSSの紹介です
サンプルコード
.gradation {
display: inline-block;
padding: 0.5em 6em;
background: linear-gradient(to right, #fff 0%, #3388dd 30%, #3388dd 70%, #fff 100%);
color: #fff;
font-size: 24px;
}
仕組み、解説、補足など
- 「linear-gradient」を使ってグラデーションカラーを指定しています
- サンプルコードの書き方では、左端から幅0%〜30%までは白から青へのグラデーション、70%〜100%までは青から白へのグラデーションになります
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。