Recréer le dock de Mac OS (partie 1)

RecreerLeDockMacOSAvecJqueryEtCSS3

Aujourd’hui nous allons recréer le dock de Mac OS via CSS3 dans la première partie, puis avec Jquery pour ajouter quelques petites options. Durant toute la procédure, je ferais en sorte que le dock soit compatible sous Firefox et également avec les navigateurs Webkit (Chrome, Safari et bientôt Opéra). Pour ceux qui ne savent pas ce qu’est le dock de Mac OS, ça ressemble à ceci :

Dans la première partie de ce tutoriel, nous allons nous focaliser sur la création visuelle du dock et son animation basique : création des icônes et mouvement au survol. Nous devrions obtenir le résultat que vous voyez sur l’image suivante à la fin. Sachez que le code de cette partie est repris de ce site. Il a juste été revu et adapté et certains détails ont été simplifiés. La suite du tutoriel (qui arrivera plus tard) se basera donc sur ce code auquel nous ajouterons pas mal de fonctionnalités qui elles sont toutes sorties de mon cerveau.

Tout d’abord, concernant les icônes utilisées, une petite recherche google permet de les retrouver très facilement. N’étant pas libres de droit, je vous laisserai les chercher. Sachez tout de même que n’importe quelle image peut convenir. Si j’ai utilisé les icônes « habituelles », c’est plus pour constater le rendu final par rapport au dock original. Toutes les icônes doivent être des png transparents de façon à posséder un rendu relativement clair et joli à l’œil. Prêt ? Alors c’est parti !

On va commencer par la structure html histoire de pouvoir commencer à travailler tranquillement.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Dock Mac OS X</title>
    <link rel="stylesheet" href="css/global.css" />
</head>
<body>
    <img class="background" src="img/background.jpg" onmousedown="return false;" />
    <div id="dock">
        <!-- Tout le code ici -->
    </div>
</body>
</html>

Et le code CSS « de base » concernant le dock. Histoire de, on va le centrer en bas de notre page web. A vous de mettre un fond à votre page pour un aperçu plus jovial à l’arrivée. Pour ma part, j’ai choisi un des fonds d’écran officiel de mac OS. Pour que cette image ne bouge pas, je l’ai juste placée dans le fichier html et l’ai positionnée de manière absolute, de façon à ce qu’elle ne bouge pas. Le « onmousedown » permet juste de faire en sorte que si on tente de faire un cliquer déposer de l’image, cela ne soit pas possible. Au moins ça reste une image de fond qui ne viendra pas nous déranger à tout bout de champ.

body {
    margin:0;padding:0;
    height:100%;width:100%;
    font-family: "lucida grande";
    overflow: hidden;
}

.background {
    width:100%;
    height:100%;
    position:absolute;
    overflow: hidden;
}

#dock {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font:14px 'Lucida Grande';
    z-index: 10;
}

Maintenant, passons à la structure html des éléments qui composeront le dock.
Tout consiste en une liste contenant à chaque fois un lien (ancre ici) avec entre balises un élément span correspondant au texte qui s’affichera au survol et une image qui sera l’image à afficher. L’exemple ci-dessous montre la structure pour deux images. A vous d’adapter pour en mettre autant que vous voulez…

<ul>
    <li id="dock-finder">
        <a href="#finder">
            <em><span>Finder</span></em>
            <img src="img/dock-finder.png" />
        </a>
    </li>
    <li id="dock-twitter">
        <a href="#twitter">
            <em><span>Twitter</span></em>
            <img src="img/dock-twitter.png" />
        </a>
    </li>
</ul>

Désormais, place au CSS, c’est là-dedans que nous allons tout faire véritablement.

#dock ul {
    position: relative;
    display: inline-block;
    padding: 0 5px;
    margin: 0;
    background: url(../img/dock.png) repeat-x bottom;
}

#dock ul:before, #dock ul:after {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 31px;
}

#dock ul:before {
    left: -31px;
    background: url(../img/dock-l.png) no-repeat left bottom;
}

#dock ul:after {
    right: -31px;
    background: url(../img/dock-r.png) no-repeat right bottom;
}

Première chose, on se charge de mettre en place correctement notre liste. On fait en sorte que la liste d’image ne prenne que la taille dont elle a besoin et que le fond ne vienne pas se placer sur toute la longueur de la page. C’est le rôle de la propriété : display:inline-block. On règle ensuite les marges interne pour que notre liste soit légèrement décalée à droite et à gauche (que les bords ne soient pas trop près de l’image de fond à droite comme à gauche). Plus qu’à placer l’image de fond, faire en sorte qu’elle ne se répette que sur l’axe horizontal et qu’elle soit placée en bas du conteneur.

On se charge ensuite de placer avant et après notre liste (grâce aux sélecteurs :before et :after) un contenu vide d’une longueur de 31 pixels qui sera là pour accueillir les deux images qui permettront de borner la liste et de lui amener ses bords « courbés » (voir première image).

Du coup, visuellement, vous devriez obtenir une liste en hauteur assez moche… On va remédier à ça out de suite !

#dock li {
    display: inline-block;
    position: relative;
    margin: 0 1px;
    margin-bottom: 15px;
}

Ha, c’est quand même déjà autre chose ! Toutes nos images sont sur une ligne (merci au display:inline-block) et positionnées correctement par rapport à l’image de fond grâce à la propriété margin. Maintenant, on va ajouter l’effet de reflet sur les images qui rend vraiment bien (pour les navigateurs webkit en tout cas).

#dock li {
    -webkit-box-reflect: below -16px -webkit-gradient(
        linear, left top, left bottom,
        from(transparent),
        color-stop(91%, rgba(255, 255, 255, .1)),
        color-stop(91.01%, transparent),
        to(transparent)
    );
}

Forcément c’est un peu plus complexe à comprendre. Ce qu’on vient de faire, en gros, c’est de créer un masque transparent de l’image au dessus. On le projete en dessous avec les règles suivantes : de transparent à une opacité de 10% de 0 à 91% de l’image, et retournant au transparent de 91.01% à 100%. Cela nous permet d’avoir un effet vraiment très léger mais qui une fois fait, donne un rendu plus qu’acceptable.

A ce stade donc, votre dock devrait ressembler à l’image juste en dessous (tout dépend de vos images et de leur taille actuelle bien entendu (ne vous inquiétez pas pour la taille, on y reviendra dans pas bien longtemps)). Le rendu actuel est sous Safari. Pour la suite, je me contenterais de Firefox que j’utilise au quotidien.

Maintenant, on va s’occuper du texte qui fait tache comme ça.

#dock a {
    display: inline-block;
    cursor: default;
    outline: none;
}

#dock em {
    position: absolute;
    top: -34px;
    left: 50%;
    width: 150px;
    margin-left: -75px;
    text-align: center;
}

Les propriétés sur les liens (a) sont juste ici pour qu’on ait plus besoin de s’embêter avec les bordures potentielles sur les images (internet explorer principalement et enlever le pointeur (curseur) sur les images dont nous n’avons pas besoin ici si nous voulons un rendu plus dans la logique du dock original.

Derrière, on se charge de positionner notre texte (entre balise em comme il aurait pu être ailleurs. Le em est présent pour avoir une « épaisseur » supplémentaire dont nous avons absolument besoin pour la suite. On pose donc notre texte juste au dessus de l’icône, on règlera les décalages à gauche/droite potentiels plus loin. Testez et vous devriez voir apparaitre vos liens positionnés à peu près correctement.

#dock em span {
    display: inline-block;
    padding: 5px 12px;
    font-size: 14px;
    font-style: normal;
    color: #FFF;
    background: #000;
    background: rgba(0, 0, 0, .6);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .9);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px;
}

Là, c’est vraiment tout bête, on se charge juste d’ajuster le texte visuellement, un fond arrondi noir transparent, une couleur blanche, un style normal (pour enlever l’italique de la balise em) etc. Le rendu est quand même autrement plus sympathique désormais non ?

#dock em:after {
    content: " ";
    position: absolute;
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid rgba(0, 0, 0, .6);
    border-bottom: none;
}

Pour cette partie on aurait pu se charger de mettre une simple image mais pour pimenter un peu et surtout pour s’amuser, on va ajouter une sorte de flèche juste en dessous du texte en CSS. On la positionne pile au centre en dessous (absolute), et on lui donne la forme qu’il faut avec les border.

Le souci actuel, c’est que nos textes sont affichés en permanence. Nous, on veut simplement faire en sorte qu’il soit affiché au survol. Du coup nous devons ajouter la propriété display:none; dans notre bloc css #dock em. Ensuite, on ajoute le code suivant :

#dock li:hover em {
    display: block;
}

Actualisez et hop, les textes ont disparu et n’apparaissent désormais que sur le hover. Magie magie.

Dernière étape maintenant, la gestion de l’agrandissement des images au survol de l’icône. Sachez que le plus dur a été fait, ici, c’est vraiment tout bête :

#dock img {
    width: 50px;
    height: auto;
    border: none;
    -webkit-transition: width .2s, height .2s;
    -moz-transition: width .2s, height .2s;
    -o-transition: width .2s, height .2s;
}
 
#dock li:hover img {
    width: 75px;
}

#dock li:active img {
    opacity: .9;
}

Tout d’abord, on donne une taille identique à toutes nos images histoire de tout harmoniser (je vous avais dit qu’on y viendrait plus tôt). On enlève les bordures potentielles (souvenez-vous qu’Internet Explorer peut-être vraiment pénible sur ce point). On ajoute les transition qu’on veut réaliser et on a plus qu’à changer la taille de l’image sur le hover. Dernière étape, on fait en sorte de légèrement diminuer l’opacité si l’image est cliquée. Ceci fait, on actualise et tadam :

La suite sera là dans très peu de temps. Nous ajouterons les fonctionnalités suivantes :
– La petite icône bleutée qui montre qu’une application est ouverte ou non (avec la possibilité de l’ouvrir ou de la fermer avec une petite animation et un clic droit personnalisé ;
– L’affichage des dossiers de droite et leur « développement » sous différents formats : pile, liste, fichiers… ;
– Et peut-être qu’un jour je vous montrerai comment réaliser toute l’interface de Mac OS en html, css et Javascript (Jquery) comme je l’ai déjà en partie fait sur l’image ci-dessous (histoire de teaser un peu) :

Envie de partager cet article ? Google+

Date de sortie : 17 mars 2013
Auteur : Bardyl
Consultations : 2294
Commentaires : 0
Catégorie : Webdesign

Bardyl, une histoire de pousin.

Poussin de son état, Mathieu Menut (alias Bardyl ou Bardylette suivant les lieux) est un simple passionné du Web depuis de nombreuses années. Mathieu aime tout ce qui attrait au développement, au graphisme, référencement... Il s'intéresse à plus ou moins tout et prône la généralisation des 35 heures par jour.

Twitter : @Bardylette / web : menutmathieu.fr