PhotoshopでWebページのデザインを作成するときに
テキスト領域に「光彩（外側）」をつける。
デザイナー兼コーダーの身としては絶対やりませんが、支給されたデザインで遭遇したことがあります。
そして、自分ではやらないくせに、支給デザインだと「再現してやろうじゃないの」と血が騒いじゃうんですよね。もはや病ですね。
ということで、CSSで「光彩（外側）」は再現できるのか！？
試してみました。
【方法】 text-shadowをフル活用する！
結論から言うと、「光彩（外側）」と同等のCSSのプロパティは、執筆日現在ありません。
text-shadowを駆使して、光彩（外側）「ぽく見える」ように数値を設定してあげます。
See the Pen Photoshopの「光彩（外側）」をCSSで再現トライ！ by nico (@etsuko-kobanawa) on CodePen.
ポイントは、全部で5方向にシャドウをつけている点です。
CSSのコードを見ていただきたいのですが、
①全体 ②下 ③右 ④上 ⑤左
にシャドウをつけて、影に濃さを出しています。
今回は70%透過を入れていますが、
透過なし（100%）でもPhotoshopの「光彩（外側）」ほど濃くはならないので
ケースバイケースで数値を調整していただけたらそれっぽく再現できるはずです。
まとめ
ということで、Photoshopの「光彩（外側）」をCSSで再現してみました。
検証にあたっては、こちらの記事を参考にさせていただきました↓↓
ぼくの辿り着いた濃いめのtext-shadow@NoxGit｜Qiita
すみません、色つけてたら楽しくなってきちゃって
色味がネオン調になりました。
Photoshopと全く同じにするにはさらに工夫が必要そうですが、
今回紹介した方法でも「ぽい」雰囲気が出せるので、是非使ってみてください！
コメント