Menu
the end result that I'm looking for is something like this:
http://osxdaily.com/wp-content/uploads/2011/08/icloud-background.jpg
Which was generated with this bkg title:
http://osxdaily.com/wp-content/uploads/2011/08/apple-shirt.jpg
Is it possible to apply a css3 box-shadow to get the desired output?
I tried:
box-shadow: inset 0 0 490px black;
But that only covers a small part of the screen.
Thanks
838
Make sure whatever element you set the box shadow to has 100% width and height. This means that all ancestors must also have 100% height and width. So if you want to apply it to body, html must also have those properties.
CSS:
html, body {
width:100%;
height: 100%;
}
body {
box-shadow: inset 0 0 490px black;
background: url('image.jpg');
}
JS Fiddle Example
To maintain the same shadow effect even when you scroll, apply the box shadow to a wrapper div and then apply overflow:auto.
HTML:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS:
html, body, #wrapper {
width:100%;
height: 100%;
}
#wrapper {
box-shadow: inset 0 0 490px black;
background: url('image.jpg');
overflow: auto;
}
JS Fiddle Example
91
If I understood correctly this is what your looking for: http://jsfiddle.net/RGWrC/
Here's the code:
html {
height: 100%;
}
body {
min-height: 100%;
box-shadow: inset 0 0 490px black;
background: url('whatever.jpg');
}
This extends the background to the full height of the page, still, ensuring a minimum equal to the window's height. The CSS, I think, is self-explanatory.
20
There is another pretty easy way to do similar effect. You have to wrap your website content with div that will have boxshadow. Also the div needs to have 100% width and height, and posiation: absolute; This will give You a nice effect evan when You scroll the page.
HTML
<div class="shadow">
<!-- ANY CONTENT GOES HERE -->
<div>
<h1>Content</h1>
</div>
<!-- ANY CONTENT GOES HERE -->
</div>
CSS
.shadow {
position: absolute;
width: 100%;
height: 100%;
-webkit-box-shadow: inset 0px 0px 400px #000000;
box-shadow: inset 0px 0px 400px #000000;
}
Example: http://jsfiddle.net/2GRGF/1/
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With