忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

影文字のプロパティ

プロパティはtext-shadowを使います。

text-shadow:5px 5px 10px rgba(0,0,0,0.5);
text-shadow:水平方向の距離 垂直方向の距離 ぼかし カラー;

半角スペースの区切りで上記の様に設定します。距離の指定は正と負の値が使えます。

文字に影をつけてみます。

.sample {text-shadow:2px 2px 3px rgba(0,0,0,0.5);}

影文字はより強調されて目立ちますね。しかし文字も影も同じ黒を使っています。影の部分が文字の黒と重なり、フォントが本来持っていた形が崩れてシャープさに欠けてしまいました。

1pxにこだわる影文字

文字の形を明確にするために影と文字の間に1pxの薄いグレーのラインを入れてみます。下図の上がグレーラインを入れたサンプルになります。


.sample {text-shadow:
1px 1px 0px rgba(255,255,255,0.3),
2px 2px 3px rgba(0,0,0,0.5);}

カンマで区切る事で影の設定を増やす事ができます。ぼかしを0pxにすると、はっきりした形を持つ影をつける事ができます。
1pxのグレーラインがはいったため、フォントが持つ本来の形と影の間が明確になりフォントの美しさを損なう事なく立体的な見栄えになりました。

背景画像と同系の色を文字色に使用したい

青バックに青色の文字だと埋没してしまいます。このような場合文字に影をつけるとはっきりとしますね。



 

.sample {text-shadow: 2px 0px 4px rgba(255,255,255,0.5), 0px 2px 4px rgba(255,255,255,0.5), -2px 0px 4px rgba(255,255,255,0.5), 0px -2px 4px rgba(255,255,255,0.5);}

カンマ区切りで水平垂直方向に白の影をつけています。

エンボス加工のような影文字

Photoshopでもおなじみのエンボス加工のような影文字も作れます。

.sample {text-shadow: -1px -1px 0px rgba(255,255,255,0.6), 1px 1px 0px rgba(0,0,0,0.6);}

ぼかしを0pxにした影を2つつけています。

 


この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
05 2017/06 07
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]