Prepare-se para a poderosa propriedade CSS border-shape!

Então, recentemente recebemos a nova função shape() (agora Baseline!), bem como a corner-shape propriedade. O que mais poderíamos precisar em relação à criação de formas em CSS? Deixe-me dizer: a propriedade border-shape!

shape()? corner-shape? border-shape?! De onde veio tudo isso?

Se você não é um fanático por formas CSS como eu, provavelmente perdeu esses recursos quando eles foram lançados, então vamos dar-lhes apresentações breves e formais, começando com…

shape() e corner-shape

A função shape() é um novo valor para clip-path e offset-path que usa sintaxe SVG para criar formas CSS com muito mais facilidade do que, digamos, path(). Escrevi uma série de quatro artigos explorando esse recurso e outro artigo onde exploro a criação de formas complexas .

Falando em SVG, você pode expressar qualquer formato SVG usando shape(). Dito de outra forma, você pode converter qualquer forma SVG em uma forma CSS e, adivinhe, Eu fiz um conversor que faz exatamente isso !

No que diz respeito a corner-shape, é uma propriedade que funciona em conjunto com border-radius . Como o próprio nome sugere, permite controlar a forma do canto de um elemento usando palavras-chave predefinidas.

.corner {
  border-radius: 20px;
  corner-shape: round | scoop | bevel | notch | squircle;
}

Também pode ser usado para criar formas CSS comuns, como abordei em outro artigo, “Formas CSS usando corner-shape. ”

Mas esta propriedade corner-shape é realmente útil ou mesmo necessária? Exceto pelo valor squircle, a maioria das formas já pode ser criada usando clip-path ou mask. Mas o que corner-shape faz que esses outros não conseguem é adicionar facilmente bordas e outras decorações a essas formas!

corner-shape não apenas moldará os cantos, mas também suportará outras propriedades como border e box-shadow , permitindo que eles sigam a forma em vez da caixa do elemento. Isso muda o jogo porque todos sabemos que adicionar bordas às formas é um pesadelo.

O suporte ainda não é ótimo (somente Chromium enquanto escrevo isto), mas é um bom momento para explorá-lo e obter uma visão geral de seu potencial.

Digite border-shape!

Modelar cantos é bom, mas ainda é bastante limitado no que diz respeito ao que podemos fazer com ele. Tipo, que tal moldar todo o elemento? Isso é o que border-shape fará. Ele aceita os mesmos valores de clip-path, incluindo a nova função shape().

Então, tem o mesmo trabalho que clip-path? O que há de novo?

Assim como corner-shape, a maioria das propriedades decorativas, como border, box-shadow e outline siga a forma.

clip-path (e mask) irá recortar/mascarar todo elemento, incluindo as decorações, então ter bordas é um grande NO . Esse é um grande problema para a criação de formas CSS.

A propriedade border-shape está aqui para resolver esse problema. Em vez de recortar o elemento, ele “molda” o elemento, permitindo que suas decorações sigam esse formato. Em outras palavras, colocar bordas em formas CSS se tornará uma brincadeira de criança!

Sem falar que border-shape também é muito fácil de usar. Se você está familiarizado com clip-path, então você praticamente não tem nada de novo para aprender. Basta substituir uma propriedade por outra e pronto.

.shape {
  /* Old code */
  clip-path: shape() | polygon() | ...;

  /* New code */
  border-shape: shape() | polygon() | ...;
}

Convido você novamente a aprender mais sobre a função shape() porque é o valor que torna border-shape realmente poderoso. Os dois realmente andam de mãos dadas.

Agora que você já conhece o uso básico do imóvel, vamos começar a diversão? Estou aqui para ultrapassar os limites e mostrar o que é possível usando border-shape.

Nota: O suporte é limitado apenas ao Chrome por enquanto, então confira as próximas demonstrações usando o Chrome.

Formas somente com borda

Como eu disse, a primeira grande vantagem aqui é adicionar bordas a formas que seguem a forma real, o que também significa a capacidade de criar formas apenas com bordas. Tudo que você precisa fazer é escrever o seguinte código:

.shape {
  border: 8px solid red;
  border-shape: /* your shape code */;
}

Chega de hacks e chega de dores de cabeça!

A maioria das formas já está disponível em minha coleção CSS Shapes , então, na verdade, criar formas apenas com bordas é algo que você pode fazer com um simples copiar/colar. Até mesmo alguns dos meus geradores on-line já estão configurados para fornecer versões apenas de bordas de formas complexas, como bolhas, linhas onduladas e molduras sofisticadas, entre muitos, muitos outros.

Formas recortadas

Vamos pegar o código anterior e atualizá-lo da seguinte forma:

.shape {
  border: 8px solid red;
  border-shape: inset(0) /* you shape code */;
}

Você mantém o código de forma que tinha e adiciona inset(0) no início. Sim, você pode ter dois valores de forma dentro de border-shape e o resultado será o seguinte:

De a especificação :

A propriedade border-shape aceita um único <basic-shape> ou dois <basic-shape>s:

Único <basic-shape> (modo Stroke): A borda é renderizada como um traço ao longo do caminho da forma, com a largura do traço determinada pelo largura da borda calculada do lado relevante. Este modo é útil para criar formas contornadas.

Dois <basic-shape> s (modo de preenchimento) A borda é renderizada como a área entre os dois caminhos. A primeira forma define o limite externo e a segunda forma define o limite interno. Este modo fornece controle preciso sobre a geometria da região fronteiriça.

Usando um retângulo básico como forma externa (inset(0)), consegui transformar facilmente a versão apenas com borda em uma versão recortada!

Você quer a forma dentro de um círculo? Fácil!

Tudo o que fiz foi substituir inset(0) (um retângulo) por circle() (um círculo).

Mas podemos fazer isso com um simples border-radius: 50%, certo?

Não! Ao trabalhar com border-shape, o border-radius é ignorado, o que é meio lógico, já que não temos mais cantos para arredondar – o elemento agora tem formato. Isso não é grande coisa, pois podemos literalmente criar qualquer tipo de forma que substitua o uso de border-radius, conforme mostrado no exemplo anterior.

Nota: Se você está se perguntando por que estou usando circle()sem nenhum argumento, confira meu artigo “Funções CSS que funcionam sem argumentos ”

.

Aqui estão mais alguns exemplos com o valor das duas formas para observar antes de passarmos para a próxima parte:

Você pode literalmente usar qualquer combinação para obter formas de aparência complexa sem muito esforço!

Decorações de breakout

Agora vamos pegar um bloco de texto e aplicar o código anterior com os dois valores de forma:

.box {
  border-shape: inset(0) circle();
  border-color: pink;
}

Talvez isso não seja surpreendente, considerando o que aprendemos até agora. Definimos duas formas e a borda é desenhada dentro da área entre elas. A novidade aqui é que estamos lidando com conteúdo e, como vocês podem ver, ele ultrapassa a fronteira.

border-shape molda o elemento inteiro, incluindo a decoração do elemento, mas qualquer conteúdo dentro permanece inalterado e segue a forma de retângulo inicial. Esse não é um comportamento novo, pois o mesmo acontece mesmo com o clássico border-radius. E o conteúdo irá transbordar, a menos que decidamos ocultá-lo usando overflow hidden.

Neste caso, não considerarei a propriedade overflow pois quero que o conteúdo transborde e seja colocado em cima da decoração da borda.

Agora vamos atualizar o código da forma assim:

.box {
  border-shape: inset(0 -100px) circle(50px);
  border-color: pink;
}

Fiz o círculo menor e o retângulo maior. Você vê para onde estou indo? Ao aumentar o raio do círculo 0 e o retângulo, crio um efeito de fundo de ruptura!

.box {
  border-shape: inset(0 -100vw) circle(0);
  border-color: pink;
}

O elemento permanece centralizado, mas seu fundo (que estamos simulando usando uma borda!) se estende até a borda da tela.

E isso não se limita ao uso de dois valores de forma. Mesmo com o valor de uma forma, podemos obter uma decoração de breakout ( que normalmente é difícil ) se você considerar qualquer valor que o tire dos limites do elemento.

Aqui está uma demonstração com muitos exemplos que deixarei você explorar:

Decorações Parciais

Vamos aproveitar a última demonstração para experimentar decorações diferentes.

Desta vez, em vez de estender para fora do limite do elemento, vou ficar dentro dele para criar uma decoração parcial. Em outras palavras, não temos mais limites. border-shape não tem limite. O único limite é a sua imaginação!

Confio principalmente na função shape() para criar a decoração, então faça um favor a si mesmo e explore esse recurso lendo minha série de quatro artigos ! Se você dominar shape(), poderá produzir facilmente decorações complexas usando border-shape.

Animação de forma

Sim, border-shape pode ser animado e podemos ter diferentes tipos de animações. Com a sintaxe de dois valores, podemos animar o valor border-width para criar um efeito de revelação:

Passe o mouse abaixo e veja o resultado:

Legal, certo? Também podemos aplicar isso a elementos de imagem:

Também podemos animar os valores da forma para criar animações mais complexas. Aqui está uma demonstração de um efeito de foco flutuante aplicado a formas de blob (do meu artigo “Criando formas CSS complexas usando shape().”

Pego o mesmo código, substitua clip-path por border-shape e tada !

E por que não adicionar uma animação sutil às decorações anteriores? Passe o mouse sobre os títulos e o texto para ver o que acontece:

Quer mais? Vamos!

Aqui está um sublinhado desenhado à mão que desliza entre os itens do menu ao passar o mouse. Linhas retas são chatas!

E por que não uma moldura elétrica em torno do seu conteúdo? Não se preocupe, é seguro para telas sensíveis ao toque.

Que tal um carregador sofisticado apenas de borda? (código retirado de minha coleção de carregador mole )

Vamos conectar os círculos com uma linha reta que se dobra quando os círculos se aproximam e se estica quando eles se afastam. Arraste os círculos na demonstração abaixo e veja a mágica em ação:

Conclusão

Acho que agora está claro por que estou chamando essa nova propriedade de “poderosa”. Além de facilitar a criação de formas CSS, permite adicionar decorações sofisticadas, animações interessantes e muito mais!

Não entrei em detalhes na maioria das demonstrações, pois queria manter este artigo leve, mostrando o potencial de border-shape. Agora que você sabe que podemos criar coisas malucas com ele, fique ligado em artigos mais elaborados!

Não se esqueça de marcar minha coleção CSS Shapes e meus geradores online . Já atualizei muitas das formas usando shape() e estou no processo de incluir também a versão border-shape.

Prepare-se para a poderosa propriedade CSS de formato de borda! originalmente escrito à mão e publicado com amor em CSS-Tricks . Você realmente deveria receber o boletim informativo também.