A mon grand désespoir, celle que j'aime a le cœur chaviré par un autre. Lors de la découverte de ce dramatique état de fait, j'ai opté pour une position offensive afin de repousser le vil coquin qui avait envouté le cœur de ma Belle. Le but de cet article est de vous en dresser le portrait en CSS3 (car je n'ai pas de photo du coupable).
Inspiration et outils
Le modèle utilisé pour le dessin est le logo de The Dark Knight.
Afin de réduire le nombre de divs, j'ai opté pour les pseudo-sélecteurs :before et :after en m’inspirant d'un vieux tweet de Chris Coyer. Et en effet, cela va vraiment arranger nos affaires.
@Stephen_Greig Pretty neat! Would be neat to try and use just one div, and the :before/:after.
— Chris Coyier (@chriscoyier) 27 mai 2011
La coloration reste le point important pour avoir un rendu aussi proche que possible de l'original. Sinon, c'est du flat design et cela n'a pas vraiment d'intérêt ici. J'ai utilisé cet excellent générateur online pour obtenir l'effet dégradé.
Navigateurs supportés
CSS3 est supporté par les navigateurs modernes. Ceci dit, et même après la grosse mise à jour d'IE9 par Microsoft, il peut y avoir des erreurs d'affichage sur ce navigateur.
Retenez simplement que IE9 du mal à reconnaitre certaines propriétés CSS comme border-radius lorsque l'on utilise :before et/ou :after.
Comme toujours, le pauvre IE8 est totalement incapable d'afficher convenablement ces propriétés CSS.
Le Mockup
4 div sont utilisées pour créer la forme générale (en fait, une div principale "batman-logo" et 3 pour délimiter les zones de travail (gauche, droite et haut) :
<div id="batman-logo">
<div id="left-white"></div>
<div id="right-white"></div>
<div id="top-white"></div>
</div>
On ajoute ensuite à ces div nos pseudo sélecteurs pour créer des pseudo-éléments que l'on travaillera ensuite pour affiner la forme obtenue précédemment
Le CSS3
On attaque ici le vif du sujet. Nous allons utiliser les propriétés border-radius pour créer les formes elliptiques et la propriété transform pour retourner et positionner correctement ces formes.
#top-white {
width:12px;
left:228px;
border-left:12px solid transparent;
border-right:12px solid transparent;
border-top:20px solid #fff;
}
#top-white:before {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:30px 10px 10px 30px / 80px 50px 50px 50px;
top:-65px;
right:18px;
-moz-transform:rotate(5deg);
-webkit-transform:rotate(5deg);
-o-transform:rotate(5deg);
}
#top-white:after {
content:"";
position:absolute;
width:65px;
height:77px;
background:#fff;
border-radius:10px 30px 30px 10px / 50px 80px 50px 50px;
top:-65px;
left:18px;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-o-transform:rotate(-5deg);
}
Dégradé CSS3
Le code CSS requis pour obtenir le dégradé n'est vraiment pas volumineux, mais il est très souple et relativement simple une fois que l'on se souvient de la syntaxe.
background-image: -moz-linear-gradient( /* Préfixes spécifiques du navigateur */
left bottom, /* Point de départ du dégradé */
rgb(72,84,92) 0%, /* première couleur et point de départ */
rgb(25,26,26) 63%, /* seconde couleur et point de départ */
rgb(26,26,26) 86%); /*troisième couleur et point de départ */
Quelques explications. Pour commencer, je rappelle que gradient est une valeur de la propriété background-image et non une propriété CSS3. Ceci étant dit, nous déclarons le type de dégradé sans oublier d'indiquer le préfixe du navigateur (ici -moz-linear-gradient). Ensuite, nous déclarons l'angle, qui va du bas à gauche vers le haut à droite, avant de finalement déclarer les couleurs à utiliser. C'est finalement assez simple ! Notez que l'on peut également utiliser des codes hexadécimaux plutôt que des valeurs RVB, les deux fonctionnant de la même manière. Un petit convertisseur bien pratique vous aidera à les convertir.
Propriété Box-Shadow
Pour finir, j'ai ajouté une div "lighting" pour obtenir un effet d'éclairage. J'ai utilisé border-radius pour créer un cercle très subtile avec une très faible valeur d'opacité (0.02). J'ai ensuite utilisé la propriété box-shadow pour créer un flou blanc #fff autour de ce cercle. On peut sans doute forcer un peu ici pour accentuer le halo. Ce n'est pas révolutionnaire, j'en conviens, mais cela donne une idée des possibilités d'utilisation de la propriété box-shadow.
#lighting {
width:150px;
height:150px;
background:#fff;
border-radius:75px;
left:100px;
top:-10px;
opacity:0.02;
box-shadow: #fff 0 0 70px;
-webkit-box-shadow: #fff 0 0 70px;
-moz-box-shadow: #fff 0 0 70px;
}
{loadnavigation}
