Maison >interface Web >tutoriel CSS >Comment obtenir un effet d'ombre de texte CSS3 ? [Explication détaillée du code]

Comment obtenir un effet d'ombre de texte CSS3 ? [Explication détaillée du code]

藏色散人original: 2018-09-05 13:49:092725parcourir

Le mot ombre de texte peut sembler un peu inconnu aux novices qui découvrent CSS, alors disons-le autrement, un texte avec une sensation tridimensionnelle. Certaines images apparaissent-elles immédiatement dans votre esprit ? Si vous avez lu mon article précédent [Explication détaillée de la façon de créer des effets d'ombre en CSS3], vous devriez avoir une certaine compréhension de l'effet d'ombre div. Cet attribut principal est l'attribut de style box-shadow.

Ensuite, cet article continuera à vous présenter comment créer un effet d'ombre de texte en CSS3, c'est-à-dire comment créer une police 3D. Le principal attribut à maîtriser ici est le attribut de style text-shadow Certains débutants peuvent se demander ce qu'est text-shadow ? Quelle est la signification ? Comment utiliser ? Ne vous inquiétez pas, nous l'expliquerons en détail ci-dessous avec un exemple de code spécifique.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3 text-shadow属性使用示例</title>
    <style>
      .t1{
          text-shadow: 5px 5px 5px #029789;
          font-size: 40px;
          font-weight: bold;
          color: white;
      }
      .t2{
          text-shadow: -5px -5px 5px #1094f2;
          font-size: 40px;
          font-weight: bold;
     color: white;
      }
    </style>
</head>
<body>
<div class="demo">
    <p class="t1">text-shadow属性使用示例1-文字阴影效果</p>
    <p class="t2">text-shadow属性使用示例2-文字阴影效果</p>
</div>
</body>
</html>

Nous accédons au code ci-dessus via un navigateur, et l'effet est le suivant :

Comment obtenir un effet dombre de texte CSS3 ? [Explication détaillée du code]

Regardez ceci pour voir si le La police a un effet tridimensionnel. Tissu en laine ? Alors avez-vous remarqué les différences entre l’exemple 1 et l’exemple 2 ? En fait, il est évident que la partie ombre du texte de l’exemple 1 se trouve en bas à droite du texte ! Et l’ombre de la police dans l’exemple 2 est en haut à gauche du texte !

Ces effets sont tous dus à l'attribut de style text-shadow en CSS3 ! Nous pouvons constater que les valeurs de text-shadow dans l'exemple 1 sont 5px 5px 5px #029789 ; les valeurs de l'exemple 2 sont -5px -5px 5px #1094f2 ; ces quatre valeurs représentent respectivement le décalage dans le x ; -direction de l'axe, décalage de l'axe y, valeur de flou, couleur de l'ombre. Ensuite, la différence de position de l'ombre est due aux valeurs positives et négatives des deux premières valeurs.

Une valeur positive sur l'axe des x indique un déplacement vers la droite, une valeur négative indique un déplacement vers la gauche, une valeur positive sur l'axe des y indique un déplacement vers le bas et une valeur négative indique un déplacement vers la gauche. vers le haut. Plus la valeur de flou est élevée, plus le flou est important.

Une fois que vous avez compris la signification de ces valeurs, vous pouvez librement modifier l'effet d'ombre du texte selon vos propres préférences.

Ce qui précède est une introduction détaillée sur la façon d'utiliser l'

attribut CSS text-shadow, c'est-à-dire une introduction détaillée sur la façon de donner à la police un effet 3D. Il a une certaine valeur de référence et j'espère qu'il sera utile à des amis dans le besoin.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment personnaliser les polices en CSS ? Introduction aux styles de police de texte en HTMLArticle suivant：Comment personnaliser les polices en CSS ? Introduction aux styles de police de texte en HTML

Articles Liés

Voir plus