ブログデザイン備忘録～テキストのグロー、グラデーション

f:id:ATATAT:20211211084616p:plain:w700

かなり前に取り上げたテーマだが、今回はテキストのグローやグラデーション効果について紹介したい。

atatat.hatenablog.com

今回は以前HTMLのスタイルで効果の設定をしていたものをCode PenでHTMLとCSSで実装する。

グローやグラデーションについては

UIデザインの最近のトレンド、近未来的なかっこいいグラデーションを実装するCSSのテクニック | コリス

に取り上げられているコードと以前のものと比較もする。

<h1 class="text-glow">
  <span class="text-gradient">text gradient</span> 
  with glow effect
</h1>

<h1 class= "neon"> ネオン風 </h1>

<h1 class="text-glow">
<span class="vivid">鮮やかな見出し </span> 
</h1>

htmlのクラスtext-glowはグローの設定、text-gradientはグラデーションの設定、text-glowクラス内でtext-gradientを入れておくとグローとグラデーションの効果を同時にかけることができる。

.text-glow {
  text-shadow: 0 0 80px rgb(192 219 255 / 25%), 0 0 32px rgb(65 120 255 / 34%);
}

.text-gradient {
background: rgb(34,193,195);
background: linear-gradient(72deg, rgba(34,193,195,1) 0%, rgba(231,211,21,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

なおグラデーションの設定backgroundについてはCSS Gradient Generatorを使って生成した。

cssgradient.io

グローの部分はtext-shadowで設定する。rgb(192 219 255 / 25%)で%の数字を変えるとグローの強度が調整できる。

次にtext-gradientのところはバックグラウンドをグラデーション、文字色をtransparent,-webkit-background-clip:text;とすることでテキストの文字の部分だけバックグラウンドのグラデーションが残ることを利用してテキストにグラデーションをかける。

以前紹介したグローとグラデーションは以下の通り。グローに関しては上のコードの方が効果を調整できるので使いやすいと思う。

.neon{
  text-shadow:0 0 0.10em #2962FF,0 0 0.15em #2962FF,0 0 0.80em #2962FF,0 0 1.00em #2962FF;
}

.vivid{
font-size:2rem;
color: transparent;
background: linear-gradient( 45deg,#E60012 20%,#F39800 30%,#FFF100 40%,#009944 50%,#0068B7 60%,#1D2088 70%,#920783 80%);
  -webkit-background-clip: text;
}