shape-outside per il testo a capo
Disponga il testo attorno a forme personalizzate usando shape-outside sugli elementi flottanti.
shape-outside per il testo a capo è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Modulo CSS Shapes
Il modulo CSS Shapes consente al testo di scorrere attorno a forme non rettangolari. La proprietà principale è shape-outside, che definisce la forma attorno alla quale scorre il testo.
Requisiti di shape-outside
shape-outside funziona solo sugli elementi con float. L'elemento deve avere un float (a sinistra o a destra) affinché il testo adiacente possa disporsi attorno alla forma definita.
<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()
Il testo scorre attorno a un percorso circolare definito rispetto all'elemento con float:
<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()
Il testo scorre attorno a un percorso ellittico:
<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()
Il testo scorre attorno a un percorso poligonale, consentendo layout editoriali complessi:
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
shape-outside con un'immagine
Passi un URL per utilizzare il canale alfa dell'immagine come contorno della forma. Il testo scorre attorno alle aree non trasparenti dell'immagine:
<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>
shape-margin
shape-margin aggiunge uno spazio tra il percorso definito da shape-outside e il testo disposto attorno alla forma:
<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
Quando si utilizza un'immagine per shape-outside, shape-image-threshold imposta la soglia di trasparenza alfa (da 0 a 1) che definisce il confine della forma.
Applicazioni di design
CSS Shapes consentono di creare layout editoriali in stile rivista, citazioni evidenziate con testo disposto attorno a immagini sagomate e aree per capilettera con flusso del testo irregolare — effetti prima realizzabili solo nella progettazione per la stampa o con SVG.
Supporto dei browser
shape-outside con forme di base (circle, ellipse, polygon, inset) è supportato da tutti i browser moderni. shape-outside con un URL di immagine ha un supporto più ampio, ma potrebbe comportarsi in modo diverso. Esegua sempre dei test.
Esempio pratico: capolettera
Un'area triangolare per un capolettera, con il testo disposto attorno a una grande lettera decorativa:
<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>
Verifica rapida
Che cosa è necessario affinché shape-outside funzioni su un elemento?
Riepilogo
shape-outside consente al testo di disporsi attorno a forme non rettangolari definite su elementi flottanti. Le forme possono essere cerchi, ellissi, poligoni o canali alfa di un'immagine. Utilizzi shape-margin per creare spazio attorno alla forma. Lo combini con clip-path per adattare visivamente l'elemento alla forma definita.
Impara CSS con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 40
- Lezioni
- 159
Domande Frequenti
La lezione «shape-outside per il testo a capo» è gratuita?
Sì — il testo completo di «shape-outside per il testo a capo» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «shape-outside per il testo a capo»?
Disponga il testo attorno a forme personalizzate usando shape-outside sugli elementi flottanti. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «shape-outside per il testo a capo»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- clip-path con polygon() e circle()
- shape-outside per il testo a capo
- Animare le forme clip-path
- Maschere CSS e clip-path a confronto