Single element lightbox
Based on the tweet by LeaVerou this css can create a lightbox from a single element lightbox. Caveats: No legacy IE support. Width is fixed.
by jamessouth
HTML
<div class="lightbox">
<h1>Single element lightbox</h1>
<p>Based on the work by <a href="http://lea.verou.me/" target="_blank">Lea Verou</a> </p>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dui ipsum, tincidunt ac interdum quis, aliquam ac ante. Cras eget mollis ante. Aenean suscipit egestas arcu iaculis viverra. Nunc pharetra, magna in fringilla varius, dolor augue ultrices nunc, id laoreet augue arcu in leo. Quisque feugiat, justo sit amet faucibus rutrum, elit felis ullamcorper leo, sit amet posuere neque ipsum nec libero. Etiam molestie lacus erat, vitae pretium odio. Aenean massa elit, blandit eu adipiscing quis, accumsan lacinia est. Ut massa tellus, tempor a volutpat vel, euismod sit amet ante. Pellentesque quis enim ac libero lacinia faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque lobortis euismod leo, et tristique ligula vehicula vel. Phasellus eget orci enim, ac hendrerit augue. Vestibulum rutrum nunc vel nisi posuere sit amet auctor elit iaculis. Donec vel risus sit amet mauris pulvinar tincidunt.</p>
<p>
Nunc sit amet justo sapien, in ultricies dui. Aliquam mollis tincidunt gravida. Quisque mollis ullamcorper libero, at iaculis sapien blandit ac. Suspendisse nec adipiscing nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pretium, felis nec tincidunt luctus, quam tortor placerat nunc, a sodales tortor nibh vitae nisl. Nulla sodales urna et lectus sollicitudin facilisis. Sed varius malesuada ante, eget semper neque vehicula viverra.
</p>
CSS
.lightbox{
position:absolute;
z-index:999;
width:460px;
padding:0 20px;
min-height:200px;
left:50%;
margin:100px 0 0 -250px;
background:#fff;
border-radius:3px;
box-shadow:0px 0px 10px 1px rgba(0,0,0,1), 0 0 0 9999px rgba(0,0,0,.6);
}