Pure CSS LightBox, no javascript
Posted on Thursday, February 21st, 2008 at 10:07 am
Current Javascript solutions for LightBoxes are kind of cumbersome, bloated, and CPU-intense.
Unsatisfied with the current state of LightBoxing, I developed a pure, organic, CSS-powered LightBox. Absolutely zero javascript. All of this under 1kb.
Click here to preview the CSS LightBox
The core of Multi-state CSS is the
Unsatisfied with the current state of LightBoxing, I developed a pure, organic, CSS-powered LightBox. Absolutely zero javascript. All of this under 1kb.
Click here to preview the CSS LightBox
The core of Multi-state CSS is the
:target pseudo class. When a user clicks a page-anchor the :target pseudo class is activated, revealing the lightbox element. Here's the code:
div.lb {
display: none;
}
div.lb:target {
display: block !important;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
background: url('screen.png');
position: fixed;
padding: 2em;
}
Search
Tag Cloud
ajax as3 businesscard captcha chumby css design fap fapi flash hack hotlinking interface javascript jquery json lightbox myspace pipes site translation typography usability webservice wigits xss yahoo