Photoshopの「光彩(外側)」を、CSSで再現トライ!

スポンサーリンク

※本サイトにはプロモーションが含まれています

CSS

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と全く同じにするにはさらに工夫が必要そうですが、
今回紹介した方法でも「ぽい」雰囲気が出せるので、是非使ってみてください!

コメント

タイトルとURLをコピーしました