Lightbox and Slide Show (jQuery FancyBox) in Pure CSS3
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
About two years ago I made CSS3 Action Framework and next step was to make the replica of the Fancy Box with pure CSS3, I haven't had the time to finish the project until one week ago when was "or now or never" for the project.
So what is the purpose of this project?
Modular CSS3 Fancy Box similar to original Fancy Box. By simply adding new classes to the class we should be able to control the appearance of the CSS3 Fancy Box. We should be able to control the transparency of the border, animation entry, rounded corners etc.
Example: If we have class="show fancybox rounded transparent-border" we will have rounded corner box with transparent border.
The event is triggered by :target selector showing the previously hidden HTML element (display:none) when we click the close button we put the box to its previous hidden state.
The original Fancy Box weights about 100 kb + JQuery V.S 1.5 Kb of CSS3.
My aim wasn't to compete with the Original Fancy Box but to show what can be done with little CSS3.
It works in all modern browsers. It doesn't work in IE 9.
Download this project on GitHub
Naturally this method comes with lot of limits like doesn't support Ajax calls or can't dynamically determine position of the new Box. But can be use like a simple solution in some cases. Try to understand how the CSS code works, don't be afraid to play with CSS source code and personalize the CSS code for your needs.