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]

Sep 05, 2018 pm 01:49 PM

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>
Copier après la connexion
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 de ce site Web
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

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
4 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiques Mar 08, 2025 am 09:45 AM

Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans

Créez un formulaire de contact JavaScript avec le cadre Smart Forms Créez un formulaire de contact JavaScript avec le cadre Smart Forms Mar 07, 2025 am 11:33 AM

Ce tutoriel montre la création de formulaires JavaScript professionnels à l'aide du cadre Smart Forms (Remarque: non plus disponible). Bien que le cadre lui-même ne soit pas disponible, les principes et techniques restent pertinents pour d'autres constructeurs de formulaires.

Ajout d'ombres de boîte aux blocs et éléments WordPress Ajout d'ombres de boîte aux blocs et éléments WordPress Mar 09, 2025 pm 12:53 PM

Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres) Mar 04, 2025 am 10:22 AM

Cet article explore les meilleurs scripts de générateur de formulaires PHP disponibles sur le marché Envato, en comparant leurs fonctionnalités, leur flexibilité et leurs design. Avant de plonger dans des options spécifiques, comprenons ce qu'est un constructeur de formulaires PHP et pourquoi vous en utiliseriez un. Un formulaire PHP

Travailler avec GraphQL Caching Travailler avec GraphQL Caching Mar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Faire votre première transition Svelte personnalisée Faire votre première transition Svelte personnalisée Mar 15, 2025 am 11:08 AM

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Show, ne dit pas Show, ne dit pas Mar 16, 2025 am 11:49 AM

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Barbars CSS personnalisés chics et cool: une vitrine Barbars CSS personnalisés chics et cool: une vitrine Mar 10, 2025 am 11:37 AM

Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair

See all articles