Como crear carpetas animadas como las Mac OSX con CSS3

En este pequeño tutorial vamos a ver como crear carpetas animadas como las de OSX con CSS3, utilizando transformaciones 3D, degradados y box-shadows. Además, vamos a utilizar jQuery UI y sus interacciones drag & drop para desarrollar una demo muy, pero que muy interactiva.

HTML

El HTML de la carpeta es tan simple como puedes ver un poco más abajo, solo necesitamos un div que actúe como front y otro como back.

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

Como siempre, configuramos el markup necesario al mínimo, y dependemos de los pseudo elementos :before y :after para añadir los detalles más meticulosos. En la imagen de más abajo puedes ver un ejemplo de todo esto que te estamos explicando.

Y aquí tienes la página en la que estamos trabajando. Dentro del div #main está la carpeta y los iconos que serán configurados como arrastrables utilizando jQuery UI.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a OSX-like Animated Folder with CSS3</title>

        <!-- The jQuery UI Styles -->
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />

        <!-- Our stylesheet -->
        <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" />
            <!-- More icons here .. -->

        </div>

        <!-- JavaScript Includes -->
        <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>

Además, antes de cerrar la etiqueta body vamos a incluir ka librería de jQuery y jQuery UI, junto con el archivo script.js que veremos un poco más adelante. Primero, vamos a hablar sobre la parte más importante, el CSS.

CSS

Para empezar, vamos a darle estilo al div de la carpeta con la clase que puedes ver más abajo. Aquí también definiremos la configuración de la perspectiva, que es importante para el efecto 3D del CSS. Puedes pensar en esta propiedad como la distancia desde el elemento (cuanto más cerca estés, más pronunciada será la perspectiva)

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;
}

Después de esto, daremos estilo a los divs .front y .back que comprenden la carpeta. He agrupado las reglas que estos elementos tienen en común en el bloque div .folder:

.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;
}

Estoy utilizando la propiedad de transición para indicarle al navegador que debe animarla cuando cambie algún valor de las propiedades de CSS. Esto hará que la carpeta se abra sin problemas cuando arrastremos dentro alguno de los iconos. Este es el div front:

.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;
}

Aquí es donde definiremos el background del front cover, y donde aplicaremos también la rotación inicial. Así se quedaría el 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;
}

Lo único que queda ya es definir la clase open de la carpeta. Cuando insertes esta clase, el front se inclinará hacia adelante como resultado de un mayor valor del rotateX

.folder.open .front{
    -moz-transform:rotateX(-50deg);
    -webkit-transform:rotateX(-50deg);
    transform:rotateX(-50deg);
}

¡Estupendo! Ahora vamos a ver la parte final, esa parte en la que hacemos un poco de magia. Ya sabéis, el jQuery.

jQuery

Como he mencionado anteriormente, vamos a utilizar jQuery para que haya una interacción drag & drop para permitir a los usuarios mover iconos dentro de las carpetas. Cuando el drag comience, aplicaremos la clase open a la carpeta que activará la transición de CSS3

$(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');
		}
	});
});

¡Y eso es todo! Es genial todo lo que se puede hacer en CSS3 sin mucho esfuerzo. Pero podrías mejorar esta demo haciéndola incluso más cool, podías insertar la demo de HTML5 File API para permitir a los usuarios subir ficheros arrastrándolos desde sus escritorios. Estoy seguro que ya habréis ideado formas maravillosas de mejorar el código. ¿Nos las contáis?

Fuente: tutorialzine

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR