cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

テキスト装飾に画像ソフトは不要かも?!「Text Shadow CSS Generator」

WEB
スポンサーリンク
Text Shadow

上の文字、画像じゃなくてテキストとCSSで作られてるんです。

こんな感じのテキストが簡単に作成できるジェネレーターを見つけましたのでご紹介します。

 

Text Shadow CSS Generator

textshadowCSS

Text Shadow CSS Generator

「Text Shadow CSS Generator」です。

英語のサイトですが操作は簡単。

 

Text Shadow CSS Generatorの使い方

Text Shadow CSS Generatorの画面の見方

textshadowCSS
左に設定パネル、右にプレビューとプリセットギャラリー、下に書きだされたコードが表示されます。

 

プレビュー表示の設定

textshadowCSS
プレビューの右上の小さなパネルでプレビューのフォント色と背景色を設定することができます。
「Preview color:」にチェックを入れると反映されます。

 

シャドウを手動で設定をする

設定パネルでは基本的にスライダーを動かして設定を行っていきます。
リアルタイムで右のプレビューに反映されます。

textshadowCSS

Shift right: シャドウを左右にずらす
Shift down: シャドウを上下にずらす
Blur: シャドウのぼかし
Opacity: シャドウの透明度
Color: シャドウの色

※項目名横の「0」「1」のボタンでそれぞれの設定値を「0」「1」に出来ます。

 

この効果は、「Add New +」をクリックするといくつでも追加していくことができます。

 

コードを書き出す

textshadowCSS
矢印の「Use This」をクリックするとHTMLとCSSのコードが書き出されます。

 

コードをコピペ!

生成されたコードをコピペします。
そのままだと味気ないのでフォントサイズなどを自分のサイトに合わせて調整します。

Purple

HTML

<div id="demotext">Purple</div>

CSS

#demotext {
/* ここから書き加えたCSS */
	width:100%;
	padding:50px;
	font-size:3.0em;
	font-weight:bold;
	text-align:center;
/* ここまで */
	text-shadow: 7px 5px 7px #8B57CE;
	color: #000000;
	background: #DEDEDE;
}
※「color」「background」がだぶって入ってしまう場合もあるようです。その場合は片方を削除します。

2つ以上、このサイトからコードをコピーする場合にはHTMLとCSSの「demotext」をそれぞれ変えて下さいね。(HTML「div id=”demotext2″」、CSS「#demotext」にするなど)

 

ギャラリーから装飾を選んで使う

この「Text Shadow CSS Generator」の便利なのはギャラリーに変わったテキストシャドウのサンプルが多い事。

表示されているサンプルをクリックするだけでスタイルが設定されます。

textshadowCSS

あとはコードを貼りつけて調整するだけです。

かんたん!!

 

Text Shadow CSS Generatorまとめ

ネオンやドロップシャドウ、エンボスなど、簡単な装飾ならPhotoshopは要らないかも知れません。
テキストですと編集も楽ですしね。

 

コメント

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