- >>画像に影を付ける方法：2008/7/11
- 今回は、前回のz-indexの応用編です。
- position:absolute;との組み合わせで画像に影を付けることができるんです。前回のサンプルに影を付けたものをアップしましたので、すでにお分かりかとは思いますが…。
- 画像を背景に持ってくる利点…。なんでしょうね～。ドロップシャドウを考えながら画像を作らなくていいとか？結構重宝はしてますよ～。
- 仕組みはというと、右と下にグラデーションがかかった画像を背景として置いてるんですよ～。たったそんだけです。800px×800pxぐらいの大きな画像を一つ作っておけばいろいろな所で使えますよ。
- background-position:bottom right;で右下を背景の始点にする→position:absolute;を両要素に指定→画像と同じ大きさに影も合わせる→5pxだけ右下にすらず→完成です。
- 簡単でしょ！
- サンプル
- CSSリファレンストップ
本物のホームページ制作会社 「ウェブスポット」
SEO対策はもちろんのこと
依頼主様がずっと眺めていたいホームページ
人に自慢したくなるようなホームページの制作を心がけております