Guidetivist: Learn To Make a Mac OS X Folder With CSS3 & jQuery

If you use mac os x and love the folder style of mac os x and want if it in web graphics like css3 so today is ur day because i'm going to show you the tutorial how to make it using css3 so go a head and understand the tutorial and tags properly.

THE HTML

It is Very Simple Because it contains only div for the front cover and one of the back as the following code shows:

<div class="folder"> <div class="front"></div> <div class="back"></div> </div>

In the great spirit of CSS3 traditions, we are keeping the needed markup to a minimum, and we are depending on the pseudo :before and :after elements to add the finer details. See the illustration below for an example.

and here how it works and inside the #main is the contents which we make draggable bu using the jquery user interface.

HOW IT IS ILLUSTRATED IN INDEX.HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>How to Make a OSX-like Animated Folder with CSS3 | Tutorialzine </title>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />  <link rel="stylesheet" href="assets/css/styles.css" /> </head> <body> <div id="main"> <div class="folder"> <div class="front"></div> <div class="back"></div> </div> <img src="assets/48px/box.png" style="top:340px;left:100px;" alt="box" />  </div>  <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <script src="assets/js/script.js"></script> </body> </html>

THE CSS

The Most important thing is css as you see i use a embedded css style sheet "assets/css/styles.css" You Will not write it as this in your coding but first you will upload it to dropbox or any other storage site and put the url of file instead of this css coding we are using are following:

assets/css/styles.css

.folder { /* This will enable the 3D effect. Decrease this value * to make the perspective more pronounced: */ -webkit-perspective: 800px; -moz-perspective: 800px; perspective: 800px; position: absolute; top: 50%; left: 50%; z-index: 0; width: 160px; height: 120px; margin: -100px 0 0 -60px; }

After this, we will style the .front and .back divs that comprise the folder. I have grouped the rules that these elements have in common in the .folder div block:

.folder div{ width:150px; height:115px; background-color:#93bad8; /* Enabling 3d space for the transforms */ -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; /* Enabling a smooth animated transition */ -webkit-transition:0.5s; -moz-transition:0.5s; transition:0.5s; /* Disable text seleltion on the folder */ -webkit-user-select: none; -moz-user-select: none; user-select: none; position:absolute; top:0; left:50%; margin-left:-75px; }

I am using the transition property to tell the browser that it should animate between changes in the values of the other CSS properties. This will cause the folder to open smoothly when we start dragging one of the icons. Next is the front div:

.folder .front{ border-radius:5px 5px 0 0; -moz-transform:rotateX(-30deg); -webkit-transform:rotateX(-30deg); transform:rotateX(-30deg); -moz-transform-origin:50% 100%; -webkit-transform-origin:50% 100%; transform-origin:50% 100%; background-image: -moz-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); background-image: -webkit-linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); background-image: linear-gradient(top, #93bad8 0%, #6c9dc0 85%, #628faf 100%); box-shadow:0 -2px 2px rgba(0,0,0,0.1), 0 1px rgba(255,255,255,0.35) inset; z-index:10; font: bold 26px sans-serif; color: #5A88A9; text-align: center; text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1); line-height: 115px; }

This is where we set the background of the front cover, and apply the initial rotation. This leaves the back cover:

.folder .back{ background-image: -webkit-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); background-image: -moz-linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); background-image: linear-gradient(top, #93bad8 0%, #89afcc 10%, #5985a5 60%); border-radius:0 5px 0 0; box-shadow:0 -1px 1px rgba(0,0,0,0.15); } /* The top part */ .folder .back:before{ content:''; width:60px; height:10px; border-radius:4px 4px 0 0; background-color:#93bad8; position:absolute; top:-10px; left:0px; box-shadow:0 -1px 1px rgba(0,0,0,0.15); } /* The shadow */ .folder .back:after{ content:''; width:100%; height:4px; border-radius:5px; position:absolute; bottom:5px; left:0px; box-shadow:0 4px 8px #333; }

All that is left, is to define the open class on the folder. When this class is added, the front will tilt forward as a result by the larger rotateX value.

You CSS is Now Done now Move over To Jquery To Give Some Unique Transitions To Your Mac os X Folder.

JQUERY

As I Told You This is a drag & drop Jquery UI. When a drag starts, we will apply the open class to the folder which triggers the CSS3 transition.

assets/js/script.js

$(function() { var folder = $("#main .folder"), front = folder.find('.front'), img = $("#main img"), droppedCount = 0; img.draggable(); folder.droppable({ drop : function(event, ui) { // Remove the dragged icon ui.draggable.remove(); // update the counters front.text(++droppedCount); }, activate : function(){ // When the user starts draggin an icon folder.addClass('open'); }, deactivate : function(){ // Close the folder folder.removeClass('open'); } }); });

Hurrah ! You Have Made The Mac OS X CSS3 Animated Button :D

FINAL WORDS

Now You Have Made The Button The Things You Should Kept in your mind is coding if you miss a little piece of code then your whole button will not work feel free to disquss it in comment :) till now Bye See You Soon in Next Article

Saturday 28 December 2013

Learn To Make a Mac OS X Folder With CSS3 & jQuery