Degradados con CSS3 2h818

Por Tutorial
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 z56r

<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  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  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  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  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  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  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
</section>
Ver resultados
Compartir

Mi nombre es Alexander fundador y CEO, y me gusta llamarme un Geek. Amo la informática, tecnología y todo lo que está relacionado con ella. Inicié este sitio con la intención de compartir conocimientos como cursos en línea, tutoriales y videotutoriales. Estoy muy entusiasmado con la información que he descubierto y compartido hasta el momento. La verdad es que lo he hecho con el mayor de los gustos. Así es, soy un Geek con una visión para compartir conocimiento. Leer mas... 2c611u

Artículos Relacionados 4s2d70