ディープシャドー

ツナガルチップス No.6

こんにちは!!

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

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

前回の記事はコチラ

今まで紹介してきた手法で大分テキストを装飾するテクニックがついてきましたね。
今回はおさらいということで、今までの内容を全てごった煮のデモを用意しました。
ってかそもそもそれってできるの?できます

CSSを使えば。

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

ランキングにランクインしました!!
文字設定項目

テキスト
文字の縁1設定項目
太さpx
ぼかし具合px

文字の縁2設定項目
太さpx
ぼかし具合px

文字の縁3設定項目
太さpx
ぼかし具合px

文字の縁4設定項目
太さpx
ぼかし具合px

文字の縁5設定項目
太さpx
ぼかし具合px

ドロップシャドー設定項目
横方向のずれpx
縦方向のずれpx
ぼかし具合px
ディープシャドー設定項目
太さpx
ぼかし具合px

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

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

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

iOS開発アプリ一覧
シーバリ for Y.Y Magic
4色シーバリ for Y.Y Magic

アンドロイダー公認デベロッパー(https://androider.jp/developer/f8d0c0800a2e980c4d497a58102c00e8/)
吉永 祐太

###############################################################################################
アンドロイダー公認デベロッパー認証




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m

ツナガルチップス 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開発アプリ一覧
リバーシ
4色リバーシ
リバーシプレミアム
4色リバーシプレミアム

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

吉永 祐太

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




人気ブログランキングに投票
ブログランキング・にほんブログ村へ
にほんブログ村のランキングに投票
クリックしていただけると励みになりますm(_ _)m