Comment Créer un Texte Flou en CSS?
L'un des meilleurs effets pour styliser votre texte est le faire apparaître flou. Dans ce snippet, nous allons vous montrer les deux méthodes de créer un texte flou. Allons-y!
1. Utilisez la propriété text-shadow
La première méthode de créer un texte flou est le rend transparent et lui appliquer un ombre. L'ombre va faire apparaîte flou le texte. Au début, vous devez ajouter HTML, comme cela:
<div id="blur">Texte Flou</div>Ensuite c'est CSS qui vient. Vous devez définir la propriété color à sa valeur “transparent” et définisser la propriété text-shadow pour donner un ombre au texte. Voici à quoi cela ressemble:
#blur {
font-size: 40px;
color: transparent;
text-shadow: 0 0 8px #000;
}Si vous voulez que votre texte apparaisse plus ou moins flou, vous pouvez changer la valeur du rayon de flou de la propriété text-shadow selon la taille de votre texte.
Voici l'exemple. Vous pouvez l'essayer vous-même.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#blur {
font-size: 40px;
color: transparent;
text-shadow: 0 0 8px #000;
}
</style>
</head>
<body>
<div id="blur">Texte flou</div>
</body>
</html>2. Utilisez la propriété filter
La façon suivante se compose d'utiliser la propriété CSS filter avec sa fonction “blur”. Plus la valeur de la fonction de flou est grande, plus votre texte est flou. Voici l'extrait du code dont on a besoin:
#blur {
font-size: 40px;
filter: blur(3px);
}Voici l'exemple du code complet:
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#blur {
font-size: 40px;
filter: blur(3px);
-webkit-filter: blur(3px);
}
</style>
</head>
<body>
<div id="blur">Texte flou</div>
</body>
</html>Vous pouvez essayer des effets de flou différents, par exemple, vous pouvez rendre flou quelques lettres du texte et pas des autres.
Dans ce cas, chaque lettre doit être entouré dans un span, afin que l'effet de flou et la taille de la police puissent être définis pour chaque span séparément. Voici un exemple. Voyons à quoi le code HTML ressemble:
<div id="blur">
<span>B</span>
<span>L</span>
<span>U</span>
<span>R</span>
<span>R</span>
<span>E</span>
<span>D</span>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>Maintenant jetons un coup d'oeil à CSS:
#blur {
display: inline-block;
padding: 20px 30px;
margin: 20px auto;
letter-spacing: 2px;
background-color: #000;
}
#blur span:nth-child(1) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(2) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 35px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(3) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 33px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(4) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 34px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(5) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 41px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(6) {
color: transparent;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(7) {
color: transparent;
text-shadow: 0 0 8px #fff;
font-size: 36px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(8) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 38px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(9) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 36px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(10) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 34px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(11) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: "Carme", sans-serif;
}Dans le code mentionné ci-dessus, chaque lettre du div agit comme un span. Nous avons utilisé le sélecteur :nth-child() pour sélectionner l'élément span nth .
Si vous voulez voyer le résultat, regardez cet exemple et l'essayez-vous-même!
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
#blur {
display: inline-block;
padding: 20px 30px;
margin: 20px auto;
letter-spacing: 2px;
background-color: #000;
}
#blur span:nth-child(1) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(2) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 35px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(3) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 33px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(4) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 34px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(5) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 41px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(6) {
color: transparent;
text-shadow: 0 0 10px #fff;
font-size: 40px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(7) {
color: transparent;
text-shadow: 0 0 8px #fff;
font-size: 36px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(8) {
color: transparent;
text-shadow: 0 0 6px #fff;
font-size: 38px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(9) {
color: transparent;
text-shadow: 0 0 4px #fff;
font-size: 36px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(10) {
color: transparent;
text-shadow: 0 0 2px #fff;
font-size: 34px;
font-family: "Carme", sans-serif;
}
#blur span:nth-child(11) {
color: transparent;
text-shadow: 0 0 0 #fff;
font-size: 32px;
font-family: "Carme", sans-serif;
}
</style>
</head>
<body>
<div id="blur">
<span>B</span>
<span>L</span>
<span>U</span>
<span>R</span>
<span>R</span>
<span>E</span>
<span>D</span>
<span>T</span>
<span>E</span>
<span>X</span>
<span>T</span>
</div>
</body>
</html>