Efecto de volumen, con CSS, muchos colores y un sólo archivo gráfico (actualizado)

Leyendo por ahí, sobre los usos de la transparencia del formato PNG, se me ocurrió probar una técnica la mar de curiosa para dar sensación de volumen en un elemento HTML, usando sólo CSS y un único archivo gráfico.

El archivo gráfico ha de ser un gradiente color frontal a transparente.

Como éste:

A simple vista no se aprecia gran cosa, pero te cuento. Es un PNG con fondo transparente y dos capas de gradiente. Una de negro a transparente y otra de blanco a transparente. (No soy capaz de ponerle un fondo aquí en el blogger para que se vea.) Las dimensiones son 48 px x 48 px. Puedes hacerlo del tamaño que quieras. La transparencia ha de ser por canal alfa.

Esto es un ejemplo de cómo quedaría la cosa:

Ahora, cuando quieras que un elemento use este fondo, creas una regla CSS más o menos así:

selector {
background: #7CC1F6 url(relieve.png) repeat-x center left;
}

Espero que no te tenga que explicar lo que es el selector. Pero explico la regla:

En background asignamos, por este orden:

• Color de fondo del elemento.
• Imagen de fondo (la que hemos preparado)
• Repetición en el eje x (o como lo tengamos)
• Alineación al centro y a la izquierda (o como queramos)
  

¿Qué es lo que ocurre? La imagen se superpone al fondo del elemento, y como lleva transparencia por canal alfa, el resultado es que se mezcla con el color del fondo y conseguimos ese efecto de relieve.

Se puede hacer lo mismo para conseguir "marcas de agua".

Jugando con la opacidad de las capas en el programa de edición podremos matizar más o menos el efecto.