画像に影をつけたい時にこれまではbox-shadowを使っていたんですが、どうやらdrop-shadowを使ったほうが良さそうだということを知りました。
少しぼやけた影をつけると、WEBサイトに立体感が出ます。
ボタンに影をつけると、浮き出たようになり、クリックした時に影との距離を変えることで、ポチッと押したような効果がでます。
そんな時に、box-shadowは、画像の枠に沿った四角形にしか影が付かないので、透過画像などの場合はかなり変な状態になってしまいます。
それを解決する手段がdrop-shadowということです。
ちなみに、この機能は主要ブラウザの最新版ージョンであれば、ほぼ使えるようなので、安心して使えそうです。
drop-shadowの使い方とファイルの種類
単純にbox-shadowをdrop-shadowにするわけではなく、drop-shadowはfilterの機能になるので、下記のように記述します。
img{
filter : drop-shadow( 2px 2px 2px rgba(0 , 0 , 0 , 0.5) );
}
ただし、注意点があり、透過画像じゃない場合は、box-shadowのような見栄えになってしまいます。
WEBブラウザで使われる画像は、jpeg,gif,png,svgの４つが基本なので、その4つに対してdrop-shadowをあててみたいと思います。
<html>
<head>
<meta charset="utf-8">
<title>drop-shadow</title>
<link rel="stylesheet" href="drop-shadow.css">
</head>
<body>
<ol>
<li>
<img src="settings.jpg">
</li>
<li>
<img src="settings.svg">
</li>
<li>
<img src="settings.png">
</li>
<li>
<img src="settings.gif">
</li>
</ol>
</body>
</html>
img{
width:60px;
height:60px;
filter: drop-shadow(2px 2px 2px red);
vertical-align:middle;
}
li{
margin:20px;
}
jpeg以外は透過画像なので、想定通りの結果が見て分かりますね。
ちなみに、画像が黒だったので、影は赤色にしてわかりやすくしています。
影付けするメリット
ゲームグラフィックの仕事をしていた時に、インターフェイスについてのUIを色々と学ぶことができたのですが、画像や何かの表示の上に文字を表示する場合に、被さる画像の色が何色であっても問題ないようにするために、色々なテクニックがあります。
テレビを見ていて、画面に文字が出る時などでそういうテクニックを確認できますが、主に以下のようなパターンがあります。
1. 台座を敷く
台座を置くことで、被さる画像の濃淡に関係なく、文字をはっきりと表示させることができます。
タイトル文字など、ハッキリと表示したい場合に使えますね。
2. 文字の枠をつける
文字をはっきりと表示させたい時に使う方法ですが、台座と違って下に表示されている画像を極力邪魔しない時に使えます。
枠が無いと、文字の色と背景画像の色がかぶった箇所は基本的に見えなくなってしまいます。
3. 文字色の反転した色を影にする
文字が、下地の画像に馴染んでかつあまり邪魔をしないという事で、このパターンを使う場合が多いため、スタンダードパターンであると思っても良さそうです。
text-shadowも忘れないで
画像に対しての影付けは、利便性も理解できたと思いますが、フォント表示に対しては、text-shadowを使って、上記の２番、３番のような効果をcssだけで創り出すことはできます。
こちらも合わせて使うことで、かなり柔軟なWEBサイトを作ることができます。
そして、こうした影付けテクニックなどは、デザインバランスのいいサイトを見てかなり勉強になるので、色々なサイトを見て、自分なりに技を盗んでいく、独学で、どんどん向上するので、オススメです。
UI/UXは、人から教わるものではなく、自分から進んで学習しなくちゃね。
0 件のコメント:
コメントを投稿