Pure CSS LightBox

Ugh. LightBoxes.

That 37Signals guy was totally right—these things are getting out of hand. At least now you don't need javascript.

Anyway. This is really simple. Using the :target pseudo class we can apply target-centric CSS. The CSS is very simple, just check the source.


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent interdum lacinia diam. Etiam ac neque. Nam hendrerit. Sed non turpis ut mauris laoreet venenatis. Integer facilisis vehicula dolor. Aenean tellus enim, tincidunt vitae, faucibus vel, pretium quis, magna. Aliquam at metus. Nullam sed ipsum. Nunc ipsum velit, pellentesque nec, bibendum in, iaculis a, nisi. Pellentesque interdum nulla vitae velit. Vestibulum scelerisque commodo metus. Ut pede est, congue sit amet, aliquet a, eleifend ut, augue.

LightBox

Phasellus enim elit, ullamcorper non, auctor a, sagittis vehicula, diam. Aenean rhoncus dui ut felis. Aliquam erat volutpat. Donec scelerisque. Sed et urna. Aenean non odio. Nunc porta iaculis mauris. Curabitur orci. In et elit eu justo pharetra ornare. Sed tincidunt luctus ligula.

LightBox

In scelerisque, nibh id ullamcorper consectetuer, neque ligula ultricies enim, id commodo augue lorem at libero. Cras eu tortor. Duis vehicula, neque ut posuere ullamcorper, est felis suscipit ante, nec condimentum augue leo a massa. Nullam eu odio quis pede porta semper. Integer dictum nibh molestie mi. Morbi consectetuer, nisl sit amet placerat tincidunt, nibh mauris eleifend lacus, non euismod est elit id metus. Vivamus rhoncus, enim vitae mattis euismod, massa dui scelerisque lectus, quis vulputate pede nisi ut libero. Donec eu dui in leo volutpat iaculis. Integer vel elit eget sapien euismod commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque tortor ante, molestie sit amet, pulvinar quis, dignissim non, arcu. Mauris venenatis aliquam eros. In hac habitasse platea dictumst. Proin facilisis suscipit arcu. Cras scelerisque, magna sit amet condimentum elementum, dui orci eleifend elit, dictum vulputate massa ligula in lorem. Pellentesque at lacus sit amet dui pretium mattis.

LightBox

Ut mattis augue ac leo. Aliquam faucibus pretium augue. Aliquam erat volutpat. Curabitur volutpat nisl sit amet felis. Curabitur faucibus. Nunc nec tellus ac neque euismod malesuada. Integer facilisis faucibus quam. Aliquam erat volutpat. Morbi at erat. Aliquam placerat, est sit amet fermentum tincidunt, nisl pede vestibulum dui, at pulvinar erat orci et turpis. Suspendisse potenti. Quisque et dui quis arcu aliquet varius. Nulla massa nibh, varius eget, vulputate et, pretium ac, diam. In sit amet risus eget ante sodales pretium. Nunc turpis. Phasellus a tortor. Suspendisse potenti.

LightBox

Suspendisse leo nunc, vehicula ut, rutrum eu, mollis eu, nisl. Donec congue. Curabitur et libero. Curabitur sodales magna ultrices nunc. Aliquam vel augue ut massa luctus tincidunt. Quisque bibendum tristique ante. Suspendisse eu nisi vitae orci tincidunt euismod. Mauris est mi, suscipit vitae, viverra vitae, pharetra a, dolor. Aliquam massa. Fusce nec augue id tellus tincidunt tincidunt. Ut facilisis, purus ac varius fringilla, felis leo adipiscing tellus, ac aliquet nunc urna in diam. Nullam adipiscing felis. Etiam at nibh ut tellus porttitor dictum. Etiam sagittis bibendum neque. In id nisl.

oh man
oh man
oh man
oh man