Advanced Search

CSS3 box-shadow can replace mask for mobile

/ Published in: CSS
Save to your folder(s)
This is a good replacement for a mask for mobile devices. You are still able to click through the shadow to the text behind.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style>
  2. .outter {
  3.     height:500px;
  4.     width:500px;
  5.     background-color:#454545;
  6.     overflow:hidden;
  7.     position:relative;
  8. }
  9. .inner {
  10.     height:400px;
  11.     width:400px;
  12.     background-color:#fff;
  13.     overflow:hidden;
  14.     position:absolute;
  15.     top:50px;
  16.     left:50px;    
  17.     moz-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4)
  18.     -webkit-box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
  19.     box-shadow: 0 0 100px 100px rgba(0,0,0,0.4);
  20. }
  21. �</style>
  22.  
  23. <div class="outter">
  24. <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.
  25.  
  26. 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.
  27.  
  28. 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.
  29. </p>
  30. <div class="inner">
  31.     Just a test.    
  32. </div>    
  33. </div>�

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.