{Carrer web log}


Blog about web design & development

CSS3 Fancy Box

Monday, February 13, 2012 { 7 Comments }

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 best part is it is only 1,5Kb of CSS3. No images (even the close button is made with CSS3). Also there is no single line of javaScript.

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.

Demo1

Demo2

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.


7 Responses to “CSS3 Fancy Box”

  1. // Anonymous Pim VV // 2/13/2012

    Very nice CSS3 stuff here!
    Though I think it's a disatvantage browsers see these changes as a 'new page'.

    Try going back with the 'previous page' buttons of your browser and you will notice the browser is rewinding the animation.  

  2. // Blogger Hugh Isaacs II // 2/13/2012

    You should use CSS3 :checked instead of :target to implement this to evade the browser history issues.  

  3. // Blogger Vladimir // 2/13/2012

    @Hugh: I didn't do any tests but I think that :checked is currently supported just in Opera?  

  4. // Anonymous Anonymous // 2/14/2012

    Doesn't seem to be working properly in Firefox 9.0.1. Anyway, I *like* that the box goes away when you click the back button. All lightbox implementations break the browser's navigation controls because the "Back" button takes you two steps back in your navigation rather than one (clearing the image and going back to the page).  

  5. // Anonymous Logo Design // 2/15/2012

    These are so useful stuff. it will gonna more useful to the designers. thanks for share :)  

  6. // Anonymous Compare Companies // 2/15/2012

    Great resource of graphic designing. thanks for share :)  

  7. // Anonymous Vladux // 9/07/2012

    Awesome stuff, am learning CSS3 and I made something like this, but I think this is much better, easy way.

    Thanks for resources. Big ups!  

Post a Comment

<< Home

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad
 

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License