Fondo degradado con CSS3


Hasta el momento existen dos formas establecidas por CSS3 para crear un gradiente, ya que desafortunadamente Webkit (el framework que esta presente en navegadores como Safari y Chrome) y Mozilla (controla el CSS3 en Firefox) no llegaron a un acuerdo en lo que a este tema se refiere. Es esto y la sintaxis lo único que diferencia a los dos códigos que utilizaremos en este artículo, ya que producen básicamente el mismo resultado.

  • La sintaxis del gradiente Webkit es la siguiente:

    Donde:

    • tipo: Puede ser linear o radial, es decir que el degradado se haga mediante lineas o mediante círculos.
    • punto: Es un par de valores separados por espacios, puede ser indicado con números, porcentajes o las palabras clave top, bottom, left y right.
    • radio: Es un número, y sólo se puede especificar cuando el tipo de degradado es radial.
    • parada: Función con dos argumentos, un número y un color, indicando donde debe terminar el gradiente, también se pueden utilizar las funciones from y to para especificar esto.
  • Fondo con gradiente con Mozilla:

    Donde:

    • tipo: Definidio al inicio de la sentencia, como vemos linear está en el nombre -moz-linear-gradient.
    • punto: Define la posición horizontal y vertical en donde iniciará el degradado, y se puede usar con porcentaje, pixeles, o palabras claves (left, center, right para horizontal y top, center, bottom para vertical), si no es especificado se inicia en el centro por defecto.
    • angulo: Se puede usar un ángulo en vez de dar un punto, por ejemplo si damos 15deg (15 grados) en la sentencia -moz-linear-gradient(left 15deg, black, white); obtendremos un degradado que inicia con 15 grados de inclinación de izquierda a derecha.
    • parada: Al igual que en Webkit, con Mozilla se puede utilizar el “color-stop” como parada para definir hasta donde queremos que llegue un color, y donde inicia otro.
  • Ejemplos:

    Degradado 180º

    Degradado 90º

    Degradado Radial

NOTA: Los colores también se pueden especificar con su rgb correspondiente, y la nueva propiedad de opacidad de CSS3 de la siguiente manera: rgba(255,255,255,.5)

NOTA: Aquís os dejo un generador de gradientes para CSS3 al estilo Photoshop.

Dejar un Comentario