文字装飾
文字をcssで装飾するサンプル
サンプル1
影でドロップシャドー効果
CSSで文字装飾 (12px)
文字34px
text-shadowで影を付加して立体っぽくみせる基本。
色と影でエンボス効果
CSSで文字装飾 (12px)
文字34px
text-shadowで影。1個目の方、小さい文字だとつぶれるので、色調整。
色と影でレタープレス風効果
CSSで文字装飾 (12px)
文字34px
レタープレスは紙っぽい背景と濃い文字色と上下のへこみ用の影で演出。
サンプル2
影4つで文字ボーダー
CSSで文字装飾 (12px)
文字34px
text-shadowで影の塗りでボーダー。
発光効果
CSSで文字装飾 (12px)
文字34px
影と塗りの色調整で文字が光ってるように演出。
発光効果2
CSSで文字装飾 (12px)
文字34px
影と塗りの色調整で文字が立体的に光っているように演出。
サンプル3
立体文字効果
CSSで文字装飾 (12px)
文字34px
影の調整で文字が立体的見えるように演出。
立体文字効果2
CSSで文字装飾 (12px)
文字34px
影の調整で文字が立体的見えるように演出。
立体文字効果3
CSSで文字装飾 (12px)
文字34px
影の調整で文字が立体的見えるように演出。
サンプル4
transform活用
CSSで文字装飾 (12px)
文字34px
使える使えないは別にして、transformと組み合わせて演出。
transform活用2
CSSで文字装飾 (12px)
文字34px
transformと組み合わせて演出。
transform活用3 反転文字
CSSで文字装飾 (12px)
文字34px
transformと組み合わせて演出。文字が小さい時（枠内）と大きい時（枠外）で別のcss。
サンプル5
transform活用4 浮かぶ演出
CSSで文字装飾 (12px)
文字34px
transformと組み合わせて演出。文字が小さい時（枠内）と大きい時（枠外）で別のcss。
transform活用5
CSSで文字装飾 (12px)
文字34px
レタープレス風とtransformを組み合わせて、文字がめくれる演出。右から光が当たってるイメージ。
transform活用6
CSSで文字装飾 (12px)
文字34px
transformでデザイン風にしてみたもの。
サンプル6
befor,afterで3色グラデ
CSSで文字装飾 (12px)の文字列を表示してみた。長い文字列のあるボックスに設定
文字34px
linear-gradientとbackground-clip:textはFFやオペラが動作しないので、beforeとafterを使って3色グラデを作ってみた
befor,afterで3色グラデ + 影
CSSで文字装飾 (12px)の文字列を表示してみた。長い文字列のあるボックスに設定
文字34px
影つけてみた
befor,afterで3色グラデ + 影 + 影
CSSで文字装飾 (12px)の文字列を表示してみた。長い文字列のあるボックスに設定
文字34px
立体を強調した影を複数付けてみた
文字装飾についての考察
例えば、記事本文をこんな風に（サンプル3の2個目）、cssで演出したとして、どんな文章でもちゃんと文字が読めるのかが心配で夜も眠れないかもしれない、などと思ったりするかもしれない、今日この頃。
ちなみに、サンプル4、5はとりあえずやってみた的なものなので、見出しやボタンリンク用の雰囲気で、本文では使いづらいものになってます。
よく文字演出の効果などで出てくる用語ネタ
- エンボス
- Emboss。板金や紙などに文字や絵柄などを浮き彫りにする加工である。（wikipedia エンボス）
- レタープレス
- 印刷業界では凸版印刷方式、凸の版で垂直圧力をかけ印刷する古い印刷方式のこと。平面の紙が圧力で凹む仕様をイメージして、webデザイン業界では紙に型押ししたような雰囲気のものを指し、エンボスの逆でへこんでる雰囲気のものをそう言ってる場合が多い気がする。ちなみに、「人間の目は上が明るく下が暗いの基本設定が脳内にあり、逆だとへこんで見える」という錯覚を利用したもの。
ページトップへ