Comment flouter un texte en HTML et CSS ?
Je cherche à créer un genre de spoiler où par défaut un texte est flouté, sauf lorsqu'on passe la souris sur le texte. Merci.
Pour flouter un texte HTML, vous pouvez utiliser la propriété CSS FILTER avec la fonction BLUR.
Dans l'exemple ci-dessous une crée une CLASS CSS pour flouter le texte avec la propriété FILTER et sa fonction BLUR. La fonction BLUR contient un argument exprimé en pixel ; il correspond à la taille de l'effet de floutage autour du texte.
La pseudo-classe CSS :hover est utilisée pour supprimer l'effet de floutage lorsque le curseur de la souris survole le texte ; pour cela on donne la valeur 0 pixel à l'argument de la fonction BLUR.
transition-property et transition-duration permettent de contrôler la vitesse de l'animation lorsqu'on passe d'un texte flouté à un texte non flouté, et vis et versa.
Voici un exemple de texte qui est par défaut flouté, sauf lorsqu'on survole le texte :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment flouter un texte en HTML et CSS ?</title>
<style>
.spoiler_flou {
filter: blur(10px);
transition-property: -webkit-filter;
transition-duration: .5s;
}
.spoiler_flou:hover, .spoiler_flou:focus {
filter: blur(0px);
}
</style>
</head>
<body>
<p class="spoiler_flou">Un exemple de texte flou</p>
</body>
</html>
Démo dans le Bac à code.