Créer un menu flou avec HTML et CSS

Verdieu Steeve
Nov 7 · 4 min read

Dans ce billet, je vais vous montrer comment rendre flou du texte en utilisant HTML et CSS. Voici un exemple de ce que nous allons faire ensemble :

Quels sont les prérequis ?

Pour arriver à reproduire ce menu, vous n’avez besoin que de deux choses :

1 — Connaitre ls bases de l’HTML
2 — Connaitre les bases du CSS

La partie HTML

La partie HTML est très simple. Voyez par vous-même :

Comme vous pouvez le constater, j’ai créé un élément nav, auquel j’ai donné la classe : menu. Cet élément nav sert à insérer tous les éléments de la navigation. C’est aussi simple que cela.

P.S : J’aurais pu remplacer l’élément nav par une div. Le résultat serait le même. Mais pour respecter une structure d’HTML semantic, il est plus logique d’utiliser une nav pour spécifier que cet élément représente une navigation.

La partie CSS

Commençons par mettre l’arrière-plan de notre page HTML en black :

body { background-color: #3c3c3c; }

Et le resultat :

Plaçons tous les éléments au milieu de la page en utilisant les flexbox :

body {
background-color: #3c3c3c;
// Ajout de display flex
// Pour bien placer tout le contenu au millieu
display: flex;
align-items: center;
justify-content: center;
}

Maintenant donnons à notre élément nav une largeur.

Pour rappel, l’élément nav a la classe “menu”

.menu { width: 500px; }

Vous pouvez donner une largeur à votre guise.

Donnons un peu de styles aux items du menu :

.menu__item {
display: block;
padding: 15px 0;

color: white;
text-decoration: none;
font-weight: 300;
font-size: 55px;
}

Voilà ce qu’on obtient :

Comment rendre les textes flous ?

Pour arriver à rendre les textes flous, on va utiliser un text-shadow sur chacun des éléments du menu. Pour ceux qui ne s’en souviennent pas, la propriété text-shadow reçoit une valeur a 4 paramètres :

text-shadow: horizontal-distance vertical-distance blur-radius color
  • horizontal-distance : Décalage de l’ombre à l’horizontal
  • vertical-distance : Décalage de l’ombre à la verticale
  • blur-radius : (Optionnel) Le rayon du flou qui détermine la netteté de l’ombre. La valeur par défaut est 0.
  • color : la couleur de l’ombre

Ce qui nous intéresse est le blur-radius. C’est grâce à ce paramètre qu’on va pouvoir rendre le texte flou. Ajoutez alors un text-shadow aux items du menu :

.menu__item {
display: block;
padding: 15px 0;

color: white;
text-decoration: none;
font-weight: 300;
font-size: 55px;
// On ajoute un text-shadow de couleur blanche
// En mettant la valeur du blur-radius à 10
text-shadow: 0 0 10 white;
}

Voici ce qu’on obtient :

Les textes ne sont pas flous. Tu nous as bernés 😖 😫

Ah oui ! J’ai fait exprès de vous emmener ici 😂 😂. Si le texte n’est pas flou, comme dans l’aperçu en tout début de cet article, c’est parce qu’on a donné au texte une couleur blanche. Pour que le flou soit évident, il faut que la couleur du texte soit transparente :

.menu__item {
display: block;
padding: 15px 0;

color: transparent; //Le texte est transparent
text-decoration: none;
font-weight: 300;
font-size: 55px;
text-shadow: 0 0 10 white;
}

Et tadaaa 😍 😍:

La dernière étape

On va faire en sorte quand le curseur est sur un élément de notre menu, que le texte redevienne lisible. Voici comment il faut faire :

.menu__item:hover {
color: white; // On donne au texte une couleur blanche
text-shadow: initial; // On eleve le text-shadow
}

On utilise le pseudo élément hover sur les éléments ayant la classe menu__item afin de cibler le lien sur lequel se positionne le pointeur. On remet le texte en blanc et on enlève le text-shadow.

Pour faire en sorte que le texte redevienne lisible avec une certaine fluidite, on peut ajouter une transition aux items du menu :

.menu__item {
display: block;
padding: 15px 0;

color: transparent; //Le texte est transparent
text-decoration: none;
font-weight: 300;
font-size: 55px;
text-shadow: 0 0 10 white;
//On ajoute une transition
transition: all .2s linear;
}

Testez le rendu final ici :

Apprendre plus avec moi :

Si vous voulez apprendre de nouvelles choses ou consolider vos connaissances en dev Web, vous pouvez rejoindre ma communauté : .

Les services que j’offre :

J’offre un service d’intégration de maquettes de site web sur . Si vous cherchez une intégrateur,

Flat-Pixels

Apprenez de nouvelles choses ou consolidez ce que vous connaissez déjà grâce à des billets sur le développement web : “HTML/CSS, Wordpress, JavaScript, Php, Gulp, etc.”

Verdieu Steeve

Written by

I am web and mobile applications developer. Skills in HTML, CSS, JAVASCRIPT, SYMFONY and Ionic Framework. https://www.malt.fr/profile/steeveverdieu

Flat-Pixels

Apprenez de nouvelles choses ou consolidez ce que vous connaissez déjà grâce à des billets sur le développement web : “HTML/CSS, Wordpress, JavaScript, Php, Gulp, etc.”

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade