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.
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.
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. 🙃
A técnica consiste em customizar um elemento qualquer com algum desses valores de background-repeat, criando um elemento-filho que não vai ocupar toda a extensão do ancestral, dando a impressão que se trata de uma borda.
Já que space ou round não permitem que haja “cortes” no tile que se forma, é como se a “borda” se adaptasse ao tamanho do elemento, adicionando ou removendo repetições da imagem conforme necessário.
Para um exemplo mais didático, considere esta estrutura HTML:
|
1 2 3 |
<div class="c-box"> <p class="c-box__content">Lorem ipsum</p> </div> |
O elemento-pai, c-box, receberá a aplicação da técnica de background; o elemento-filho conterá o conteúdo, ocupando pouco menos que as dimensões totais do ancestral, dando a impressão de borda.
Confira (o elemento conta com um handle em baixo e à direita para não precisar ficar redimensionando a viewport):
See the Pen Bordas responsivas com background-repeat by dpw (@desenvolvweb) on CodePen.
Conclusão
Alguns poderiam alegar que também é possível conseguir efeito similar (com até mais possibilidades) usando border-image. Para estes, só temos uma coisa a dizer: vocês estão certos.
Entretanto, para atingir o potencial de border-image, é preciso uma preparação anterior maior, chegando até ser necessário mexer com programas de edição de imagem.
A técnica mostrada para conseguir bordas personalizadas responsivas é bastante simples de entender e de aplicar, sendo suficiente para necessidades básicas de bordas personalizadas (que, convenhamos, são a maioria).
E você, já conhecia essa técnica de bordas personalizadas responsivas? Pretende usar em algum projeto? Conta pra gente aí nos comentários!