CSS Academy · Aula

shape-outside para Quebra de Texto

Faça o texto contornar formas personalizadas usando shape-outside em elementos flutuantes.

shape-outside para Quebra de Texto é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.

Módulo de formas do CSS

O módulo de formas do CSS permite que o texto contorne formas não retangulares. A principal propriedade é shape-outside, que define a forma ao redor da qual o texto flui.

Requisitos de shape-outside

shape-outside funciona apenas em elementos flutuantes. O elemento precisa flutuar (à esquerda ou à direita) para que o texto adjacente contorne a forma definida.

<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()

O texto contorna um caminho circular definido em relação ao elemento flutuante:

<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()

O texto contorna um caminho elíptico:

<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()

O texto contorna um caminho poligonal, permitindo layouts editoriais complexos:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside com imagem

Forneça uma URL para utilizar o canal alfa da imagem como limite da forma. O texto contorna as áreas não transparentes da imagem:

<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 adiciona um espaço entre o caminho de shape-outside e o texto que se ajusta a ele:

<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

Ao usar uma imagem para shape-outside, shape-image-threshold define o limite de transparência alfa (de 0 a 1) que determina o contorno da forma.

Aplicações de projeto

CSS permite criar layouts editoriais no estilo de revistas, citações destacadas com texto contornando imagens e áreas de capitulares com fluxo de texto irregular — efeitos que antes só eram possíveis em projetos impressos ou com SVG.

Compatibilidade com navegadores

shape-outside com formas básicas (circle, ellipse, polygon e inset) é compatível com todos os navegadores modernos. shape-outside com URL de imagem tem uma compatibilidade mais ampla, mas pode variar. Faça sempre um teste.

Exemplo prático: capitular

Uma área triangular para uma capitular, em que o texto contorna uma grande letra 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ção rápida

O que é necessário para que shape-outside funcione em um elemento?

Recapitulação

shape-outside permite que o texto flua ao redor de formas não retangulares definidas em elementos flutuantes. As formas podem ser círculos, elipses, polígonos ou canais alfa de imagens. Use shape-margin para criar um espaço ao redor. Combine-o com clip-path para fazer o elemento corresponder visualmente à forma definida.

Perguntas Frequentes

A aula “shape-outside para Quebra de Texto” é grátis?

Sim — o texto completo de “shape-outside para Quebra de Texto” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.

O que vou aprender em “shape-outside para Quebra de Texto”?

Faça o texto contornar formas personalizadas usando shape-outside em elementos flutuantes. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar CSS Academy?

Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “shape-outside para Quebra de Texto”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de CSS Academy?

Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para CSS Academy