ツナガルチップス No.3

こんにちは！！

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

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

前回の記事はコチラ

前回までの内容で文字に影と縁取りができるようになったので、今回は複合技を使っていきましょう。
影と縁取りが別々に指定できるのは分かったけど、二つを一緒に効果としてフォトショップみたいにしたいなぁ～、効果を付ける文字もあいうえおとかじゃなくて自分で文章打ちたいなぁ～、
わかりました。
できるようにしましょう。
ってかそもそもそれってできるの？できます。

CSSを使えば。

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

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

今回は同時に8方向の影と、文字のシャドーを指定しております。
文字で書くとこんな感じ「text-shadow:0 4px 10px #00ff00,4px 0 10px #00ff00,0 -4px 10px #00ff00,-4px 0 10px #00ff00,-4px -4px 10px #00ff00,4px -4px 10px #00ff00,-4px 4px 10px #00ff00,4px 4px 10px #00ff00,15px 15px #cccccc」

？？？

例によって文章にすると難しいですねぇ。。。

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

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

縁の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

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

横方向のずれpx ← 数値入力してみて下さい
縦方向のずれpx ← 数値入力してみて下さい
ぼかし具合px ← 数値入力してみて下さい

影の色 ↑ 色選べまーす

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

← ツナガルチップス No.2へ
→ ツナガルチップス No.4へ

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

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

吉永　祐太

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