Bordas personalizadas responsivas com CSS background-repeat
Há muitos anos, devs pelo mundo todo sonham em ter à disposição maneira menos complicadas de fazer bordas personalizadas com CSS.
Mesmo antes do CSS geração Alpha, já era possível conseguir bordas personalizadas, mas a duras penas. Hoje em dia, existem maneiras muito mais acessíveis de se conseguir o resultado e, surpreendentemente, uma dessas maneiras é usando propriedades de background!
Sim, através de uma dobradinha com background-size e background-repeat, é possível conseguir bordas personalizadas. Melhor ainda: é possível conseguir bordas personalizadas responsivas!
2 valores pouco usados de background-repeat
É bastante comum usarmos background-repeat no dia-a-dia da codificação CSS, mas a maioria não usa lém dos valores mais comuns, como no-repeat, repeat-x ou repeat-y.
Existem outros valores possíveis, inclusive aqueles que possibilitam fazer bordas personalizadas responsivas com CSS: space e round.
background-repeat: space
Ao usar o valor space para a propriedade background-repeat, é criada uma repetição da imagem em formato “tile”, de modo que não haja cortes na imagem e, sempre que houver espaço, mais dela preencherão o background.
Perceba, à direita, que não há “cortes” na repetição da imagem.
Em combinação com a propriedade background-size, é possível se chegar a efeitos interessantíssimos. Por exemplo, neste comparativo, consta background-size: 200px.
Dessa maneira, é possível controlar com mais precisão o efeito “tile” alcançado, personalizando-o conforme a imagem e o efeito visual que se quer alcançar.
background-repeat: round
O efeito é o mesmo que quando se usa space, com a diferença que, ao invés de espaçar o “tile” para acomodar as repetições, cada uma delas pode ser redimensionada para fazer caber a imagem no espaço do background.
Veja como cada repetição foi redimensionada para não haver “cortes”.
Dependendo da imagem usada para a repetição no background (e da possível combinação com background-size), é recomendado usar space ou round, a depender dos efeitos visuais pretendidos.
Bordas personalizadas responsivas
Depois de recapitular sobre esses 2 valores menos usuais de background-repeat, já é possível explicar como funciona a técnica para fazer a borda personalizada responsiva com CSS.
Já abrindo o jogo: trata-se de uma gambeta.