Ombres et effets de texte CSS : ajoutez une variété d'ombres et d'effets spéciaux à votre texte

Ombres et effets de texte CSS : ajoutez diverses ombres et effets spéciaux au texte, des exemples de code spécifiques sont requis

Dans la conception Web, le texte est l'un des moyens importants d'afficher des informations. Afin de rendre la présentation de la page plus vivante et attrayante, nous pouvons ajouter diverses ombres et effets spéciaux au texte via CSS. Cet article présente quelques ombres de texte et effets spéciaux courants et fournit des exemples de code correspondants.

1. Effet d'ombre de texte

1. Ajouter une ombre de texte

Vous pouvez ajouter un effet d'ombre au texte via la propriété text-shadow de CSS. La propriété text-shadow accepte quatre valeurs, à savoir le décalage horizontal, le décalage vertical, le rayon de flou et la couleur de l'ombre. Par exemple :

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Dans le code ci-dessus, 2px représente le décalage horizontal, 2px représente le décalage vertical, 4px représente le rayon de flou et rgba(0, 0, 0, 0.5) représente la couleur de l'ombre. Vous pouvez ajuster ces valeurs selon vos besoins pour obtenir différents effets d'ombre.

2. Text Inner Shadow

En plus d'ajouter un effet d'ombre autour du texte, nous pouvons également ajouter un effet d'ombre intérieure au texte. Cela peut être défini à l'aide de la propriété CSS text-stroke. Par exemple :

.text-inner-shadow {
  -webkit-text-stroke: 2px rgba(0, 0, 0, 0.5);
}

Dans le code ci-dessus, -webkit-text-stroke signifie définir le style de trait du texte, 2px signifie la largeur du trait et rgba(0, 0, 0, 0.5) signifie la couleur du trait. Vous pouvez ajuster la largeur et la couleur du trait selon vos besoins.

2. Effets de texte spéciaux

1. Effet de dégradé de texte

Vous pouvez utiliser les propriétés de dégradé linéaire ou de dégradé radial de CSS pour ajouter un effet de dégradé au texte. Par exemple :

.gradient-text {
  background: -webkit-linear-gradient(#FFC600, #FF6A00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Dans le code ci-dessus, -webkit-linear-gradient signifie définir la couleur d'arrière-plan du dégradé, et #FFC600 et #FF6A00 représentent les couleurs de début et de fin. -webkit-background-clip : text signifie que la couleur d'arrière-plan est appliquée uniquement au contenu du texte, et -webkit-text-fill-color : transparent signifie que la couleur du texte est définie sur transparente. Cela donnera au texte une couleur dégradée.

2. Effet de trait de texte

Vous pouvez utiliser la propriété text-stroke de CSS pour ajouter un effet de trait au texte. Par exemple :

.stroke-text {
  -webkit-text-stroke: 2px black;
  color: white;
}

Dans le code ci-dessus, -webkit-text-stroke signifie définir le style de trait du texte, 2px signifie la largeur du trait et noir signifie la couleur du trait. couleur : blanc signifie que la couleur du texte est blanche. Cela donnera au texte un effet caressé.

3. Effet de réflexion du texte

Vous pouvez utiliser les propriétés CSS de débordement de texte et d'espace blanc pour ajouter des effets de réflexion au texte. Par exemple :

.reflective-text {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.reflective-text::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
}

Dans le code ci-dessus, la classe réfléchissant-text représente le texte auquel l'effet de réflexion doit être ajouté. Utilisez le pseudo-élément ::after pour créer un pseudo-élément de la même taille que le texte et définissez son arrière-plan sur une couleur dégradée de haut en bas. Grâce aux attributs overflow : Hidden et White-Space : nowrap, la plage d'affichage du pseudo-élément est limitée à la partie inférieure du contenu du texte, obtenant ainsi l'effet de réflexion.

Ci-dessus sont quelques exemples d'ombres de texte et d'effets spéciaux courants. Vous pouvez ajuster ces codes selon vos besoins et ajouter différentes ombres et effets spéciaux au texte pour obtenir une meilleure embellissement de la page. J'espère que cet article vous sera utile !

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!