shape-outside pour l’habillage du texte
Faites suivre au texte des formes personnalisées avec shape-outside sur des éléments flottants.
shape-outside pour l’habillage du texte est une leçon CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours CSS Academy comprend 4 leçons au total.
Module des formes CSS
Le module des formes CSS permet au texte de s’enrouler autour de formes non rectangulaires. La propriété principale est shape-outside, qui définit la forme autour de laquelle le texte s’écoule.
Conditions requises pour shape-outside
shape-outside ne fonctionne que sur des éléments flottants. L’élément doit être flottant (à gauche ou à droite) pour que le texte adjacent s’enroule autour de la forme définie.
<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>
shape-outside: circle()
Le texte s’enroule autour d’un tracé circulaire défini par rapport à l’élément flottant :
<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>
shape-outside: ellipse()
Le texte s’enroule autour d’un tracé elliptique :
<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>
shape-outside: polygon()
Le texte s’enroule autour d’un tracé polygonal, ce qui permet de créer des mises en page éditoriales complexes :
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
shape-outside avec une image
Indiquez une URL pour utiliser le canal alpha de l’image comme limite de la forme. Le texte s’enroule autour des zones non transparentes de l’image :
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
Propriété shape-margin
shape-margin ajoute un espace entre le tracé de shape-outside et le texte qui s'enroule autour :
<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>
shape-image-threshold
Lorsqu'une image est utilisée pour shape-outside, shape-image-threshold définit le seuil de transparence alpha (de 0 à 1) qui détermine la limite de la forme.
Applications de conception
Les formes CSS permettent de créer des mises en page éditoriales de style magazine, des citations en exergue avec un enroulement autour d'une image et des zones de lettrines avec un flux de texte irrégulier — des effets auparavant réalisables uniquement dans la conception imprimée ou avec SVG.
Prise en charge par les navigateurs
shape-outside avec des formes de base (circle, ellipse, polygon, inset) est pris en charge par tous les navigateurs modernes. shape-outside avec une URL d'image bénéficie d'une prise en charge plus étendue, mais celle-ci peut varier. Testez toujours.
Exemple pratique : lettrine
Une zone triangulaire de lettrine autour de laquelle le texte s'enroule :
<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>
Vérification rapide
Que faut-il pour que shape-outside fonctionne sur un élément ?
Récapitulatif
shape-outside permet au texte de s'écouler autour de formes non rectangulaires définies sur des éléments flottants. Les formes peuvent être des cercles, des ellipses, des polygones ou des canaux alpha d'image. Utilisez shape-margin pour ajouter un espace. Combinez-le avec clip-path pour faire correspondre visuellement l'élément à la forme qui lui est attribuée.
Apprends CSS avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 40
- Leçons
- 159
Questions Fréquemment Posées
La leçon « shape-outside pour l’habillage du texte » est-elle gratuite ?
Oui — le texte complet de « shape-outside pour l’habillage du texte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours CSS Academy, passe à CoddyKit PRO. Le cours CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « shape-outside pour l’habillage du texte » ?
Faites suivre au texte des formes personnalisées avec shape-outside sur des éléments flottants. Tu pratiques CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer CSS Academy ?
Aucune expérience préalable n'est requise. CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « shape-outside pour l’habillage du texte » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon CSS Academy ?
Oui. Chaque leçon CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- clip-path avec polygon() et circle()
- shape-outside pour l’habillage du texte
- Animation des formes clip-path
- Masques CSS ou clip-path