サイト全体の内側の影のオーバーレイ？

私は自分のウェブサイトを再設計しており、背景画像に内側の影を適用したいと考えています。ウェブサイトでこれを行う最善の方法は何ですか？サイト全体の内側の影のオーバーレイ？

私はPSに影をつけ、背景にエッジ画像を合わせることを考えましたが、エッジの周りはうまく見えません。

私の2番目のアイデアは、CSSボックスシャドウをボディータグbox-shadow:inset 0 0 100px #000;に適用することでしたが、ボックスシャドウがウェブサイトのレンダリングを賢明に遅くすることがわかっています。

これを行うにはどのような方法が最適でしょうか？

参考のため、ここには2つの背景画像があり、1つは影なしで1つは背景画像です。

からhttp://i.imgur.com/8Wzj8l.png からhttp://i.imgur.com/StVpOl.png

出典

2011-12-22 Charlie

放射状のグラデーションはありますか？ http://www.colorzilla.com/gradient-editor/ – Kai

画像は高速ですが、 'box-shadow'を使用します。私はIE8を死に任せます。 – Blender

比較可能性と、すべてのデバイスで見た目が良くなるという知識は、PSに影を追加するほうが良いでしょうか？それとも何もできない理由がありますか？透明なPNGを使用すると、多分：http://thedesignspace.net/MT2archives/000103.html#.TvLGf1QZvCM。あなたの勤勉言葉が4つの異なるブラウザで異なっているならば、残念です。（もちろん、明るい未来ではこれは問題ではないでしょう） –

私は、このコードを使って、それを修正することができました

.overlay{ 
position: fixed; 
left: 0px; 
top: 0px; 
right: 0px; 
bottom: 0px; 
overflow-y:scroll; 
box-shadow: inset 0 0 100px #000; 
}

そして、私のHTMLは

<body> 
<div class="overlay"> 
Stuff... 
</div> 
</body>

の唯一の問題、のように見えますつまり、position:fixedがなければ、それは100％ではなく、vの100％ビューポート。しかし、それを修正すると、すべてをカバーするようになりましたが、スクロールできなかったので、overflow-y:scrollを追加するとスクロールすることができます。

出典

2011-12-22 19:26:21 Charlie

サイト全体の内側の影のオーバーレイ？

答えて

関連する問題