Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

Gradiente lineales con CSS3. Degradados con colores

20 mayo, 2012
en CSS
0
Reglas CSS por defecto para los navegadores
Share on FacebookShare on Twitter

El desgradado más sencillo que podemos hacer con CSS3 es el degradado lineal mediante la propiedad linear-gradient. Podremos variar el color, donde empieza, que ángulo, donde termina…

El código que utilizaremos podría ser el siguiente:

background-image: linear-gradient(top, #f00 0%, #00f 100%);

Y tendríamos lo que muestra esta imagen

Gradiente CSS3
Gradiente CSS3 lineal

Parece sencillo de utilizar, pero tenemos que tener en cuenta que no solo es copiar el código de arriba. Como es muy nuevo solamente funciona con los últimos navegadores como Opera, Chrome, Safari y Firefox. Además tenemos que especificar la etiqueta de estilo propietaria de cada navegador. Con esto el código que debemos de utlizar para que funcione correctamente es:

background: -webkit-linear-gradient(top, #f00 0%, #00f 100%);
background: -moz-linear-gradient(top, #f00 0%, #00f 100%);
background: -o-linear-gradient(top, #f00 0%, #00f 100%);
background: linear-gradient(top, #f00 0%, #00f 100%);

En este caso concreto tenemos un degradado del rojo al azul y ocupa el 100% del elemento y comienza en la parte de arriba del elemento (debido a la etiqueta [highlight]top[/highlight] utilizada)

Para conseguir un degradado de izquierda a derecha, solamente tendríamos que cambiar la etiqueta top por la etiqueta left, como es este ejemplo (aprovechamos para utlizar otros colores)

background: -webkit-linear-gradient(left, #0f0 0%, #f0f 100%);
background: -moz-linear-gradient(left, #0f0 0%, #f0f 100%);
background: -o-linear-gradient(left, #0f0 0%, #f0f 100%);
background: linear-gradient(left, #0f0 0%, #f0f 100%);

Veamos la imagen

Gradiente Lineal Izq-Derecha
Gradiente Lineal Izq-Derecha

Otra variante es parar uno de los colores, [highlight]color stop[/highlight], es una parada de color  que está asignada con el 50% en el primer color. Quiere decir que el primer color estaría homogeneo (sin degradado) hasta el 50% del tamaño del elemento y que luego comenzaría a degradarse hacia el segundo color.

Un código para este caso podría ser:

linear-gradient(#00f 50%, #000);

Un código mas complejo utilizando color stop puede ser el siguiente: vemos que no hay gradiente, esto es debido a que comento


background: -webkit-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%);
background: -moz-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%);
background: -o-linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%);
background: linear-gradient(top, #00f 50%, #0ff 25%, #f0f 25%);
Gradiente CSS - Colo Stop
Gradiente CSS – Colo Stop

Podemos variar el ángulo e incluir todos los colores que queramos, por ejemplo (no espedifico todo el código necesarios para los navegadores por ahorrar espacio)

background: linear-gradient(45deg, #66f 10%, #f80 30%, #ffc 60%);

Donde: el degradado comienza en la esquina inferior izquierda al 10% del contenedor y continua con el segundo color hasta el 30% de lcontenedor para terminar con u ntercer color hasta el final.

Este mismo ejemplo para comenzar en la esquina superior izquierda tendríamos:

background: linear-gradient(-45deg, #66f 10%, #f80 30%, #ffc 60%);

Donde el águnlo es -45º en lugar de los 45º indicados en el primer caso.

Las variaciones pueden ser muchas y podremos combinar todo tipo de colores. El límite está solamente en tu imaginación.

Ver ejemplos utilizados

Etiquetas: color stopcssgradienteslinear-gradient
ANUNCIO
Post anterior

Diseño al estilo de Pinterest sólo con columnas CSS

Próximo Post

Reglas CSS por defecto para los navegadores

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

Adobe Photoshop Lightroom

Gestión de ficheros y carpetas en Lightroom

8 febrero, 2012
0 to 255: encuentra variaciones de colores para la web

Cómo crear tu propia Estrategia de SEO Local

14 julio, 2022
Legibilidad: ¿simplificarse o abrirse?

Legibilidad: ¿simplificarse o abrirse?

12 agosto, 2021
Opinión sobre mi experiencia estudiando el Máster en Dirección de Marketing y Ventas en EAE en modalidad online

Opinión sobre mi experiencia estudiando el Máster en Dirección de Marketing y Ventas en EAE en modalidad online

12 noviembre, 2020

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .