All Articles Web
Comment faire pour créer des ombres du texte dans CSS3
Geoff Blake on Wed, March 30th | 0 comments
As I mentioned in my tutorial on creating rounded corners, CSS3 is offering up a lot of awesome new features, like multiple columns, gradients, and of course, border effects. In this tutorial, we'll t

Comme je l'ai mentionné dans mon tutoriel sur la création de coins arrondis, CSS3 offre un grand nombre de nouvelles fonctionnalités impressionnantes, comme plusieurs colonnes, les dégradés, et bien sûr les effets de frontière,. Dans ce tutoriel, nous allons jeter un oeil à une autre nouvelle fonctionnalité, créer des ombres portées sur le texte.

This CSS property is supported by the most recent versions of all popular browsers except Internet Explorer...

Etape 1

Pour commencer à cet effet, trouver ou créer une règle CSS que vous souhaitez appliquer l'ombre du texte d'. Probablement le meilleur moyen de faire usage de ce serait de créer une règle de classe spécifiquement pour appliquer cet effet. C'est ce que je vais faire de toute façon. J'ai également appliqué un peu de formatage de mon texte en utilisant un élément paragraphe redéfini.

Etape 2

Ajoutez ensuite le «texte-ombre" propriété pour votre règle. Il ya quatre valeurs que nous pouvons appliquer à la «text-shadow" propriété. D'abord, ajouter une couleur. Vous pouvez utiliser n'importe quelle couleur que vous voulez, bien que les ombres portées sont généralement assez sombre. Si vous enregistrez votre fichier et vérifiez votre travail dans votre navigateur, vous remarquerez que rien ne se passe. C'est parce que nous avons à définir certaines propriétés supplémentaires première.

Étape 3

Directly after the color, let's set three numeric values. The first two values can be positive or negative. The last value must be positive.


Now what are these values for? Well, the first value is for the horizontal position of the drop shadow. A positive value will move the shadow to the right, and a negative value moves it to the left.

La deuxième valeur contrôle la position verticale de l'ombre. Une valeur positive ici, se déplacera vers le bas l'ombre, tandis qu'une valeur négative déplace vers le haut.

La troisième valeur contrôle la quantité de flou sur l'ombre. Utilisez une valeur inférieure pour obtenir la meilleure ombre, ou une valeur plus élevée pour une ombre plus floue. Comme vous pouvez le voir, je préfère utiliser des valeurs assez faibles.

Et c'est tout ce qu'il ya à créer des ombres de texte dans CSS3! Poursuivez votre voyage d'apprentissage CSS en vérifiant le tutoriel ci-dessous:

Comments (0)

You must be logged in to comment. Login Now

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: