Studio moh

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 :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;
}

Related posts

2 comments

  1. Justin

    Comment from Justin

    Posted on Tuesday, July 22nd, 2008 at 11:51 am

    How could I make this work in ie6 - I know that ie 6 does not support .png files but the light box ( minus the .png ) will not pop up on click.
  2. DekenFrost

    Comment from DekenFrost

    Posted on Thursday, July 3rd, 2008 at 1:17 am

    neat .. makes me wonder why people would want to use ajaxified/javascript lightboxes in the first place ..

Reply to this post

What your friends call you.

A valid email address is required and will link to your Gravatar. Your email won't show up online.

A link to your personal website or blog. (This is optional).

Use this space to write your response. Simple HTML is allowed: <a href=""></a>, <b></b>, <u></u>, <i></i>, and a few more. Off-topic posts will be moderated.

Robots don't know my first name, but you should.

Search

Tag Cloud

Feeds