Return to Snippet

Revision: 56609
at April 4, 2012 22:11 by ryanfiorini


Updated Code
<style>
.outter {
    height:500px;
    width:500px;
    background-color:#454545;
    overflow:hidden;
    position:relative;
}
.inner {
    height:400px;
    width:400px;
    background-color:#fff;
    overflow:hidden;
    position:absolute;
    top:50px;
    left:50px;    
    moz-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4)
    -webkit-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
    box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
}
�</style>

<div class="outter">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet euismod risus, gravida sodales sapien aliquet vitae. In eleifend dui quis purus lobortis dignissim. Nunc pharetra mi at turpis ullamcorper ac aliquet tellus malesuada. Nulla nibh purus, accumsan ac aliquam non, congue eget erat. Fusce sodales cursus lectus ut congue. Nam lacus mi, tristique at volutpat vitae, ornare vel lacus. Phasellus interdum pretium imperdiet. Curabitur quis velit nunc, a varius arcu. Morbi tellus nisl, auctor sit amet vehicula sit amet, porttitor sed magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat.

Aliquam luctus accumsan tellus, vel lacinia nulla sollicitudin sit amet. Phasellus non orci quis nisl aliquet tempor. Vivamus facilisis justo ut quam congue molestie. Nunc nisi dolor, malesuada a porta at, porttitor et orci. Quisque nec euismod purus. Integer lobortis porta erat, in scelerisque purus elementum suscipit. Ut nec nisl et odio sagittis adipiscing a quis enim. Fusce faucibus augue sed dui vehicula ac tempor ipsum pulvinar.

Sed tellus lectus, mollis at eleifend sed, tempus sed neque. Nullam hendrerit augue sit amet lorem molestie eu faucibus mauris elementum. Maecenas molestie est id risus molestie rutrum. Integer pulvinar tristique metus, eu tempor lacus varius a. In venenatis libero quis enim dictum pulvinar. Phasellus gravida augue id velit varius accumsan. Sed sollicitudin, ipsum vitae mollis pharetra, enim metus imperdiet magna, sed laoreet urna orci in libero. Praesent iaculis urna vel eros venenatis tristique. Vestibulum vestibulum venenatis posuere. Nam aliquam, massa vitae bibendum condimentum, enim lorem euismod diam, sit amet elementum arcu mi vitae turpis. Quisque convallis pharetra eros, sed sagittis lectus feugiat sit amet. Cras id magna auctor risus egestas blandit convallis non lacus.
</p>
<div class="inner">
    Just a test.    
</div>    
</div>�

Revision: 56608
at April 4, 2012 22:07 by ryanfiorini


Initial Code
<style>
.outter {
    height:500px;
    width:500px;
    background-color:#454545;
    overflow:hidden;
    position:relative;
}
.inner {
    height:400px;
    width:400px;
    background-color:#fff;
    overflow:hidden;
    position:absolute;
    top:50px;
    left:50px;    
    moz-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4)
    -webkit-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
    box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
}
​</style>

<div class="outter">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet euismod risus, gravida sodales sapien aliquet vitae. In eleifend dui quis purus lobortis dignissim. Nunc pharetra mi at turpis ullamcorper ac aliquet tellus malesuada. Nulla nibh purus, accumsan ac aliquam non, congue eget erat. Fusce sodales cursus lectus ut congue. Nam lacus mi, tristique at volutpat vitae, ornare vel lacus. Phasellus interdum pretium imperdiet. Curabitur quis velit nunc, a varius arcu. Morbi tellus nisl, auctor sit amet vehicula sit amet, porttitor sed magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam erat volutpat.

Aliquam luctus accumsan tellus, vel lacinia nulla sollicitudin sit amet. Phasellus non orci quis nisl aliquet tempor. Vivamus facilisis justo ut quam congue molestie. Nunc nisi dolor, malesuada a porta at, porttitor et orci. Quisque nec euismod purus. Integer lobortis porta erat, in scelerisque purus elementum suscipit. Ut nec nisl et odio sagittis adipiscing a quis enim. Fusce faucibus augue sed dui vehicula ac tempor ipsum pulvinar.

Sed tellus lectus, mollis at eleifend sed, tempus sed neque. Nullam hendrerit augue sit amet lorem molestie eu faucibus mauris elementum. Maecenas molestie est id risus molestie rutrum. Integer pulvinar tristique metus, eu tempor lacus varius a. In venenatis libero quis enim dictum pulvinar. Phasellus gravida augue id velit varius accumsan. Sed sollicitudin, ipsum vitae mollis pharetra, enim metus imperdiet magna, sed laoreet urna orci in libero. Praesent iaculis urna vel eros venenatis tristique. Vestibulum vestibulum venenatis posuere. Nam aliquam, massa vitae bibendum condimentum, enim lorem euismod diam, sit amet elementum arcu mi vitae turpis. Quisque convallis pharetra eros, sed sagittis lectus feugiat sit amet. Cras id magna auctor risus egestas blandit convallis non lacus.
</p>
<div class="inner">
    Just a test.    
</div>    
</div>​

Initial URL
http://jsfiddle.net/ryanwfiorini/uSaaP/

Initial Description
This is a good replacement for a mask for mobile devices.  You are still able to click through the shadow to the text behind.

Initial Title
CSS3 box-shadow can replace mask for mobile

Initial Tags
mobile, CSS3

Initial Language
CSS