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

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

• HTML | Linha horizontal

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!