Fondo degradado con CSS3 44


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

44 Comentarios en “Fondo degradado con CSS3