Futurebox, lightbox without the JavaScript
I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox.
Update: New version of futurebox has been released.
Have updated the demo so now the entire screen area is clickable to remove the Futurebox. I have also refactored the mark-up so it is a bit leaner. The previous demo can see here. Ran it through Browsershots to see what browsers it works in.
Futurebox?
I’ve aptly called it Futurebox because this is only a proof of concept, it only works in the better browsers but never the less is a cool look at a useful CSS3 technique. The following browsers have been tested and will work with this example, it may also work in earlier versions of the browsers listed but I have not yet tested in them.
- Firefox 1.5+
- Safari 3.2+
- Chrome 2+
- Opera 9.5+
How does it work?
As mentioned above the whole thing is only possible due to the CSS3 :target pseudo class. It all works by getting the anchor link in a URI which can be referenced in your CSS using :target. If an element has an id that matches the URI the styles applied to it will come into effect. I’ll break down the above example so we can get a better look.
The xhtml
<a href="#futurebox_img1"> <img src="gr_ninja-attack_med.gif" width="100" height="102" alt="The CSS Ninja" id="futurebox01" /> </a> <div class="overlay" id="futurebox_img1"> <a href="#close" title="Close future box"> <img src="gr_cssninja_lrg.png" alt="The Css Ninja" width="600" height="639" /> </a> </div>
Pretty simple mark-up we have our thumbnail image which links to an anchor link. The overlay image has the id that we are linking to on the thumbnail. The overlay mark-up has 2 divs around the image to horizontally and vertically centre the image. We have another anchor tag around the large image this is so we can “close” the overlay.
The CSS
html, body { height: 100%; } .overlay { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; z-index: 999; background: rgba(0,0,0,0.7); } .overlay a { display: table-cell; vertical-align: middle; text-align: center; } .overlay_container img { background: #ffffff; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } .overlay:target { display: table; }
The overlay class is position: absolute so it can sit over the content, it is expanded to 100% width and height and has a background: rgba() applied so we get that nice transparent overlay look. Not all browsers support rgba that work with this example, for those no background colour will appear. Initially it is set to display: none.
overlay_container class The anchor tag has display: table-cell so it will act like a table cell, vertical-align: middle is applied give us the ability to vertically centre anything within this container and finally text-align: center so we can horizontally centre any inline elements. The entire screen is now clickable by styling the anchor this way making it more inline with how lightbox works.
The image has padding, background and for the supporting browsers we set rounded corners using border-radius. Since images are naturally inline elements, we can avoid setting margin: 0 auto and a width on the image to centre it (text-align: center on the previous container handles that for us) making this technique more flexible.
Finally the magic that allows this technique to work is very simple we target the overlay we want to display by using :target, the user clicks a thumbnail which has a link to #futurebox_img1 the :target pseudo class will look for any elements with the id of futurebox_img1 and set it to display: table, for a more in depth look at the css table property check out my previous article. We use table rather than block so the styles setup on the overlay_container class will allow us to horizontally & vertically centre the image.
Further reading
Think Vitamin has a good write up on the :target pseudo class – Stay on :target.
Arve Bersvendsen, an Opera developer, has a good proof of concept on his personal site to change the stacking order of draggable windows using :target.
CSS3.info has a good compatibility table showing browser support for CSS3 selectors.
Comments
Trackbacks
-
[...] Futurebox, lightbox without the JavaScript | The CSS Ninja – All things CSS, Javascript & xhtmlthecssninja.com [...]
-
popurls.com // popular today…
story has entered the popular today section on popurls.com…
-
[...] Futurebox, lightbox without the JavaScript | The CSS Ninja – All things CSS, Javascript & … "I was playing around the other day and had a bright spark. Is it possible to do the “lightbox” effect without JavaScript? The answer is yes! Thanks to the :target pseudo class. Without further ado I introduce Futurebox." Pretty awesome tool. (tags: css3 css webdesign lightbox) [...]
-
[...] La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3. [...]
-
[...] La gente de TheCSSNinja ha desarrollado un sistema para conseguir emular el efecto lightbox mediante CSS3. [...]
-
[...] Futurebox, lightbox without the JavaScript | The CSS Ninja – All things CSS, Javascript & … — 12:34am via [...]
-
[...] Visiter le Site officiel [...]
-
[...] Futurebox è una specie di lightbox ma senza javascript, 35 plugin per Firefox utili ai web designers e [...]
-
[...] Une version de la lightbox sans javascript : http://www.thecssninja.com/xhtml/futurebox [...]
-
[...] è riuscito a trovare un’alternativa utilizzando solamente codice HTML e [...]
-
[...] proyecto se llama FutureBox y tiene muy buena pinta, podéis ver una demo totalmente [...]
-
[...] Futurebox, lightbox without the JavaScript Triple Block [...]
Using CSS is a good concept, although AJAX really turns it up some notches with various types of content you can put in a modal box like this. Ya know, larger images (not to mention if you downloaded all big images within a single request it would be kinda heavy), forms, other HTML, etc.
Either way, the concept is really good. Congratulations, perhaps this idea will be taken into account for other purposes.
José Mota, June 20th, 2009Very nice work!
Jan Hančič, June 20th, 2009I see one problem though: big images are loaded even if the user will not see them (he will not click on the thumbnail), which slows down the page load …
And no graceful degrading off course
It also breaks the back button
the concept is proven though.. keep hacking
Jedediah Smith, June 21st, 2009Thanks for all the comments.
Most definitely, JavaScript would be the obvious answer to really make this something special and enhance its capabilities, but I really only wanted to prove it could be done without it.
Yeah that would be an issue, but this could be fixed using JavaScript to dynamically load the images. The core concept is still kept in tack.
I guess this could be seen as both a benefit and an annoyance at the same time. On one hand you can scroll back through the images with the back button, on the other you might just want to get back to the last page and you have to go through all the images you looked at again.
The Css Ninja, June 21st, 2009Great demo. Kinda surprised by this :target feature, didn’t know about it. The only problem I see right now is not being able to go back by clicking on the black transparent zone.
Jeremy, June 21st, 2009The fact that it loads all the big images is not that harmful. And as you said, you can use JS to dynamically load them and still have the CSS feature working w/out JS.
Plus, I think being able to go back with the back button is a benefit.
Very good point, I’ve updated the demo and the whole entire area is clickable and will close the Futurebox now. Plus I refactored some of the mark-up so it’s a bit leaner.
The Css Ninja, June 21st, 2009doesnt work in ie6
klojniewski, June 21st, 2009Excellent concept and I’m excited about it, but your demo doesn’t work for me when I try to close the image. All that happens is horizontal and vertical scroll bars appear when I click to close.
Firefox 3.0.11
ThatWebGuy, June 21st, 2009FYI doing some further testing of the demo:
Firefox: Not working
ThatWebGuy, June 21st, 2009IE8: Not working (or in compatibility mode)
IE7: Not working
IE6: Not working
Chrome: Works
Safari: Works
Opera: Works, but no transparancy
@ThatWebGuy –
The Css Ninja, June 21st, 2009Which version of Firefox are you using?Should of read your inital comment I’m using 3.0.11 on Vista and it works fine, I do get the scroll bars but the overlay disappears along with the scroll bars once clicked. I’ve tried on my machines (Vista & XP) v1.5, 2.0.0.20 & 3.0.11 and it works except for the transparency on v1.5 & 2. IE was never going to work as it doesn’t support any CSS3. Opera9.510 beta and up support rgba transparency.I’m on my laptop this time and it works fine. Very odd. Both machines are same version of Firefox on Windows 7. I guess something strange was happening on my other machine. Nice Work BTW.
ThatWebGuy, June 21st, 2009hi man,
ms ie7 does not work
gilles, June 21st, 2009opera 9.64 ok
Love this demo have seen another version that I am currently using however, with the images, if you change the markup slightly to be…
<a href="#close" title="Close future box" rel="nofollow"></a>Then change the display:table to the loading div and just set the overlay to display:block… Set a loading image to the center of the anchor tag…
Cezz, June 23rd, 2009Sorry about double post but my point above is that if you set the image as a background then it will only load once the div is shown and wont load massive amounts of images that are hidden.
Cezz, June 23rd, 2009Yeah I have looked at that myself, doing background instead, and you get the benefit of lazy loading. You do however lose the ability to apply the border-radius style but definitely a good point.
The Css Ninja, June 24th, 2009This doesn’t work Pure CSS in IE but it could be made to through behaviors. All in all, it’s a very good proof of concept. The only true limiting factor is the back button pollution, which unfortunately cannot be alleviated since it’s at the core of how this works.
Chris Pratt, June 26th, 2009firiend this is very nice . but its have a very little probs. its wasn’t work in the ie 7.0
neeraj, July 17th, 2009You should be able to add Internet Explorer support through [IEs horrible and proprietary] CSS Expressions.
We have this code on our site (with your CSS lightbox) to add IE support.
^The only problem is it doesn’t work with IE8 as they’ve removed CSS expressions from 8.
Acrylic Style, August 3rd, 2009really nice presentation…
designiks, December 1st, 2009very nice, i love this, it works very well and have had no problems, the one thing that i am having trouble with is getting a discription of the image to appear in below the image in the overlay.
If you could help that would be great thanks.
Aarron, December 9th, 2009I’m working on Futurebox v2 which adds more functionality, including having a small description appear below the image. Article will be up soon so stay tuned.
The Css Ninja, December 9th, 2009excellent that sounds awesome, can you give more on the date of release and additional functions
thanks
Aarron, December 9th, 2009Sure, these will be some of the following features:
Lazy loading
Image descriptions
Keyboard navigation
Next and previous buttons
There’s still a bit I need to work on so it’s hard to give a firm release date.
The Css Ninja, December 9th, 2009You should add CSS transitions to v2.
Currently only Chrome and Safari support them, but Firefox will be getting support for the feature in 3.7 and Opera will be getting support in it’s next release.
And it’ll make up for the lack of Lightbox style animation.
Hugh Isaacs II, December 11th, 2009Yes that’s on the list of potential things to add to it.
The Css Ninja, December 11th, 2009You should also have a look into getting it to work in IE, I believe that if you did this it would make the code a lot better and more efficient.
Aarron, December 11th, 2009Hey there, for the past few days I’ve been looking into this as well. Then, when I was done, I decided to Google it and find your project. It’s essentially the same as mine. I developed mine a bit further and made it work for all major browsers (Chrome, Opera, Firefox and IE7 and 8). If you are interested, you might want to take a look at it, or throw me an email.
http://www.martijngp.nl/development/csbox/csbox.html
MartijnGP, December 16th, 2009@MartijnGP – Nice work looks good.
Although if JavaScript is disabled in IE the expression you’re using doesn’t work. Come IE9, which I imagine won’t have compatibility mode, this will break as I’m sure you’re aware expressions have been removed.
The Css Ninja, December 16th, 2009I agree i does look good, but i am a fan of you work ninja and work like to continue useing to stuff and cant wait for the V2 of Futurebox
Aarron Tame, December 16th, 2009I can’t figure out how to use it. I think I’m doing the “HTML” version wrong.
Bernadette, January 27th, 2010