Blog Reacción Estudio

¡Tu zona de aprendizaje!

Regla horizontal difuminada con CSS

Las reglas horizontales por defecto (<hr>) en HTML son bastante feas, con el siguiente código CSS le podremos dar un aspecto de difuminado bastante elegante.

Nos quedaría una regla horizontal como ésta:


Vamos con el código

CSS

hr.faded {
  clear: both; 
  float: none; 
  width: 100%; 
  height: 1px;
  margin: 1.4em 0;
  border: none; 
  background: #ddd;
  background-image: -webkit-gradient(
      linear,
      left bottom,
      right bottom,
      color-stop(0, rgb(255,255,255)),
      color-stop(0.1, rgb(221,221,221)),
      color-stop(0.9, rgb(221,221,221)),
      color-stop(1, rgb(255,255,255))
  );
  background-image: -moz-linear-gradient(
      left center,
      rgb(255,255,255) 0%,
      rgb(221,221,221) 10%,
      rgb(221,221,221) 90%,
      rgb(255,255,255) 100%
  );
}

HTML

<hr class="faded" />

Y así de fácil y sencillo obtenemos una elegante regla horizontal (<hr>) con unas pocas líneas de CSS.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR