こんにちは!!

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

吉永 祐太

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