Un Rubik’s Cube avec des propriétés CSS3

15 mai 2011

Un superbe Rubik’s Cube faisant office de menu, dessiné entièrement avec du CSS ! Voici le résultat du travail de Francesco Benanti et Maicol Zenatti, deux développeurs italiens, qui n’auraient pas pu réussir cela sans utiliser quelques propriétés CSS3.

Une création en pure CSS

Ce Rubik’s Cube est un menu et chaque petit cube visible correspond à un lien mais c’est surtout la partie CSS3 qui est intéressante car il faut dire que le design de ce casse-tête est assez complexe à mettre en œuvre avec du simple HTML/CSS. Si on jette un coup d’œil à la source de la page web, on constate que le grand cube est le résultat d’une liste à puces, chaque puce correspondant à un petit cube généré avec du CSS. Voici les propriétés CSS3 qui sont utilisées :

  • Border Radius permet d’arrondir les coins d’une bordure d’un élément HTML. Cette propriété est utilisée pour adoucir les angles des petits cubes, comme sur un vrai Rubik’s Cube.
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    
  • Gradient permet de créer des dégradés de couleur sur un élément HTML. Cette propriété est utilisée pour accentuer l’effet de perspective.
    background: -moz-linear-gradient(right,  #009900,  #006900);
    background: -webkit-gradient(linear, right top, left top, from(#009900), to(#006900));
    
  • Box Shadow permet de générer une ombre portée sur un élément HTML. Cette propriété est utilisée pour faire une ombre sur les infobulles des liens.
    box-shadow: rgba(0,0,0,.3) 2px 2px 8px;
    -moz-box-shadow: rgba(0,0,0,.3) 2px 2px 8px;
    -webkit-box-shadow: rgba(0,0,0,.3) 2px 2px 8px;
    
  • Box Sizing permet de définir comment la taille width et la taille height doivent être calculées. Cette propriété est utilisée pour inclure le padding et les bordures dans le calcul des tailles.
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    
  • Transform permet d’exécuter des transformations sur un élément HTML. Cette propriété est utilisée pour générer des rotations (rotate), des translations (translate), des déformations (scale) et des inclinaisons (skew).

    -moz-transform: rotate(15deg) skew(15deg, 15deg) translate(0, -4px) scale(1.08);
    -webkit-transform: rotate(15deg) skew(15deg, 15deg) translate(0, -4px) scale(1.08);
    -o-transform: rotate(15deg) skew(15deg, 15deg) translate(0, -4px) scale(1.08);
    

Une fois de plus, cette création entièrement en CSS nous montre à quel point l’arrivée progressive de CSS3 va révolutionner la mise en forme de nos pages web allant certaines fois jusqu’à remplacer les images. Reste à savoir comment nous allons gérer l’interopérabilité avec les anciens navigateurs, incapables de supporter cette technologie.

Requis : navigateur compatible CSS3
Démonstration : http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/uploader/images/css3-designs/css3-rubiks-cube/index.html
Licence : libre

Commentaires

  • Dardoun

    Trop nul il bouge même pas! lol.