2020年12月16日(水)

CSSのテキストシャドウ（text-shadow）をサクッと生成できる「CSS TextShadow Generator」作ってみました

• 0
• 0
• 2
• 0

ここ最近でCSSのグラデーションやボックスシャドウのジェネレーターを紹介してきましたが、
同じようにCSSでテキストに影を付ける「text-shadow」プロパティを手軽にサクッと生成できる
「CSS TextShadow Generator」を作ってみたので紹介してみます。

CSS TextShadow Generator

「CSS TextShadow Generator」を別枠で表示

入力項目は「text-shadow」プロパティの値となる
「水平方向」「垂直方向」「ぼかし」「色」に分かれていて
各項目の設定については以下のようになっています。

・「水平方向」はシャドウの水平（左側）方向のから距離。
・「垂直方向」はシャドウの垂直（上端）方向からの距離。
・「ぼかし」はシャドウのぼかしの強度。
・「色」はシャドウの色の指定。

入力した値は即座に画面上にあるテキストプレビューエリアに反映されます。
（デフォルトでは「text-shadow」と表示されているところ）

テキストプレ...