Esta vez no voy a hablar de nada nuevo. Muchos diseñadores y maquetadores web están ya incluyendo estos efectos a sus trabajos. Sin embargo, para mí son nuevos :) Los he utilizado con anterioridad pero muy brevemente, y sin tener muy claro qué hacían y por qué exactamente. Si quieres ir directo a los ejemplos, los tienes aquí. ¡Al lío!

Sombras

En CSS todo son cajas; a cada elemento del árbol DOM (salvo a los inline, pero esto no viene a cuento) se le asigna una caja, y mediante CSS definimos su ubicación. Algunos de estos elementos se encuentran sobre otros: imagina un párrafo <p> sobre el elemento <body>. Con CSS3 podríamos hacer que el <p> arroje una sombre sobre <body>. Vamos a ver la sintaxis de esta propiedad en su notación EBNF:

none | <shadow> [ , <shadow> ]*

Donde:

<shadow> = inset? && [ <length>{2,4} && <color>? ]

Traducido viene a dar estas dos opciones:

  1. none – En cuyo caso, no se muestra ninguna sombra.
  2. <shadow> [ , <shadow> ]* – Significa que podemos tener una o más sombras separadas por comas. Cada sombra contiene:
    1. inset – Es un valor opcional. Si se omite, la sombra se arrojará hacia fuera del elemento. En caso de que se especifique ‘inset’, la sombra será arrojada dentro del elemento.
    2. <length>{2,4} – Introduciremos 2, 3 o 4 longitudes:
      1. La primera longitud (obligatoria) establece el desplazamiento horizontal de la sombra. Los valores positivos hacen que la sombra se arroje hacia la derecha, y los negativos hacia la izquierda.
      2. La segunda longitud (obligatoria) establece el desplazamiento vertical de la sombra. Los valores positivos hacen que la sombra se arroje hacia abajo, y los negativos hacia arriba.
      3. La tercera longitud (opcional) especifica el radio blur. Si se introduce cero, la sombra será “afilada”, en caso contrario, contendrá más blur a mayor radio.
      4. La tercera longitud (opcional) establece la difusión de la sombra. Los valores positivos hacen que se expanda, y los negativos que se contraiga.
    3. color – Es el color de la sombra. Este valor es opcional. Si no se ha introducido, se usará el valor de la propiedad ‘color’. Nota: No lo soportan todos los navegadores.

Vamos a ver algunos ejemplos de valores válidos según la notación estándar:

box-shadow: none;
box-shadow: 2px 2px;
box-shadow: inset 2px -2px;
box-shadow: 2px 2px black;
box-shadow: 1em -1em 0.5em #CCCCCC;
box-shadow: 1em -1em 0.5em 1em rgba(118, 118, 118, 0.5);
box-shadow: inset 1em 0 0.5em -1em rgb(0,0,0);
box-shadow: 2px 2px #000, inset -3px 3px gray;
Y ahora, vamos a revisar ejemplos que puedes probar hoy en los navegadores:

Ejemplo 1

box-shadow: 5px 5px #000;

Arroja una sombra negra desplazada 5px a la derecha y 5px hacia abajo. No hemos especificado un blur, por lo que la sombra está afilada

Ejemplo 2

box-shadow: 5px 5px 3px black;

Arroja una sombra negra desplazada 3px a la derecha y 3px hacia abajo, con un desenfoque blur de 3px de radio.

Ejemplo 3

box-shadow: inset 2px -2px 5px #000;

Arroja una sombra interna negra desplazada 2px a la derecha y 2px hacia arriba, con un desenfoque blur de 5px de radio.

Ejemplo 4

box-shadow: 0 0 0.5em 1em rgba(118, 0, 200, 0.5);

Arroja una sombra lila, sin desplazamiento, con 0.5em de radio de blur, y expandida 1em.

Ejemplo 5

box-shadow: 2em 0 0.5em -1em rgb(0,0,0);

Arroja una sombra negra desplazada 2em a la derecha, con un desenfoque blur de 0.5em de radio, y contraída 1em.

Ejemplo 6

box-shadow: 2px 2px 5px #000, -3px -3px 5px red;

Arroja una sombra negra desplazada 2px a la derecha y 2px hacia abajo con un desenfoque blur de 5px. Además, arroja otra sombra roja desplazada 3px a la izquierda, 3px hacia arriba, y un desenfoque blur de 5px.

Ejemplo 7

box-shadow: 5px 5px 5px gold;
border-radius: 15px;

Arroja una sombra dorada desplazada 5px a la derecha, 5px hacia abajo y con 5px de radio blur. Además, vemos que la sombra se comporta sigue correctamente el recorrido del borde redondeado.

Ejemplo 8

box-shadow: 0 8px 5px -5px red;
border-radius: 15px;

Arroja una sombra roja desplazada 8px hacia abajo, con 5px de radio blur, y contraída 5px.

Degradados

Ya hemos visto las sombras, y como has podido comprobar son muy sencillas. Me gustaría decirte que los degradados son igual o más fáciles, pero lamentablemente no es así: se trata de una herramienta muy potente y versátil, por lo que nos ofrece muchas opciones.

Tenemos dos tipos de degradados: lineares y radiales. Los lineales, como su nombre indican, siguen una trayectoria lineal. Por contra, los radiales siguen una trayectoria circular o elíptica.

Degradados lineales

Su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

  • -moz-linear-gradient() para Firefox.
  • -webkit-linear-gradient() para Safari y Google Chrome.
  • -o-linear-gradient() para Opera
  • -ms-linear-gradient() para Internet Explorer 10.

Esta es su notación estándar:

<linear-gradient> = linear-gradient(
    [ [ <angle> | to <side-or-corner> ] ,]?
    <color-stop>[, <color-stop>]+
)

<side-or-corner> = [left | right] || [top | bottom]

Que significa esto:

  1. Contiene un ángulo opcional especificado en 'deg'. Por ejemplo, 90deg. Nota: No está todavía soportado por todos los navegadores.
  2. Un punto de origen opcional precedido por "to", que podría ser left, right, top, bottom, left top, left bottom, right top o right-bottom. Por defecto la trayectoria se traza hacia el lado o vértice opuesto al especificado. Nota: los navegadores que implementan esta propiedad solo funcionan si no se precede por "to".
  3. Dos o más colores, donde cada uno de ellos indica:
    1. El código del color, por ejemplo #FF00FF.
    2. La posición del color. Por ejemplo, 0%, 30px, 100%. Si no se indica posición, se distribuyen a lo largo del recorrido uniformemente.

Al igual que con las sombras, vamos a ver algunos valores válidos de acuerdo a la notación estándar:

background-image: linear-gradient(90deg, yellow, blue);
background-image: linear-gradient(to bottom, red, white);
background-image: linear-gradient(to bottom left, red, black);
background-image: linear-gradient(0deg, #FF0000 10%, #000);
background-image: linear-gradient(to top, red 0%, rgb(129, 5, 205) 50%, #CCC 100%);

Y ahora, algunos ejemplos reales:

Ejemplo 1

background-image: -webkit-linear-gradient(top, black, white);
background-image: -moz-linear-gradient(top, black, white);
background-image: -ms-linear-gradient(top, black, white);
background-image: -o-linear-gradient(top, black, white);

Degradado, de arriba a abajo, comenzando en negro y finalizando en blanco.

Ejemplo 2

background-image: -webkit-linear-gradient(top left, black, white);
background-image: -moz-linear-gradient(top left, black, white);
background-image: -ms-linear-gradient(top left, black, white);
background-image: -o-linear-gradient(top left, black, white);

Desgradado, de la esquina superior izquierda a la esquina inferior derecha, comenzando en negro y finalizando en blanco.

Ejemplo 3

background-image: -webkit-linear-gradient(bottom, red, white, black);
background-image: -moz-linear-gradient(bottom, red, white, black);
background-image: -ms-linear-gradient(bottom, red, white, black);
background-image: -o-linear-gradient(bottom, red, white, black);

Degradado de abajo hacia arriba, comenzando en rojo, después en blanco, y finalmente en negro.

Ejemplo 4

background-image: -webkit-linear-gradient(top, red 70%, black);
background-image: -moz-linear-gradient(top, red 70%, black);
background-image: -ms-linear-gradient(top, red 70%, black);
background-image: -o-linear-gradient(top, red 70%, black);

Degradado de arriba hacia abajo, de rojo hasta el 70% del recorrido y, desde ahí, hacia negro.

Ejemplo 5

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);

Degradado de arriba hacia abajo, de rojo hasta el 50%, negro en el 80% del recorrido, y finalmente a amarillo.

Ejemplo 6

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-size: 100% 50px;

Igual que el ejemplo 5, pero estableciendo un tamaño de imagen de fondo de 50px de alto, con lo que el degradado se repite.

Ejemplo 7

background-image: -webkit-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -moz-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -ms-linear-gradient(top, red 50%, black 80%, yellow 100%);
background-image: -o-linear-gradient(top, red 50%, black 80%, yellow 100%);
border-radius: 15px;

Igual que el ejemplo 5, pero con bordes redondeados.

Degradados radiales

Al igual que con los degradados lineales, su uso todavía está sujeto a modificaciones, y cada navegador lo implementa precedido de su propio prefijo y sin cumplir necesariamente la notación estándar:

  • -moz-radial-gradient() para Firefox.
  • -webkit-radial-gradient() para Safari y Google Chrome.
  • -o-radial-gradient() para Opera
  • -ms-radial-gradient() para Internet Explorer 10.

Esta es su notación estándar:

<radial-gradient> = radial-gradient(
    [ [ <shape> || <size> ] [ at <position> ]? , |
        at <position>,
    ]?
    <color-stop> [ , <color-stop> ]+
)

Que significa esto:

  • shape - Opcional. Forma del degradado, que puede ser o bien 'circle' o bien 'ellipse'.
  • size - Opcional. Tamaño. Puede ser:
    • Un único valor absoluto, indicando un círculo. Nota: No soportado por los principales navegadores.
    • Dos valores absolutos o relativos, indicando una elipse. Nota: No soportado por los principales navegadores.
    • closest-side - El degradado se expande hasta que el último color alcanza el lado más cercano del punto de origen. Nota: No soportado por los principales navegadores.
    • farthest-side - El degradado se expande hasta que el último color alcanza el lado más lejano del punto de origen.
    • closest-corner - El degradado se expande hasta que el último color alcanza la esquina más cerca al punto de origen. Nota: No soportado por los principales navegadores.
    • farthest-corner - El degradado se expande hasta que el último color alcanza la esquina más lejana al punto de origen.
  • position - Opcional. Posición de origen, precedida por "at". Por omisión, 'center'. Se especifica la posición horizontal (left, center, right, valor absoluto, o relativo) y vertical (top, center, bottom, valor absoluto, o relativo). Nota: Los navegadores que implementan esta propiedad solamente funcionan si no se precede por "at".
  • Dos o más colores, separados por comas, y opcionalmente acompañados de una posición (por ejemplo, 50% o 3em). Si no se introduce una posición, se distribuyen uniformemente.

Algunos ejemplos válidos según la notación estándar:

background-image: radial-gradient(circle, black, white);
background-image: radial-gradient(circle, black 50%, white 100%);
background-image: radial-gradient(ellipse, black, white);
background-image: radial-gradient(circle at top left, black, white);
background-image: radial-gradient(circle at 50px 100px, black, white);
background-image: radial-gradient(50px at bottom left, black, white);
background-image: radial-gradient(closest-side at top, black, white);
background-image: radial-gradient(farthest-corner, black, white);
background-image: radial-gradient(circle, black, white, red);

Sin embargo estos ejemplos no funcionan en los navegadores, pues como hemos visto su notación es ligeramente diferente. Vamos a ver algunos ejemplos que podemos usar hoy:

Ejemplo 1

background-image: -webkit-radial-gradient(red, black);
background-image: -moz-radial-gradient(red, black);
background-image: -ms-radial-gradient(red, black);
background-image: -o-radial-gradient(red, black);

Degradado radial por defecto, de rojo a negro. Como vemos, comienza ubicado en el centro, se distribuye de forma circular, y se expande hasta que el negro alcanza las esquinas.

Ejemplo 2

background-image: -webkit-radial-gradient(top center, red, black);
background-image: -moz-radial-gradient(top center, red, black);
background-image: -ms-radial-gradient(top center, red, black);
background-image: -o-radial-gradient(top center, red, black);

Degradado radial comenzando en el centro superior (top center), de rojo a negro. De nuevo, se expande hasta que el color final (negro) alcanza alguna de las esquinas, adquiriendo por tanto una distribución elíptica.

Ejemplo 3

background-image: -webkit-radial-gradient(top center, circle, red, black);
background-image: -moz-radial-gradient(top center, circle, red, black);
background-image: -ms-radial-gradient(top center, circle, red, black);
background-image: -o-radial-gradient(top center, circle, red, black);

Degradado radial, de rojo a negro, comenzando en el centro superior (top center). En este caso hemos especificado que su distribución sea circular.

Ejemplo 4

background-image: -webkit-radial-gradient(top left, red, black);
background-image: -moz-radial-gradient(top left, red, black);
background-image: -ms-radial-gradient(top left, red, black);
background-image: -o-radial-gradient(top left, red, black);

Degradado de rojo a negro comenzando en la esquina superior izquierda. Desde esa posición todos los extremos quedan a la misma distancia, por lo que la distribución se hace de forma circular.

Ejemplo 5

background-image: -webkit-radial-gradient(top left, red, black, white);
background-image: -moz-radial-gradient(top left, red, black, white);
background-image: -ms-radial-gradient(top left, red, black, white);
background-image: -o-radial-gradient(top left, red, black, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda.

Ejemplo 6

background-image: -webkit-radial-gradient(top left, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, red 10%, black 30%, white);

Degradado radial, de rojo a blanco, pasando por el negro, desde la esquina superior izquierda. El color rojo se prolonga hasta el 10% del recorrido, el negro se alcanza al 30% del recorrido, y el blanco al final (100%, por ser el último). El degradado se expande hasta la esquina más lejana (farthest-corner).

Ejemplo 7

background-image: -webkit-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -moz-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -ms-radial-gradient(top left, farthest-side, red 10%, black 30%, white);
background-image: -o-radial-gradient(top left, farthest-side, red 10%, black 30%, white);

Ejemplo igual que el anterior, pero en lugar de expandirse hasta la esquina más lejana (farthest-corner) se expande hasta el lateral más lejano (farthest-side).

Ejemplo 8

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta el lateral más lejano (farthest-side).

Ejemplo 9

background-image: -webkit-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-corner, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-corner, black, white);

Degradado radial, de blanco a negro, comenzando en el centro superior (top center), con distribución elíptica expandiéndose hasta la esquina más lejana (farthest-corner).

Ejemplo 10

background-image: -webkit-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -moz-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -ms-radial-gradient(top center, ellipse farthest-side, black, white);
background-image: -o-radial-gradient(top center, ellipse farthest-side, black, white);

Igual que el ejemplo anterior, pero en un contenedor de 15px de altura. Vemos que se produce un efecto de "destello sombra" que no podíamos obtener mediante box-shadow.

Ejemplo 11

background-image:
    -webkit-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -webkit-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -moz-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -moz-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -ms-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -ms-radial-gradient(top center, ellipse farthest-side, gray, white);
background-image:
    -o-radial-gradient(top center, ellipse farthest-side, rgba(255,255,255,1), rgba(255, 255, 255, 0) 50%),
    -o-radial-gradient(top center, ellipse farthest-side, gray, white);
background-size: 100% 40%, 100% 100%;
background-repeat: no-repeat;

En este caso tenemos un degradado radial elíptico, de blanco (rgba(255,255,255,1)) a blanco transparente (rgba(255,255,255,0)) , comenzando en el centro superior, y alcanzando el lateral más lejano. Además, hemos añadido un segundo degradado igual, pero de gris a blanco. A cada fondo le asignamos un tamaño: El primero ocupará todo el ancho y el 40% de la altura. El segundo, todo el ancho y todo el alto disponible. Para evitar que el primer degradado se repita, añadimos "background-repeat: no-repeat". Con este ejemplo, logramos un efecto sombreado muy llamativo. Hemos añadido sobre él un contenedor para que se aprecie el efecto.

¡Y esto es todo por hoy! Espero que te haya sido de utilidad. Por mi parte, me ha venido de maravilla volcar todo esto en el blog como guía para futuras consultas.

Puedes ver todos los ejemplos en vivo aquí.