Comment faire un site one page et responsive : quatrième partie

Navigation

L’objectif
Un peu de HTML
Un soupçon de CSS

Voici la quatrième et dernière partie des étapes de travail amenant à la réalisation d’un site one page responsive. Pour rappel, la première partie détaillait la navigation et la mobilité, la seconde partie d’une fonctionnalité de mon site one page : une ambiance différente pour chaque section, la troisième partie parlait du portfolio. Cette partie va traiter de la présentation des membres de l’équipe, et peut comme la précédente partie être consultée en mode stand alone… C’est parti !

[button link= »http://patrickroux.ca/work/responsive » size= »large » target= »blank »]Voir le site de démonstration[/button] [button link= »https://github.com/patrickroux/Glassero » size= »large » target= »blank »]Fork on GitHub[/button]

Partie 1 : Navigation et responsive design
Partie 2 : L'ambiance par section
Partie 3 : Le portfolio et tri dynamique
> Partie 4 : Membres de l'équipe en CSS3

L’objectif

Mon objectif était ici de présenter les membres d’une équipe de manière simple : Une photo, deux comptes de réseaux sociaux, un nom et un titre.
Le rendu devait être quelque chose comme ça :

Un peu de HTML

Commençons par jeter un oeil à la structure HTML, réduite à un seul élément dans ma liste pour des questions de clarté :

<ul id="team">
  <li>
    <figure>
      <figcaption class="image">
        <img src="images/team/manager.png" alt="img01">
      </figcaption>
      <figcaption class="contactme">
        <a href="http://www.twitter.com/AdopteUnRoux" target="blank_">
          <span class="twitter"></span>
        </a>
        <a href="https://www.facebook.com/pages/Kicoenet/197680610247594" target="blank_">
          <span class="facebook"></span>
        </a>
      </figcaption>
      <figcaption class="member">
        <span class="name">John Doe</span>
        <span class="role">Project manager</span>
      </figcaption>
    </figure>
  </li>
</ul>

En termes de structure, il faut ici retenir 2 choses :

L’image doit être dans le figcaption,surtout pas en background
Les liens de contact doivent aussi être dans un figcaption

Ce qu’on va essayer de faire, c’est de provoquer lors du survol de la souris, l’illusion que les liens vers les réseaux sociaux poussent l’image pour se faire une petite place au soleil.
Pour cela, du javascript ? Nooooon, juste du bon vieux CSS !

Un soupçon de CSS

On va un peu jouer à Robin des Bois : voler au riche figcaption.image de la largeur pour la donner au pauvre figcaption.contactme.

Figcaption.contactme est tellement pauvre qu’au départ il a une largeur de zéro :

#team li figcaption.contactme{
  width: 0px;
}

Et Figcapion.image est lui tellement riche qu’il prend toute la place et à le ventre bien plein avec son image :

#team li figcaption.image{
  display: inline-block;
  width: 220px;
  height: 180px;
  text-align: center;
  display: block;
  float: left;
}
#team li figcaption.image img{
  margin: 0px;
  padding: 0px;
  height: 180px;
}

Du coup, ce qu’on va faire c’est que au survol, toujours avec cette image bien calée comme il faut, on réduit la largeur de figcaption.image et on augmente d’autant figcaption.contactme :

#team li:hover figcaption.image{
  width: 180px;
}
#team li:hover figcaption.contactme{
  width: 40px;
}
#team li:hover figcaption.contactme span{
  width: 40px;
}

Si l’on a pas oublié de mettre les bonnes transitions CSS3 comme ceci :

#team li figcaption, #team li figcaption.contactme span{
  margin: 0px;
  padding: 0px;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

Et bien on doit arrive à un résultat de déplacement tout smooth. Le reste c’est du maquillage et du CSS : tailles, couleurs, images, polices, …
Pour en consulter tous les détails, je vous renvois une nouvelle fois à la feuille de style de l’exemple : http://patrickroux.ca/work/responsive/css/default.css (recherchez $INDEX9).
C’est donc la fin de cette dernière partie. J’aurais aimé traiter du formulaire de contact , mais là il n’y a absolument rien de mystérieux car cela se fait quasiment tout seule en HTML5 ! A vous de jouer maintenant, plus aucune excuse pour ne pas avoir votre site web fait maison 🙂