Table des matières:
Vidéo: Tutoriel CSS : Le positionnement en CSS 2025
L'amélioration la plus significative du texte dans CSS3 est le mécanisme @font qui vous permet de définir vos propres polices et de les empaqueter avec votre site Web. CSS3 a également d'autres astuces de mise en forme de texte. Les règles text-stroke et text-shadow vous permettent d'effectuer des transformations intéressantes sur le texte de vos pages.
Ces deux règles sont utilisées pour décorer le texte, mais elles peuvent avoir une incidence sur la lisibilité. Vous devez donc les utiliser avec précaution. Ils sont plus appropriés pour le texte plus volumineux (comme les titres) que le contenu principal de votre site.
Coup de texte
CSS3 vous permet de spécifier une couleur de trait pour votre texte. Ceci définit un contour autour de la lettre. Vous pouvez spécifier la couleur du trait (en utilisant l'une des valeurs de couleurs CSS standard) ainsi qu'une largeur de trait (en utilisant les attributs de taille normale).
La règle du trait de texte applique cet effet. Vous pouvez le voir utilisé dans le code:
textStroke. html h2 {couleur: jaune; -webkit-text-stroke: 2px rouge; font-size: 300%;}
Text Stroke Demo
Ce texte a un trait
Actuellement, aucun navigateur ne prend en charge directement l'attribut text-stroke, mais les navigateurs WebKit (Chrome et Safari) prennent en charge le fournisseur. spécifique -webkit- version. Un navigateur qui ne prend pas en charge la règle l'ignorera simplement, donc cela ne devrait pas être une partie significative de votre conception jusqu'à ce que le support soit plus complet.
Text-shadow
Les ombres sont une autre caractéristique commune des conceptions web modernes. Les ombres ajoutent un élément de profondeur à une page, mais elles peuvent également améliorer la lisibilité (si elles sont utilisées correctement) pour soulever un titre de la page. L'attribut text-shadow faisait partie de CSS2, mais il n'a été pris en charge que récemment par les principaux navigateurs.
textShadow. html h2 {font-taille: 300%; texte-ombre: 5px 5px 2px #cccccc;}
Text Shadow Demo
Ce texte a une ombre
L'attribut a quatre paramètres:
-
offset-x : Détermine jusqu'où dans l'axe x (gauche-droite) l'ombre sera à partir du texte original. Une valeur positive déplace l'ombre vers la droite et une valeur négative vers la gauche.
-
offset-y : Détermine la distance dans l'axe y (haut-bas) par rapport à l'original. Une valeur positive déplace l'ombre vers le bas et une valeur négative déplace l'ombre vers le haut.
-
flou : Spécifie le rayon de flou de l'ombre. Si la valeur est 0px, il n'y a pas de flou et l'ombre ressemble au texte d'origine. Généralement, vous voulez que la valeur de flou soit proche de la plus longue de vos décalages. Cela permet à l'ombre d'être reconnaissable comme une ombre du texte sans devenir une distraction.
-
couleur : Définit la couleur de l'ombre. Généralement, un gris foncé est préféré, mais vous pouvez également essayer d'autres couleurs pour des effets spéciaux. Notez que le flou a tendance à éclaircir la couleur de l'ombre. S'il y a beaucoup de flou appliqué, la couleur de l'ombre peut être de la même couleur que le texte. Si l'ombre ne sera pas trop floue, vous devrez peut-être éclaircir la couleur de l'ombre pour plus de lisibilité.
La taille de l'ombre est déterminée indirectement avec une combinaison de décalages et de flous. Vous devrez peut-être expérimenter pour obtenir l'ombre que vous recherchez. Les effets d'ombre sont meilleurs lorsqu'ils sont subtils car ils peuvent affecter la lisibilité.
Un cas particulier d'ombrage du texte peut être utilisé pour aider le texte à se distinguer d'une image d'arrière-plan. Appliquez une petite ombre d'une couleur contrastante. Cette technique est fréquemment utilisée lorsque vous avez besoin d'un texte sur un arrière-plan, car chaque lettre produit son propre arrière-plan à fort contraste. Encore une fois, assurez-vous de ne pas sacrifier la lisibilité au nom de l'éthique du design.
Tous les navigateurs de dernier modèle prennent en charge la fonction d'ombre de texte. Aucun préfixe spécial n'est nécessaire.
