• Votre panier est vide.

Personnaliser votre texte avec CSS3 – partie 1

(Dernière mise à jour: 6 juillet 2021)

Ce nouvel article est consacré à l’utilisation et la personnalisation du texte grâce aux balises CSS3.

Cette fois-ci, vous allez un peu plus loin que les articles précédents à propos de la mise en forme.

Les transformations du texte

Vous pouvez effectuer des transformations sur le texte en utilisant la balise text-transform. Vous avez plusieurs valeurs.

capitalize met la première lettre de chaque mot en majuscules, uppercase met toutes les lettres majuscules, lowercasetoutes les lettres en minuscules et avec none il n’y a aucune modification des lettres.

Exemple :

.txt4 { text-transform: capitalize; }

Vous pouvez utiliser cette propriété CSS text-transform, surtout capitalize qui est très pratique pour vos titres, vos phrases d’accroche, votre slogan, sur votre site Internet. Ainsi, la première lettre de chaque mot est automatiquement mise en majuscule.

La transformation est effectuée par CSS, c’est génial, vous n’avez plus besoin d’utiliser du JavaScript, ou du PHP pour effectuer votre transformation d’affichage. Faites-les directement avec CSS, c’est beaucoup plus rapide.

Transformations du texte grâce à CSS 3
Transformations du texte grâce à CSS 3

Indentation du texte grâce au CSS3

Vous pouvez indenter le texte, ajouter un décalage du texte grâce à la balise text-indent et une valeur en pixels. C’est souvent utilisé sur la première ligne de texte d’un paragraphe, il est décalé, avec une indentation de quelques pixels.

Exemple :

.txt1 { text-indent: 32px; }

L’exemple ci-dessous est une indentation sur la classe txt1 à 32 pixels, la première partie du texte sera décalée de 32 pixels.

Indentation du texte
Indentation du texte avec CSS3

Définir l’espace entre les lettres

Vous pouvez définir l’espace entre les lettres, avec la propriété letter-spacing. letter-spacing: 18px va définir de grands espaces de 18 pixels entre chaque lettres. Si vous mettez une valeur négative, elle va rapprocher les lettres entre elles, collées à -2 pixels par exemple.

Vous pouvez aussi définir l’espace entre les mots d’un texte (et pas les lettres) avec word-spacing. C’est exactement le même principe de fonctionnement, vous définissez votre valeur en pixels et les mots seront plus ou moins éloignés ou collés, suivant que vous utilisiez une valeur plus ou moins élevée.

Conclusion

Cet article vous a présenté les premiers effets que vous pouvez appliquer à votre texte pour son affichage.

Préférez l’utilisation de CSS plutôt que d’ajouter dans le code de votre page différents éléments pour avoir l’affichage désiré, c’est plus évolutif et cela s’applique automatiquement à tout votre site.


Voila, vous pouvez maintenant briller en soirée …

Nous avons mis quelques cours en promo sur l’école du web de Develop4fun :
https://www.develop4fun.fr/tous-les-cours

Vous pouvez également nous retrouver sur Youtube :

Ici => https://www.youtube.com/channel/UCZ4dhshzpVbbRPVuL9TNH4Q

Ou ici => https://www.youtube.com/channel/UCQlKs3ToaL8IKRbXtwtFnyA

0 responses on "Personnaliser votre texte avec CSS3 – partie 1"

Leave a Message

Votre adresse e-mail ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

© Develop4fun. Tous les droits réservés.