Degradados con CSS3


En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en degradado utilizando la propiedad CSS background

El CSS necesario para generar un degradado es relativamente corto. Necesitamos ciertos datos: un mínimo de dos colores y una dirección. De blanco a negro desde la izquierda a la derecha. Este sería el caso más simple:
background: -webkit-linear-gradient(90deg, white 10%, black 90%);
background: -moz-linear-gradient(90deg, white 10%, black 90%);
background: -ms-linear-gradient(90deg, white 10%, black 90%);
background: -o-linear-gradient(90deg, white 10%, black 90%);
background: linear-gradient(90deg, white 10%, black 90%);
Simple y rápido. la propiedad background le aplicamos un gradiente lineal (linear-gradient) con una direccionalidad de 90 grados (de izquierda a derecha) entre dos colores, blanco y negro. Puedes notar que ambos colores tienen un valor en %. Eso indica en qué momento del degradado son aplicados. El color blanco comenzará a degradarse a partir del 10% de ancho, hasta el negro, que será totalmente negro cuando el ancho del contenedor alcance el 90%.

Estos son algunos ejemplos prácticos

<style>

.section_item {
  height: auto;
  max-width: calc(100vw - 30px);
  margin: 15px;
  padding: 10vw;
  z-index: 1;
  position: relative;
  text-align: center;
}
.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: space-around;
  -ms-flex-line-pack: distribute;
  align-content: space-around;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
.section_item p {
  font-size: 18px;
  font-size: 1rem;
  color: #fff;
  max-width: 700px;
  line-height: 1.5;
}

/* Background colors */
.color-2 {
background: -webkit-linear-gradient(90deg, white 10%, black 90%);
background: -moz-linear-gradient(90deg, white 10%, black 90%);
background: -ms-linear-gradient(90deg, white 10%, black 90%);
background: -o-linear-gradient(90deg, white 10%, black 90%);
background: linear-gradient(90deg, white 10%, black 90%);
}
.color-3 {
  background: -webkit-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:    -moz-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:     -ms-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:      -o-linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
  background:         linear-gradient(90deg, #65997d 10%, #fccb6e 90%);
}

.color-1 {
    background: -webkit-linear-gradient(90deg, #53bbbf 10%, #0f1939 90%);
    background:    -moz-linear-gradient(90deg, #53bbbf 10%, #0f1939 90%);
    background:     -ms-linear-gradient(90deg, #53bbbf 10%, #0f1939 90%);
    background:      -o-linear-gradient(90deg, #53bbbf 10%, #0f1939 90%);
    background:         linear-gradient(90deg, #53bbbf 10%, #0f1939 90%);
}
.color-4 {
    background: -webkit-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
    background:    -moz-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
    background:     -ms-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
    background:      -o-linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
    background:         linear-gradient(90deg, #e74d6b 10%, #8cc8ac 90%);
}
.color-6 {
    background: -webkit-linear-gradient(90deg, #e75053 10%, #f9d423 90%);
    background:    -moz-linear-gradient(90deg, #e75053 10%, #f9d423 90%);
    background:     -ms-linear-gradient(90deg, #e75053 10%, #f9d423 90%);
    background:      -o-linear-gradient(90deg, #e75053 10%, #f9d423 90%);
    background:         linear-gradient(90deg, #e75053 10%, #f9d423 90%);
}
.color-7 {
    background: -webkit-linear-gradient(90deg, #f7ba96 10%, #82cde3 90%);
    background:    -moz-linear-gradient(90deg, #f7ba96 10%, #82cde3 90%);
    background:     -ms-linear-gradient(90deg, #f7ba96 10%, #82cde3 90%);
    background:      -o-linear-gradient(90deg, #f7ba96 10%, #82cde3 90%);
    background:         linear-gradient(90deg, #f7ba96 10%, #82cde3 90%);
}

</style>


<section class="section_item flex-container color-2">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
<section class="section_item flex-container color-3">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
<section class="section_item flex-container color-1">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
<section class="section_item flex-container color-4">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
<section class="section_item flex-container color-6">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
<section class="section_item flex-container color-7">
  <h1 class="flex-item">TL</h1>
  <p class="flex-item">Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
Ver resultados
  • Autor:
  • Editor:
      Tutoriales En Linea
  • Fecha:2019-03-14
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial

Deja un comentario


Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!