Bienvenue dans cette nouvelle vidéo où aujourd'hui je vous propose de pratiquer un peu le CSS à travers un petit exemple concret : une topbar responsive. Pour suivre cette vidéo vous pouvez copier le projet disponible sur figma.
Les difficultés
Comme vous pouvez l'imaginer, j'ai glissé quelques petites subtilités au niveau de ce design afin de vous faire réfléchir et pratiquer et voici quelques contraintes à respecter pour pimenter le tout :
-
On essaiera de limiter au maximum le nombre d'éléments HTML qui sont nécessaires à la reproduction de ce design.
-
On essaiera d'utiliser une structure qui est logique d'un point de vu sémantique (on utilisera par exemple des listes pour représenter la navigation).
-
Enfin, on utilisera seulement du CSS, pas d'image (sauf pour les icônes) ni de JavaScript pour le moment.
La structure HTML
Au niveau de la structure HTML nous allons séparer nos deux éléments de navigation dans deux listes distinctes. Ce choix a du sens d'un point de vue sémantique mais nous simplifiera aussi la vie lors de l'intégration car ça nous permettra de mieux séparer les deux éléments.
<nav class="topbar">
<div class="topbar__container">
<ul class="topbar__infos">
<li>
<svg class="icon">
<use xlink:href="images/sprite.svg#phone"></use>
</svg>
06 20 00 00 00
</li>
<li>
<svg class="icon">
<use xlink:href="images/sprite.svg#print"></use>
</svg>
04 44 56 45 20</li>
<li>
<svg class="icon">
<use xlink:href="images/sprite.svg#mail"></use>
</svg>
email@domain.fr
</li>
</ul>
<ul class="topbar__links">
<li><a href="#">
<svg class="icon">
<use xlink:href="images/sprite.svg#edit"></use>
</svg>
S’inscrire
</a></li>
<li><a href="#">
<svg class="icon">
<use xlink:href="images/sprite.svg#key"></use>
</svg>
Se connecter
</a></li>
<li class="topbar__lang"><a href="#">Fr</a></li>
</ul>
</div>
</nav> Le container
La première chose que l'on remarque sur ce design est que le menu n'est pas élargi sur toute la largeur de l'écran mais est placé dans un conteneur centré de 1000px. Pour intégrer ce conteneur nous allons simplement utiliser la propriété max-width et des marges automatiques sur les côtés.
.topbar__container {
max-width: 1016px;
margin-left: auto;
margin-right: auto;
}Le fond
Le fond est un petit peu particulier, surtout sur les grandes résolutions. En effet, la couleur de fond change entre la partie droite et gauche de la barre. Pour résoudre ce problème ma solution est d'utiliser un dégradé linéaire avec une séparation nette au milieu.
@media only screen and (min-width: 600px) {
.topbar {
font-size: 14px;
background: linear-gradient(
to right,
var(--topbar-color),
var(--topbar-color) 50%,
var(--topbar-background) 50.01%,
var(--topbar-background)
)
}
}Pour masquer ensuite cette séparation on utilisera une couleur de fond au niveau du conteneur.
.topbar__container {
background: var(--topbar-background);
}Et enfin, afin d'avoir les deux premiers éléments avec une couleur de fond verte.
.topbar__info {
background: var(--topbar-color);
}
.topbar__infos li:last-child {
background: var(--topbar-background);
}L’oblique
Enfin le dernier point bloquant est la présence d'un élément oblique après notre second lien. Pour créer cet élément on utilisera une astuce en CSS permettant de créer des triangles en se basant sur une bordure. Pour placer cet élément on utilisera un pseudo-élément qui se situera après le second li.
.topbar__infos li:last-child::before {
content:'';
margin-right: 15px;
display: inline-block;
border-right: solid 30px transparent;
border-bottom: solid 55px var(--topbar-color);
}Ma solution != LA solution
Je tiens tout de même à rappeler qu'il n'existe pas qu'une seule manière de faire les choses en CSS et ce que je vous propose ici est une solution parmi tout un tas de solutions possibles.
