text-shadow

ツナガルチップス 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/)
吉永 祐太

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



ツナガルチップス No.5

こんにちは!!

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

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

吉永 祐太

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



ツナガルチップス 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

吉永 祐太

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



ツナガルチップス 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

吉永 祐太

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



ツナガルチップス 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

吉永 祐太

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



ツナガルチップス No.1

こんにちは!!

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

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

吉永 祐太

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