Comment créer un effet de liaison texte flou CSS3

Explication détaillée des effets du texte flou dans CSS3 et FAQS

Points clés

• CSS3 peut créer des effets de texte flou avec des couleurs de texte et des ombres de texte transparentes, mais tous les navigateurs ne prennent pas en charge l'attribut text-shadow. Dans ce cas, vous pouvez utiliser Modernizr ou écrire un code de détection d'ombre de texte personnalisé comme solution de contournement.
• Un effet agréable peut être obtenu pour le menu de navigation en brouillant en douceur les liens vers l'intérieur et l'extérieur tout en survolant ou en se concentrant. Cela implique de définir une classe "flou" qui peut être appliquée à n'importe quel lien, puis à l'aide d'un style CSS qui peut être appliqué dans tous les navigateurs.
• Lors de la création d'effets de texte flou, assurez-vous de faire attention aux problèmes d'accessibilité et de visibilité. De plus, la quantité de flou peut être contrôlée en ajustant l'attribut d'ombre du troisième texte (définissant la quantité de flou). Il peut être modifié pour augmenter ou diminuer l'effet flou.

Ce qui suit est un exemple de l'effet texte que j'ai vu sur le site Web CSS Tricks de Chris Coyier. Le texte flou peut être créé dans CSS3 en appliquant des couleurs de texte transparent et des ombres de texte:

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Malheureusement, tous les navigateurs ne prennent pas en charge text-shadow. IE9 et ci-dessous appliquera des couleurs transparentes, mais pas d'effet d'ombre - le texte devient invisible. Nous devons nous tourner vers Modernizr ou écrire notre propre code de détection d'ombre de texte. Le code JavaScript suivant attache la classe "TextShadow" à l'élément HTML lorsque le navigateur le prend en charge. Nous pouvons donc utiliser le sélecteur CSS de ".textShadow .blur-text" pour s'assurer qu'il n'est appliqué que si l'effet ne provoque pas de mauvais comportement:

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

AVERTISSEMENT: Le comportement flou de l'opéra Chrome et Firefox affichent du texte flou, mais sont désactivés dans IE. Cependant, l'opéra peut être bizarre; il prend en charge text-shadow, mais ne veut pas l'appliquer à un texte transparent. Cela semble être une erreur, car l'application de la couleur de rgba(0,0,0,0) résoudra le problème.

lien flou

Avec de la magie CSS3 supplémentaire, nous pouvons faire en sorte que les liens se brouillent en douceur dans et à l'extérieur lorsqu'ils planent ou se concentrent. Cela peut être un effet agréable pour le menu de navigation. Nous définirons une classe "flou" (ou "flou dans" classe) qui peut être appliquée à n'importe quel lien. Le lien commencera avec un flou et reviendra à la focus normale lorsqu'il est activé. De même, nous définirons la classe "Blur Out" qui brouille le texte lors de la volonté / de la concentration, c'est-à-dire:

<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始模糊，结束清晰</a>
<a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">开始清晰，结束模糊</a>

Nous avons maintenant besoin de styles CSS de base qui s'appliquent à tous les navigateurs, même ceux qui ne prennent pas en charge text-shadow:

a.blur {
  text-decoration: none;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b339;
}

a.blur:hover, a.blur:focus {
  text-decoration: underline;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b933;
}

L'ensemble suivant de styles s'applique à tous les éléments .blur, qu'ils aient une focalisation ou non:

• Nous supprimons le lien souligne et décrit
• Définissez la couleur du texte sur transparent et
• Appliquer des transitions CSS3 qui animent en douceur entre aucune ombre de texte et des ombres de texte intégral. L'effet commence après 100 millisecondes et est achevé après 400 millisecondes.

.blur-text {
  color: transparent;
  text-shadow: 0 0 5px https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b000;
}

Enfin, nous définissons deux états d'ombre de texte. Le troisième attribut d'ombre texte définit la "quantité floue". Il animera entre 0 et 4px, mais si plus ou moins un flou est requis, vous pouvez le modifier:

if (document.createElement("detect").style.textShadow === "") {
  document.getElementsByTagName("html")[0].className += " textshadow";
}

Afficher la page de démonstration Fuzzy Link - Le code source contient tous les CSS et JavaScript requis. J'espère que vous le trouverez utile, mais faites attention aux problèmes d'accessibilité / visibilité lors de l'utilisation de cet effet. Si vous l'utilisez ailleurs, j'aimerais recevoir vos commentaires et publier l'URL.

FAQS pour les effets de texte flou dans CSS3

(La partie FAQ est omise ici car elle est trop longue et est très répétitive avec le contenu original. Les FAQ peuvent être conservées sélectivement ou réorganisées au besoin et réécrites dans un langage plus concis.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!