par anonyme 04-Mai-2021

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.

1 Réponse

par Antoine 04-Mai-2021

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.

Questions liées

1 réponse
1 réponse
posée par anonyme 01-Septembre-2021
1 réponse
1 réponse
1 réponse
1 réponse
1 réponse
Bienvenue sur 1FORMATIK, où vous pouvez poser des questions en lien avec l'informatique et internet, et recevoir des réponses d'Antoine et d'autres internautes.

2.6k questions

3k réponses

...