Uma das partes de um projeto de front-end recente teve um efeito de corte interessante. Existem diferentes maneiras de criar um design de borda recortada com CSS, e cada uma tem seus prós e contras. pensamos em procurar maneiras de resolver esse problema e falar sobre elas.
Com CSS (Cascading Style Sheets), você pode criar páginas da Web com ótima aparência, mas como isso funciona? Este artigo explica o que é CSS com um exemplo simples de sintaxe e também aborda alguns termos importantes sobre a linguagem. Para entender o artigo, você precisa saber um pouco sobre CSS e SVG. Se não, tudo bem. Farei o possível para explicar tudo em detalhes.
Como criar um design de borda recortada com CSS
Código inicial
Precisaremos reutilize as dimensões (largura e altura) e os valores de largura da borda do div, então estou introduzindo-os como variáveis CSS. A variável –w denota a largura do elemento do bloco.cb, –h indica sua altura, –b vai para a largura da borda e –b2 para a largura da borda multiplicada por 2. Veremos mais tarde o uso da última variável.
Explicação rápida – unidades vw e vh
A unidade vw representa 1/100 da largura da viewport. Por exemplo, 50vw é 50 partes de uma largura de viewport dividida verticalmente em 100 partes iguais, enquanto 50vh é 50 partes de uma altura de viewport dividida horizontalmente em 100 partes iguais.
Dimensionar a imagem de fundo
Precisamos que a imagem de fundo cubra toda a área incluindo a área da borda, então a imagem de fundo precisa ser dimensionada de acordo. Se você quiser dar à imagem de fundo um tamanho fixo, apenas certifique-se de que o tamanho que você está dando permite cobrir a área da borda também. Quanto ao código usado no post até agora, aqui está o valor de fundo que estou dando a ele:
Cover the border-exclusive area
Agora que cobrimos a borda-área inclusiva com a imagem de fundo, tudo o que resta é cobrir a área central dentro da borda (área exclusiva da borda) com uma cor sólida, para a qual alcançamos uma inserção de sombra de caixa.
Adicionar uma borda extra com box-shadow
Na demonstração do Codepen, você pode ver uma borda branca ao redor da imagem. Há um truque famoso de usar box-shadows para criar várias bordas. podemos usar a mesma técnica para adicionar uma ou mais bordas de cores sólidas ao nosso design.
Perguntas frequentes
Como faço para criar uma borda personalizada em CSS?
Use border-style e escolha um estilo na lista de palavras CSS para definir o estilo. Use cores de borda e códigos de cores hexadecimais, RGB ou RGBA para definir a cor. Use a propriedade border para definir a largura, o estilo e a cor de uma só vez. Use superior, direita, esquerda e inferior.
Como faço meu próprio design de borda?
Vá para Design > Bordas da página. Faça as seleções de como deseja que a borda fique. Para ajustar a distância entre a borda e a extremidade da página, selecione Opções. Faça suas alterações e selecione OK. Selecione OK.