WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

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

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

CSS TextShadow Generator


「CSS TextShadow Generator」を別枠で表示

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

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

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

テキストプレビューエリアは入力することが可能になっており
表示するテキストを編集することもできます。

入力エリア下にあるCSSプロパティ生成エリアには
入力した値が即座に反映されるようになっており、
右側にあるコピーボタンで表示されているコードをコピーすることができます。

また、入力エリア右下にある「影を追加」ボタンをクリックすることで
テキストにかけるシャドウを追加することができます。

追加したシャドウはそれぞれ個別にプロパティ値を設定することができるので
CSSを使ってのテキストシャドウのアレンジを
プレビューを見ながら生成させることが可能です。

ジェネレータ内の数値を指定する箇所については、
入力エリアにカーソルをフォーカスした後は
キーボードの「↑」「↓」キーで数値を増減できるようになっているので
数字を直接入力せずに簡単に値を変えることが可能です。

テキストシャドウの指定とは別にジェネレータ画面上の
プレビューテキストのフォントサイズやフォントカラーに加えて
プレビュー画面全体の背景色を
下部の入力エリアから指定ができるようになっていますが
こちらは生成されるCSSには反映されません。
※あくまでデモ画面内での色指定のみになります。

生成されるCSSプロパティはベンダープレフィックスなどもなく、
テキストシャドウを作成するうえで必要最低限の要素になっています。
※ベンダープレフィックスの追加要望があった場合は対応させていただきます。

シンプルな形でのCSSテキストシャドウジェネレーターになっていますが、
プレビューを見ながらサクッとCSSテキストシャドウを作成する際にぜひ。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です