text-shadow

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

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

前回の記事はコチラ

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

CSSを使えば。

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

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

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

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

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

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

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

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

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

前回の記事はコチラ

今回のテーマはエンボス。
文字が背景から浮き出ていたり、へこんでいたりするアレですアレ。
百聞は一見にしかずというので実際に見てみましょう。
ってかそもそもそれってできるの？できます。

CSSを使えば。

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

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

エンボス(浮き彫り)

左上と右下に影をつけて浮いている感じを演出しています。
文字で書くとこんな感じ「text-shadow: -1px -1px #ffffff, 1px 1px #333333;」

ピローエンボス(へこみ)

同じく左上と右下に影をつけて浮いている感じを演出しています。
文字で書くとこんな感じ「text-shadow: 1px 1px #ffffff, -1px -1px #444444;」

影の付け方で浮いたり、へこんだりして見える。
人間の目って面白いですねぇ～。

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

エンボスピローエンボス
浮き彫り及びへこみ具合px ← 数値入力してみて下さい

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

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

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

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

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

吉永　祐太

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

エレクアライズ　制作技術局　ハイパーメディアクリエイター(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

吉永　祐太

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

エレクアライズ　制作技術局　ハイパーメディアクリエイター(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

吉永　祐太

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

エレクアライズ　制作技術局　ハイパーメディアクリエイター(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開発アプリ一覧
リバーシ
４色リバーシ
リバーシプレミアム
４色リバーシプレミアム

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

吉永　祐太

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

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

私はこのブログで技術系のブログを書いていこうと思っていますので宜しくお願いします。
目指せL社のW氏みたいなブログ！！

第一弾なのでわりとライトな技術ネタをひとつ。

みなさんWebページをHTMLで作成する際に文字でお知らせなどを書いたりすると思いますが、なんか生文字というか
味気ないというか、面白みにかけるなぁと思ったことはありませんか？

ワードとかパワーポイントならもっと簡単に文字の装飾ができるのに、HTMLで装飾って難しい。。。いっそのこと
フォトショップで画像として作ってしまいたいが、手間がおしい。。。

そんな様々な悩みがあるかはわかりませんが、できます。

CSSを使えば。

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

CSSには「text-shadow」というプロパティがあり、これを使うと割と簡単に文字に影をつけたりができます。

上の文字はcssで「text-shadow:5px 5px 3px #000」を指定しています。

次にtext-shadowのコロンの横に書いてある数値の意味を解説していきます。

1番目の数値・・・横方向のずれ。数値を大きくすればするほど影がずれていきます。正の数で右に、負の数で左に移動します。

2番目の数値・・・縦方向のずれ。数値を大きくすればするほど影がずれていきます。正の数で下に、負の数で上に移動します。

3番目の数値・・・ぼかし具合。数値を大きくすればするほど影ぼかされます。

4番目の数値・・・影の色。

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

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

影の色 ↑ 色選べまーす

文字の色 ↑ 色選べまーす

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

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

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

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

吉永　祐太

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