Forma fora - CSS-Tricks

Anonim

A shape-outsidepropriedade controla como o conteúdo envolverá a caixa delimitadora de um elemento flutuante. Normalmente, isso ocorre para que o texto possa refluir sobre uma forma, como um círculo, elipse ou polígono:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

É importante observar que essa propriedade só funcionará em elementos flutuantes por enquanto, embora seja provável que isso mude no futuro. A shape-outsidepropriedade também pode ser manipulada com transições ou animações.

Valores

  • circle(): para fazer formas circulares.
  • ellipse(): para fazer formas elípticas.
  • inset(): para fazer formas retangulares.
  • polygon(): para criar qualquer forma com 3 ou mais vértices.
  • url(): identifica qual imagem deve ser usada para quebrar o texto.
  • initial: a área de flutuação não é afetada.
  • inherit: herda o shape-outsidevalor do pai.

Os seguintes valores identificam qual referência do modelo de caixa deve ser usada para posicionar a forma dentro de:

  • margin-box
  • padding-box
  • border-box

Estes valores devem ser acrescentados ao final, por exemplo: shape-outside: circle(50% at 0 0) padding-box. Por padrão, a margin-boxreferência será usada.

elipse()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

A ellipse()função requer os valores dos raios para os eixos x, y da elipse seguidos pelas coordenadas para posicionar o centro da forma dentro de sua caixa delimitadora. Por exemplo, o exemplo acima posicionará o centro da elipse no centro vertical e horizontal do .elementdiv:

Embora a demonstração acima possa sugerir que estamos mudando a forma do divpróprio, se adicionarmos bordas e uma imagem de fundo, descobriremos que a caixa delimitadora ainda é retangular:

Pode ser melhor pensar desta forma: com a shape-outsidepropriedade, estamos mudando a relação de outros elementos em torno de um elemento, não a geometria do próprio elemento. Para corrigir isso, precisaremos usar shape-outsidejunto com a clip-path()propriedade, como neste exemplo:

círculo()

.element ( shape-outside: circle(50%); )

Esta função cria um círculo e, no exemplo de código acima, criará um círculo com um raio que tem metade da altura e largura .element. A circle()função também pode usar a mesma sintaxe para posicionar a forma interna.

url ()

.element ( shape-outside: url('circle.png.webp'); )

Neste caso, temos duas imagens flutuantes, uma de cada lado de um bloco de texto. Como ambas as imagens têm a shape-outsidepropriedade definida, o texto abaixo evitará esses dois flutuadores.

Também é possível definir a shape-image-thresholdpropriedade que informará ao navegador quais pixels, dependendo de sua transparência, devem criar a forma. Por exemplo:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

Neste exemplo, os únicos pixels que criarão a forma devem ter 50% de transparência ou mais. Os valores de 0.0(transparente) a 1.0(opaco) são válidos.

polígono()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Esta função cria qualquer forma que tenha três ou mais vértices, por exemplo:

É importante notar que se esta propriedade for animada, ela requer o mesmo número de vértices quando você declara o estado animado:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

inserir()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()é uma função para fazer formas retangulares, leva cinco parâmetros, mas o quinto, porque border-radiusé opcional. Os outros argumentos são deslocamentos internos da borda de .element:

Acima, temos um elemento com 200 px de largura por 200 px de altura e estamos deslocando a forma em 50 px em todas as direções, exceto no lado esquerdo. Dessa forma, o texto será ajustado acima da forma, embora o div se estenda até o topo.

Suporte de navegador

Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.

Área de Trabalho

cromada Raposa de fogo IE Beira Safári
37 62 Não 79 7,1 *

Celular / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *