エンボス

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

吉永　祐太

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