Como criar um design de borda recortada com CSS
Com um design de borda recortada podemos mostrar aos usuários o que pode ser encontrado sob a área de borda de um elemento HTML. Esta tarefa é tipicamente resolvida por empilhando dois ou mais elementos de bloco (na maioria dos casos divs) de tamanhos diferentes em cima do outro. Primeiro, isso parece uma solução fácil, mas fica mais frustrante quando você deseja reutilizar o layout várias vezes, movimentar os elementos, otimizar o design para dispositivos móveis ou manter o código.
Neste post, vou mostrar uma solução elegante somente para CSS que usa apenas um elemento HTML para conseguir o mesmo efeito. Essa técnica também é ótima para acessibilidade, já que carrega a imagem de fundo no CSS, separado do HTML.
Até o final deste post, você saberá como exibir uma imagem de fundo na área de fronteira a fim de criar o design de borda recortada você pode ver abaixo. Eu também mostrarei como você pode tornar o design responsivo usando unidades de viewport.
Código Inicial
O único requisito na frente HTML é um elemento de bloco:
Nós precisaremos reuso as dimensões (largura e altura) e os valores da largura da borda do div, então eu vou apresentá-los como variáveis CSS. A variável --W denota o largura do .cb elemento de bloco, --h indica sua altura, --b vai para o largura da borda, e --b2 para a largura da borda multiplicada por 2. Mais tarde veremos o uso da última variável.
Estou dimensionando o A unidade Vamos melhorar o código acima adicionando um fundo e definindo a borda, altura e largura usando nossas variáveis CSS predefinidas. Veja como a demonstração deve se parecer agora: Precisamos da imagem de fundo para cobrir toda a área do Se você deseja dar à imagem de plano de fundo um tamanho fixo, apenas certifique-se de que o tamanho que está dando permite cobrir a área da borda da imagem. o largura da imagem de fundo [ Da mesma forma, altura da imagem de fundo [ Desta forma, dimensionamos a imagem de fundo para uma área que é igual ao tamanho do o Nota: Se você está adicionando preenchimento ao É isso que temos agora: Agora que cobrimos a área de fronteira com a imagem de fundo, tudo o que resta é cobrir a área central dentro da fronteira (área exclusiva das fronteiras) com uma cor sólida, para a qual alcançamos um A sombra horizontal com valor Na demonstração do Codepen, você pode ver uma borda branca ao redor da imagem. Há um famoso truque de usando sombras de caixa para criar várias bordas-podemos usar a mesma técnica para adicionar uma ou mais bordas coloridas sólidas para o nosso design. A atualização o Na minha demonstração final do Codepen, eu coloquei o código para a imagem de fundo e a cor de sombra da caixa em uma classe separada. Isto é opcional, mas pode ser extremamente útil se você quiser reutilize o layout do design de borda recortada em vários elementos, e adicione a estética (imagem de fundo + cor) para cada elemento de forma independente. Eu adicionei uma classe chamada Desde a Para definir o valor do Já que as dimensões estão todas na unidade Nota: Não se esqueça de adicionar a metatag da viewport para a sua página HTML, se você decidiu otimizá-lo para exibição móvel.vw unidade (você pode usar unidades fixas se quiser). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2);
Explicação rápida -
vw e vh unidadesvw representa o 1/100º da largura da viewport. Por exemplo, 50vw é 50 partes de uma largura de viewport cortado verticalmente em 100 partes iguais, enquanto 50v é 50 partes de uma altura de viewport cortado horizontalmente em 100 partes iguais. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); plano de fundo: url (bg.jpg); border: var (- b) sólido transparente; altura: var (- h); largura: var (- w);
Tamanho da imagem de fundo
fundo valor que estou dando: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) sólido transparente; altura: var (- h); largura: var (- w);
calc (var (- w) + var (- b2))] é a soma do largura do div [var (- w)] e as largura das bordas esquerda e direita [var (- b2)].calc (var (- h) + var (- b2))] é a soma do altura do div [var (- h)] e as largura das bordas superior e inferior [var (- b2)].div (incluindo a área de fronteira).Centro palavra chave alinha a imagem de fundo para o centro do div.div, lembrar de incluir a área de preenchimento para o tamanho do plano de fundo também, o mesmo que a área de fronteira.
Cubra a área exclusiva da fronteira
Sombra da caixa inserir. .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) sólido transparente; box-shadow: inserção var (- w) 0 0 rgba (0,120,237, 0,5); altura: var (- h); largura: var (- w);
var (- w) abrange toda a largura do div. O uso de rgba função de cor permite alguma transparência para ser adicionado na mistura, no entanto, você também pode usar uma cor opaca se você quiser cobrir totalmente a área central.
Adicione uma borda extra com
Sombra da caixaSombra da caixa valor é: .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundo: url (bg.jpg) centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) sólido transparente; box-shadow: inserção var (- w) 0 0 rgba (0,120,237, 0,5), 0 0 0 calc (var (- b) / 2) branco; altura: var (- h); largura: var (- w);
calc (var (- b) / 2) função cria uma sombra do metade da largura da borda.
Opcional: Layout e estética separados
.poster1 ao .poster1 --tbgc: rgba (0,120,237, 0,5); background-image: url ("http://bit.ly/2eQBij2"); fundo é uma propriedade abreviada, suas propriedades de longhand podem ser sobrepostas / configuradas individualmente. Assim, podemos definir imagem de fundo em .poster1, e remova o valor do URL do fundo propriedade em .cb.Sombra da caixa, podemos usar outra variável CSS. o --tbgc variável mantém o valor da cor queremos dar para a box-shadow (lightblue na demo), então entre as regras de estilo para .cb nós substitua o valor da cor do Sombra da caixa propriedade com var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; - b2: calc (var (- b) * 2); fundo: centro / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) sólido transparente; box-shadow: inserção var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) branco; altura: var (- h); largura: var (- w);
Código para o modo retrato
vw, será parece muito pequeno quando você está visualizando o desenho no modo retrato (largura menor em relação à altura) - todos os dispositivos móveis estão por padrão. Para resolver este problema, interruptor vw com vh, e redimensionar o design como achar melhor para modos de retrato. @media (orientação: retrato) .cb --w: 35vh; --h: 40vh; --b: 4vh;
