Pense fora da caixa com CSS de forma externa

CSS é baseado em um modelo de caixa. Se você tiver uma imagem que é um círculo ao redor da qual deseja envolver o texto, ele envolverá a caixa delimitadora das imagens.

Forma exterior

Uma nova propriedade CSS chamada shape-outside permite que você envolva o texto de acordo com o formato da imagem.

O que é fora da forma

Shape-outside é uma nova propriedade CSS que altera a forma dos itens que são embalados. Em vez de ficar limitado a uma caixa delimitadora retangular ao redor da imagem, o formato externo nos permite moldar o conteúdo para caber na imagem.

Aqui está como MDN descreve a forma externa:

A propriedade CSS shape-outside usa valores de forma para definir a área flutuante para um flutuador e fará com que o conteúdo embutido envolva a forma em vez da caixa delimitadora do flutuador.

A conclusão mais importante dessa descrição é que essa nova propriedade se aplica a imagens que usam um flutuador. A propriedade de fora da forma CSS controla como o texto se ajusta ao redor de qualquer imagem flutuante. O texto que está quebrado pode assumir a forma de um círculo, elipse, retângulo ou polígono.

Usando forma externa

A propriedade fora da forma assume uma “forma básica” e aplica uma função de forma a ela. A função de forma é usada para alterar a forma da área flutuante da forma. A propriedade CSS shape-outside fornece funcionalidade para criar estas funções de forma:

  • círculo
  • elipse
  • polígono
  • retângulo
  • url

A imagem pode ser posicionada com esses valores. Os valores são anexados ao final:

  • caixa de margem
  • caixa de enchimento
  • moldura

A imagem deve ter dimensões intrínsecas. Você deve definir a altura e a largura do elemento. Isso será usado pela função de forma para criar um sistema de coordenadas que é usado ao envolver o texto ao redor da imagem.

Círculo

Circle () é um dos valores funcionais fornecidos com shape-outside. A notação completa para círculo () é círculo (r em cx cy) onde r é o raio do círculo e cx e cy são as coordenadas do centro do círculo. Se você omiti-los, o centro da imagem será usado como os valores padrão.

Aqui está um exemplo de uso de forma fora de um círculo:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Elipse

Elipse é uma variação do círculo em que o item é alongado no eixo horizontal ou vertical. A notação completa para elipse () é elipse (rx ry em cx cy), onde rx e ry são os raios da elipse e cx e cy são as coordenadas do centro da elipse.

Aqui está um exemplo do uso de forma externa na elipse:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Polígono

A função polígono oferece uma gama ilimitada de formas. A notação completa para polígono () é polígono (x1 y1, x2 y2, ...)onde cada par especifica as coordenadas xy para um vértice do polígono. Para usar a função polygon (), você deve especificar um mínimo de 3 pares de vértices.

Polygon é usado com um caminho de clipe. A propriedade CSS clip-path cria uma região de recorte que define qual parte de um elemento deve ser exibida. Qualquer coisa dentro da região é exibida, enquanto as externas ficam ocultas.

Aqui está um exemplo de uso de forma externa para criar duas formas triangulares e o texto flui entre elas:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Suporte de navegador

O CSS shape-outside é suportado principalmente pelo Chrome, Opera e Safari.

Obtenha o código

O código para todos os exemplos pode ser encontrado em meu repositório github aqui.

Mais artigos

Obrigado por ler o meu artigo. Se gostar, clique no ícone de palmas abaixo para que outras pessoas encontrem o artigo. Aqui estão mais alguns dos meus artigos nos quais você pode estar interessado:

Aqui estão 5 layouts que você pode fazer com FlexBox

Amplitude da primeira pesquisa em JavaScript

Padrões de instanciação em JavaScript