For those using WebKit based browsers (Safari and Chrome), CSS3 effects and properties can help you create fast, simple modals by using transforms, animation, and some subtle design cues.
Demo works best in Safari 4 or Chrome 5.
Uses CSS3 adjacent sibling selector to produce a Clickbox Gallery. A series of images can be viewed using ‘Previous’ and ‘Next’ buttons that popup when hovering the images.
Demo works best in For Firefox, Opera, Safari, Chrome, IE8, SeaMonkey and Floc
Futurebox version 3 introduces a new technique on showing and hiding modals using the checked pseudo-class rather than target. It also demonstrates loading content within a futurebox modal.
A tutorial written in french! Only CSS3 and HTML5 languages are used right here. Lightbox effect best works for Webkit. Tab key on the keyboard can be used to jump to next image.
Targeting a link directly to the URL with the hash tag will trigger the “LighterBox” onload.
The core functionality, the part of the lightbox that is so revolutionary, is the ability of CSS to recognize a click event. To do so is a hack, but uses valid css3 and html5.
Fully supported by firefox 4.0+, safari 4.0+ and chrome (any version)
This gallery is fully functional in webkit (tested & developed under Chrome). Main functionality is also preserved in Firefox, but -moz-transition doesn’t work well if animated elements aren’t the ones that get :focused or :hovered.
A CSS3 Overlay system for modal dialogs.
This tutorial aims to showcase a method of displaying content based on the lightbox, which is web accessible and (excluding Internet Explorer) will require no scripting at all.