エッジ

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

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

吉永 祐太

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




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

ツナガルチップス No.2

こんにちは!!

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

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

前回の記事はコチラ

文字に影をつけられるのは分かったけど、影より文字の縁取りをつけたいんだよ!!
影ついても、生文字っぽいのは変わんないよ!!
みたいなご意見があったかどうか定かではありませんが、できます

CSSを使えば。

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

文字の縁取りを実現するには前回ご紹介した「text-shadow」というプロパティを応用します。

例えばこんな感じ

CSSの数値の意味としては前回と同じです。ちなみに前回は1方向のみの影を指定していました。

今回は同時に8方向に影を指定しております。
文字で書くとこんな感じ「text-shadow:0 4px 10px #ff0000,4px 0 10px #ff0000,0 -4px 10px #ff0000,-4px 0 10px #ff0000,-4px -4px 10px #ff0000,4px -4px 10px #ff0000,-4px 4px 10px #ff0000,4px 4px 10px #ff0000」

???

わけわかんないんだけど。。。

ですよねぇ。。。

CSSでは時折上記のようにカンマ区切りで複数個のパラメーターを同時に指定できるものがあります。
縁取りの縁を太くしたいなら4pxって箇所を10pxにすればいいくらいに覚えておいてください。(汗)

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

あいうえお

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

縁の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

ちなみに私は以前、放送局向けの機材メーカーで働いていたのですが、放送業界では文字の縁取りのことを「エッジ」と呼称していました。
放送業界を離れてから「エッジ」といっても伝わらず、「境界」とか「縁取り」と言わないと分かってもらえません。。。(苦笑)

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

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

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

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

吉永 祐太

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




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