Criar bordas multicoloridas usando CSS

A propriedade de borda CSS tem algumas opções de personalização, como opções como sólido, tracejado, pontilhado, etc. No entanto, quando se trata de cor da borda, só podemos ter uma cor sólida por lado. Mas, há outra maneira de obter uma linha multicolorida usando mais algumas propriedades que você pode não ter pensado, vamos dar uma olhada.

Sólido

Tracejadas

Pontilhado

Bordas multicoloridas

Para obter uma borda multicolorida como mostrado acima, usaremos a propriedade position e o seletor ::after com um gradiente de cor. Primeiro, vamos fazer uma área de cabeçalho usando uma classe HTML <div> e depois vamos estilizá-la com CSS para ter uma borda multicolorida dividindo-a e o conteúdo abaixo.

Crie seu HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Agora, vamos estilizá-lo um pouco com CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Agora você deve ter algo parecido com isso:

Com isso, agora podemos adicionar ::after ao .ost-multi-header selector . Mas, antes disso, gostaria de explicar um pouco o que ::after está fazendo e por que precisamos da propriedade position para a borda multicolorida. O ::after cria um pseudo-elemento com o que estiver na propriedade content no final do elemento selecionado. No nosso caso, esse elemento é .ost-multi-header . Vamos fazer um “Hello World!” consagrado pelo tempo! exemplo para ilustrar.

Adicione isso ao seu CSS:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

Como você pode ver, agora temos um "Hello World!" elemento abaixo do título do cabeçalho. Como nosso elemento pai, .ost-multi-header , tem a propriedade position como relative , podemos dar a um elemento filho uma posição absolute . Isso nos permitirá mover nosso novo pseudo-elemento que criamos com ::after para onde quisermos dentro do elemento pai facilmente. Nós o colocamos na parte inferior e o movemos mais de 20px da esquerda dentro do elemento pai. Observe que, se o elemento pai não tiver a propriedade position definida como relativa, nosso elemento posicionado absoluto estaria na parte inferior e 20px à esquerda da janela de visualização do navegador.

E a nossa borda colorida? Vamos estilizar o plano de fundo do nosso pseudo-elemento para ser nossa borda multicolorida usando um gradiente. Os gradientes CSS podem ser lineares ou radiais. Para nossa borda, usaremos linear-gradient . Muito simplesmente, isso nos daria a fronteira que buscamos.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Mas, vamos desacelerar um momento para um passo-a-passo. Primeiro, a propriedade content ainda está lá, embora esteja em branco. Isso porque, sem a propriedade content , o pseudoelemento nunca é criado; então, nós precisamos. Precisamos definir a altura do nosso pseudo-elemento, nossa altura da borda. Por que definir as propriedades left e right como 0? Sem uma largura definida, isso alongará o pseudoelemento para ter 100% de largura dentro do elemento pai. Pode parecer muito, mas as configurações linear-gradient estão apenas dizendo à cor para fluir da esquerda “para a direita”, e colocamos as cores que queremos em certas porcentagens do plano de fundo.

Embora tudo o que estejamos fazendo seja escolher quais cores serão em porcentagens específicas, é muito trabalho de perna. Felizmente, existem recursos online gratuitos que ajudam tremendamente com gradientes de cores. O Ultimate CSS Gradient Generator da ColorZilla é uma ótima ferramenta que inclui várias propriedades de gradiente para suportar navegadores mais antigos.

Já temos um gradiente configurado na ferramenta, então podemos usar este link para ver as configurações exatas usadas neste tutorial: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,fev123+66.2184cd+66.2184cd+100. Deve ficar assim:

Existem muitas configurações neste site, mas vamos nos concentrar em quais configurações precisamos para criar a aparência que usaremos para nossa borda. Vamos decompô-lo:

1. Presets - Estes podem ser um ótimo ponto de partida!
2. Barra deslizante - Você pode adicionar, remover e editar cores aqui
3. Paradas - Esta seção permite alterar as configurações de opacidade e localização de cada cor. Basta clicar na caixa de cores no controle deslizante acima para alterar qual você está controlando nesta seção.
4. Preview - Aqui você pode ver imediatamente os resultados de suas alterações.
5. Orientação e Tamanho - Isso permite que você mude de horizontal, vertical, diagonal ou radial. E para definir o tamanho do gradiente.
6. Código CSS - O código gerado com um link permanente para que você possa sempre voltar e editar seu gradiente facilmente.

Não estávamos procurando um gradiente desbotado em nosso caso, mas sim uma transição sólida e plana entre duas cores, então tudo o que precisamos fazer é empilhar as duas cores uma sobre a outra onde queremos que isso aconteça. Em nosso exemplo, empilhamos cores em 33% e 66%, respectivamente.

Sinta-se à vontade para brincar com as configurações, sabendo que o que você vê na visualização é o que o código irá gerar. Quando você configurar a aparência da maneira desejada, poderá usar o botão “copiar” no canto inferior direito da caixa de código.

Se você copiou o código como eu tinha no link, seu CSS final ficará assim:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

E esse CSS produzirá esse sublinhado multicolorido que é totalmente responsivo:

Aqui vamos nós! Não tivemos que adicionar o preenchimento de 6px na parte inferior de .ost-multi-header , mas o filho posicionado absolute não afeta mais a altura do elemento pai. Podemos deixá-lo flutuar em cima do nosso conteúdo no elemento pai ou adicionar padding para garantir que ele não cubra nenhum conteúdo que não queiramos obstruir.

Aqui está um link para este exercício recriado no CodePen para que todos possam editar e aprender sem se preocupar.

Uma nota final, alguns navegadores mais antigos suportam apenas o seletor de dois-pontos simples :after , e não o padrão moderno double ::after . Você pode usar os dois-pontos simples se quiser estar seguro. Ele também funcionará em navegadores modernos por enquanto.