0

¿Alguno sabe cómo ponerle un linear-gradient al <hr>?

la clase es skills-hr y no noto las transparencias, simplemente está blanco como si no se aplicara el estilo. A parte tengo que revisar Bootstrap y unas cositas, pero el punto principal es que no me aplica el estilo al <hr>, es un detalle, pero ya lo quiero sacar.

Decidí no agregar más cosas de HTML ya que no vienen al caso y considero que con esto es suficiente para resolver la pregunta, de no ser así pedir el resto.

*{
    box-sizing: border-box;
}
h1, h2, h3,p, span{
    font-family: 'Montserrat', sans-serif;
}
/*HEADER*/
.header{
    display: flex;
    margin-top: 80px;
    margin-bottom: 20px;
    margin-left: 30px;
    margin-right: 30px;
}
.header-content h1, h3 {
    padding: 0 10px;
    color: #000000e8;
}
.header-content h3{
  width: 50%;
}
/*SERVICIOS*/
  .servicios{
      text-align: center;
  }

.row-serv{
  display: grid;
  grid-template-columns: 1fr 1fr ;
  gap: 20px;
  margin: 10px 10px;
}
.row h3{
  color: #000;
}
.row p{
  text-align: start;
}
.row-left{
  padding-top: 10px;
  padding-left: 30px;
}
.row-right{  
  padding-top: 10px;
  padding-right: 30px;
}
.dis{
  padding-bottom: 5px;
}
.admin{
  padding-bottom: 5px;
}
/*SKILLS*/
.skills-container{
  height: 100vh;
  padding-top: 50px;
  background: linear-gradient(#36bed9,#29bad7);
  
}
.col-xs-12{
  text-align: center;
}
.skills-hr{
  background: linear-gradient(to right, transparent, #FFFFFF, transparent);
}
img{
  width: 10rem;
  max-width: 100%;
  height: 100%;
}
<div class="skills-container">
        <div class="skills">
            <div class="row">
                <div class="col-xs-12">
                    <h2>SKILLS</h2>
                    <hr class="skills-hr"/>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/html.svg" alt="HTML5">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/css.svg" alt="CSS3">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/javascript.png" alt="Javascript">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/bootstrap.svg" alt="Bootstrap">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/jquery.svg" alt="jQuery">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/git.svg" alt="Control de versionado">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/npm.svg" alt="NPM">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/react.svg" alt="React.js">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/firebase.svg" alt="firebase">
                </div>
                <div class="col-sm-3 col-xs-4 image-container">
                    <img src="img/bd.png" alt="Bases de datos relacional">
                </div>
                
            </div>
        </div>
    </div>

2
  • 1
    deja un poco más de contexto, el html y la hoja de estilos para ver si no hay algo pisandolo, porque en teoría eso esta correcto Commented el 5 mar. 2021 a las 21:58
  • ahora lo edito, gracias!
    – Nacho
    Commented el 5 mar. 2021 a las 23:22

1 respuesta 1

1

Debes ocultar los estilos por defecto que tiene la etiqueta <hr>, para ello puede jugar con la propiedad border: 0;, seteas el ancho width: 80%;, el alto height: .1rem; y finalmente le asignas el color con la propiedad background-image: linear-gradient(to right,transparent,#f5f9fa,transparent);.

Ajústalo a tu necesidad para obtener el resultado que deseas.

.container {
  background-color: #36bed9;
  width: 100%;
  height: 100px;
}

h3 {
  text-align: center;
  color: #fff;
}

.linea {
  border: 0;
  width: 80%;
  height: .1rem;
  background-image: linear-gradient(to right,transparent,#f5f9fa,transparent);
}
<div class="container">
  <h3>skillset</h3>
  <hr class="linea">
</div>

1
  • Buenísimo! Muchos gracias!!!
    – Nacho
    Commented el 5 mar. 2021 a las 23:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.