上の文字、画像じゃなくてテキストとCSSで作られてるんです。
こんな感じのテキストが簡単に作成できるジェネレーターを見つけましたのでご紹介します。
Text Shadow CSS Generator
「Text Shadow CSS Generator」です。
英語のサイトですが操作は簡単。
Text Shadow CSS Generatorの使い方
Text Shadow CSS Generatorの画面の見方
左に設定パネル、右にプレビューとプリセットギャラリー、下に書きだされたコードが表示されます。
プレビュー表示の設定
プレビューの右上の小さなパネルでプレビューのフォント色と背景色を設定することができます。
「Preview color:」にチェックを入れると反映されます。
シャドウを手動で設定をする
設定パネルでは基本的にスライダーを動かして設定を行っていきます。
リアルタイムで右のプレビューに反映されます。
Shift right: シャドウを左右にずらす
Shift down: シャドウを上下にずらす
Blur: シャドウのぼかし
Opacity: シャドウの透明度
Color: シャドウの色
※項目名横の「0」「1」のボタンでそれぞれの設定値を「0」「1」に出来ます。
この効果は、「Add New +」をクリックするといくつでも追加していくことができます。
コードを書き出す
矢印の「Use This」をクリックするとHTMLとCSSのコードが書き出されます。
コードをコピペ！
生成されたコードをコピペします。
そのままだと味気ないのでフォントサイズなどを自分のサイトに合わせて調整します。
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;
}
2つ以上、このサイトからコードをコピーする場合にはHTMLとCSSの「demotext」をそれぞれ変えて下さいね。（HTML「div id=”demotext2″」、CSS「#demotext」にするなど）
ギャラリーから装飾を選んで使う
この「Text Shadow CSS Generator」の便利なのはギャラリーに変わったテキストシャドウのサンプルが多い事。
表示されているサンプルをクリックするだけでスタイルが設定されます。
あとはコードを貼りつけて調整するだけです。
Text Shadow CSS Generatorまとめ
ネオンやドロップシャドウ、エンボスなど、簡単な装飾ならPhotoshopは要らないかも知れません。
テキストですと編集も楽ですしね。
コメント