quinta-feira, 24 de maio de 2018

🖌 CSS | Personalizando a linha horizontal (hr) com cores e listras

Este post é uma continuação do que escrevi em 2009:

Isso significa que aqui vamos evoluir nos exemplos e brincar um pouco com gradientes e sombras.

Criei esse padrão listrado recentemente para uma página do blog Resenha Perfume:

<hr style="background:repeating-linear-gradient(45deg, transparent, transparent 10px, lightpink 10px, #ffe4e1 20px), linear-gradient(to bottom, beige, #ffe4c4); color:transparent; height:5px; border:0;"/>

Resultado:




Alterando as cores:

<hr style="background:repeating-linear-gradient(45deg, transparent, transparent 10px, #99ffff 10px, #99cc99 20px), linear-gradient(to bottom, #cccccc, #999999); color:transparent; height:5px; border:0;"/>



Neste outro código, aproveito um estilo de listra que usei no post sobre barra de rolagem colorida:

<hr style="height:5px; border:0; background:repeating-linear-gradient(45deg, transparent, transparent 10px, #990099 10px, #990099 20px), linear-gradient(to bottom, #eeeeee, #999999);"/>



<hr style="height:5px; border:0; background:repeating-linear-gradient(45deg, transparent, transparent 10px,#99cc00 10px,#99cc00 20px), linear-gradient(to bottom, #eeeeee, #999999);"/>



<hr style="height:5px; border:0; background:repeating-linear-gradient(45deg, transparent, transparent 10px,#0099cc 10px,#0099cc 20px), linear-gradient(to bottom, #eeeeee, #999999);"/>



Nesse exemplo, a linha horizontal vira um retângulo com sombra interna [inset]:

<hr style="height:15px; border:0; background:#40e0d0; box-shadow:0px 0px 5px #000000 inset;"/>



Agora com sombra externa:

<hr style="border:0; box-shadow:5px 5px 10px #880088; background:#d8bfd8; padding:5px; margin:20px;"/>



Degradê vertical:

<hr style="height:10px; border:0; background:linear-gradient(#cccccc, beige, tan, brown);"/>



Degradê horizontal:

<hr style="height:10px; border:0; background:linear-gradient(to right, purple, darkred, red, orange, gold, pink, deeppink);"/>



Degradê diagonal:

<hr style="height:10px; border:0; background: linear-gradient(to bottom right,#000000,#cc0033,#ff00ff);"/>



Nesse degradê vertical, a cor da linha horizontal muda com a rolagem de página:

<hr style="height:5px; border:0; background:linear-gradient(#ff00ff, #cd853f, #c71585, #808000, #6a5acd, #003300, #cc6699) fixed;"/>



Degradê segmentado:

<hr style="height:5px; border:0; background:repeating-linear-gradient(to right, pink 5px, blue 50px);"/>



<hr style="height:5px; border:0; background:repeating-linear-gradient(to right, white, #99cc00 2px, gold 3px);"/>



<hr style="height:5px; border:0; background:repeating-linear-gradient(90deg,red,tan 7%,brown 10%);"/>



Degradê circular:

<hr style="height:5px; border:0; background:radial-gradient(circle, tan, deeppink, black);"/>



Assim como outros elementos, você pode fazer a linha horizontal mudar de cor e tamanho quando o visitante passa o mouse:

<style> hr {border:0; height:5px; background:#99cc00;} hr:hover {height:7px; background:#f08080;} </style>


Para escolher suas cores favoritas, use a tabela.

Até mais!

Pix meutedio arroba mail ponto com

2 comentários:

  1. Como coloco um "limite" na linha? Sem que ela passe a página toda

    ResponderExcluir
    Respostas
    1. width:500px;

      Sendo que 500 você troca pela largura desejada.

      Excluir

Todos os comentários são moderados pela autora do blog.