Inicia sesión



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




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






Trading en Tacones – Mujeres empoderadas con las inversiones

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-05
  • Categorias: Forex Noticias Tutorial

Como agregar un icono de Font Awesome en CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web @font-face WebSite webmasters Noticias Tutorial

Iconos sociales para Datalife engine y para cualquier sitio Web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-12-04
  • Categorias: Diseño Web Redes Sociales WebSite webmasters Noticias Tutorial

Cursos que aún ofrecen certificados gratuitos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-26
  • Categorias: Cursos Noticias Tutorial Aprendizaje

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial