3

Aprendiendo CSS3 – Degradados

6Mar
en CSS, CSS 3, Desarrollo web, Tutoriales, Web

Hoy vamos a aprender cómo crear degradados con CSS3, aunque en diseño se dice que el uso de degradados degrada, podemos lograr algunos buenos efectos sin necesidad de utilizar un editor de imágenes.

El efecto degradado puede ser lineal o radial, y para los colores podemos utilizar los códigos hexadecimales, el modo rgb o por su nombre. Este tipo de efecto se puede crear con dos o más colores.

Empezamos preparando nuestro html.


<!DOCTYPE html>

<html lang="es">

    <head>

        <meta charset="utf-8" />

        <title>Degradados</title>

        <style>

        .box {

            width: 200px;

            height: 200px;

        }

        #degradado {

        }

    </style>

</head>

<body>

    <div id="degradado"></div>

</body>

</html>

Los degradados se crean dentro de la propiedad background-image. Para crear un degradado lineal se utiliza la propiedad –moz-linear-gradient(), dentro de la cual van un conjunto de parámetros. Se vería así:


background-image: -moz-linear-gradient(parametro1, parametro2);

El primer parámetro es el origen desde donde comenzará el degradado y/o el ángulo de disposición del gradiente de color. El degradado puede comenzar desde arriba, abajo o desde una esquina cualquiera. Por defecto los degradados serán distribuidos en línea recta, pero podemos indicar un ángulo distinto con el que se vaya produciendo el gradiente de color.

En el segundo parámetro podemos definir los colores (separados por comas) y el lugar hasta donde se muestran cada uno.

Este degradado comienza en la esquina superior izquierda y se crea un gradiente que va hacia la esquina opuesta.


background-image: -moz-linear-gradient(left top, blue, green);

Se puede lograr lo mismo si define el ángulo de rotación adecuado.


background-image: -moz-linear-gradient(300deg, blue, green);

Un degradado puede tener todos los colores que se quiera.


background-image: -moz-linear-gradient(blue, green, red, pink,black);

También se puede especificar hasta que lugar debe llegar un color usando paradas de color. Veamos cómo le asignamos un 80 por ciento al color azul para pare en ese lugar.


background-image: -moz-linear-gradient(blue 80%, green);

Como la propiedad background-image permite poner imágenes como fondo de un objeto, podemos combinarlo con un degradado que tenga transparencia usando los colores en modo rgba. Veamos un ejemplo con esta imagen.


background-image: -moz-linear-gradient(rgba(0,0,255,.2), rgba(0,0,0,.8)), url('nn_growth_chart.png');

Para los degradados radiales utilizamos la propiedad -moz-radial-gradient, con esta se pueden hacer las mismas acciones, veamos el ejemplo de arriba con un degradado radial.


background-image: -moz-radial-gradient(rgba(0,0,255,.2), rgba(0,0,0,.8)),url('nn_growth_chart.png');

Pueden experimentar con todas las propiedades aprendidas y crear efectos interesantes. Saludos y nos vemos en el próximo tutorial.

3 Comentarios

    • abraham dice:

      Pudieras ser más explícito, ¿en qué navegador los estas probando?, ¿Qué versión?, ¿Qué propiedad no te pincha?.
      Te recuerdo que las propiedades que puse aquí son para firefox, si usas chrome, la cosa cambia.

  1. JorgeN dice:

    muy buen post, sigo pensando que aqui falta la posibilidad de poder guardarlo como pdf

Dejar un comentario a JorgeN

¿Eres humano? Entonces resuelve esta operación: * Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.