[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の薄いグレーのラインを入れてみます。下図の上がグレーラインを入れたサンプルになります。
.sample {text-shadow:
1px 1px 0px rgba(255,255,255,0.3),
2px 2px 3px rgba(0,0,0,0.5);}
カンマで区切る事で影の設定を増やす事ができます。ぼかしを0pxにすると、はっきりした形を持つ影をつける事ができます。
1pxのグレーラインがはいったため、フォントが持つ本来の形と影の間が明確になりフォントの美しさを損なう事なく立体的な見栄えになりました。
青バックに青色の文字だと埋没してしまいます。このような場合文字に影をつけるとはっきりとしますね。
カンマ区切りで水平垂直方向に白の影をつけています。
Photoshopでもおなじみのエンボス加工のような影文字も作れます。
ぼかしを0pxにした影を2つつけています。
float:leftを<li>に適用する事で可能になります。display:inlineを<li>に適用する事で可能になります。
box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。
影は２～４つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する場合には、カンマ（ , ）区切りで影のリストを複数指定します。
影を定義する指定内容は、以下のように解釈されます。
尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。 また、border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4); を指定
