ツナガルチップス No.4

こんにちは！！

エレクアライズ　制作技術局　ハイパーメディアクリエイター(HMC)の吉永です。

前回に引き続き、今回もHTMLで文字を装飾する手法をご紹介します。

前回の記事はコチラ

前回までの内容でドロップシャドーはつけられるようになりました。
今回はディープシャドーをつけられるようにしましょう。
ディープシャドーとは文字と影の隙間がなく、文字が3Dっぽく見えるシャドーのことです。
マンガとかチラシとかでよく見るアレですアレ。
百聞は一見にしかずというので実際に見てみましょう。
ってかそもそもそれってできるの？できます。

CSSを使えば。

CSSって何？って方はこちら

今回も引き続き「text-shadow」というプロパティを応用します。

今回は同時に右下に影を1ピクセルづづずらしながら隙間なく配置しております。
文字で書くとこんな感じ「text-shadow:1px 1px 0px #333333,2px 2px 0px #333333,3px 3px 0px #333333,4px 4px 0px #333333,5px 5px 0px #333333,6px 6px 0px #333333,7px 7px 0px #333333,8px 8px 0px #333333;」

赤字の箇所で影の位置を指定しています。
徐々に数値が増えていってますね。
シャドーの幅を増やしたいなら9px 9px、10px 10pxと増やしていけば良いです。

今回も動作確認用のデモパーツを用意したので遊んでみてください。

影の太さpx ← 数値入力してみて下さい
ぼかし具合px ← 数値入力してみて下さい

影の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

文字← 文字を入力してみて下さい

ではまた次回のネタを探して見つかり次第ウプします。
see you

← ツナガルチップス No.3へ
→ ツナガルチップス No.5へ

###########################################
Android開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

iOS開発アプリ一覧
シーバリ for Y.Y Magic
４色シーバリ for Y.Y Magic
シーバリプレミアム for Y.Y Magic
４色シーバリプレミアム for Y.Y Magic

吉永　祐太

###########################################