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

CSS TextShadow Generator


「CSS TextShadow Generator」を別枠で表示

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

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

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

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

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

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

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

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

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

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

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

BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books