logo

Cómo hacer una carpeta animada similar a Mac OSX con CSS3

En este breve tutorial, vamos a crear una carpeta similar a OSX con CSS3, utilizando transformaciones 3D, degradados y sombras de cuadro. Además, vamos a utilizar jQuery UI y sus interacciones de arrastrar y soltar para crear una demostración bastante interactiva.

HTML

El HTML de la carpeta es muy simple:solo necesitamos un div para la portada y uno para la contraportada:

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

En el gran espíritu de las tradiciones de CSS3, mantenemos el marcado necesario al mínimo y dependemos del pseudo :before y :after elementos para agregar los detalles más finos. Consulte la siguiente ilustración para ver un ejemplo.

Y aquí está la página en la que estaremos trabajando. Dentro de #main div es la carpeta y los íconos que configuraremos como arrastrables usando jQuery UI:

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>How to Make a OSX-like Animated Folder with CSS3 | Tutorialzine </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 la etiqueta del cuerpo de cierre, incluyo la biblioteca jQuery y la interfaz de usuario jQuery, junto con el archivo script.js que verá más adelante. Primero, analicemos la parte más importante:el CSS.

CSS

Para comenzar, diseñaremos el div con la clase de carpeta que viste arriba. Este es también el lugar donde definimos la configuración de perspectiva, que es importante para el efecto 3D CSS. Puedes pensar en esta propiedad como tu distancia del elemento (cuanto más cerca estés, más pronunciada es la perspectiva).

activos/css/estilos.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, diseñaremos el .front y .volver divs que componen la carpeta. He agrupado las reglas que estos elementos tienen en común en el .folder div bloque:

.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 usando la propiedad de transición para decirle al navegador que debe animar entre cambios en los valores de las otras propiedades de CSS. Esto hará que la carpeta se abra sin problemas cuando empecemos a arrastrar uno de los iconos. El siguiente es el div frontal:

.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 establecemos el fondo de la portada y aplicamos la rotación inicial. Esto deja la contraportada:

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

Todo lo que queda es definir el abierto clase en la carpeta. Cuando se agrega esta clase, el frente se inclinará hacia adelante como resultado del mayor valor de rotarX.

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

¡Excelente! Ahora agreguemos algo de jQuery para que el ejemplo funcione:

jQuery

Como mencioné anteriormente, estamos usando jQuery UI y la interacción de arrastrar y soltar para permitir que los usuarios muevan los íconos. Cuando comience un arrastre, aplicaremos el abrir class a la carpeta que activa la transición CSS3.

activos/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');
        }
    });
});

¡Y con esto hemos terminado!

Resumir

Es genial que se pueda hacer tanto con CSS3 sin mucho esfuerzo. Pero podría ser aún mejor:podría usar las API de archivos HTML5 y permitir que los usuarios carguen archivos arrastrándolos desde sus escritorios (pista:¿recuerdan este tutorial?). Estoy seguro de que ustedes pensarán en formas maravillosas de mejorar este código.