El valor de esta propiedad es una lista de sombras separadas por comas, cada una especificada por 2-4 valores, un color opcional y una clave "interior":
Sombra exterior del mismo tamaño que el elemento desplazada 10px a la derecha y abajo:
Sombra interior y exterior, de distintos colores, con distintos desplazamientos y con la sombra exterior 3px mayor que el elemento:
linear-gradient:
Esta propiedad necesita que se le indiquen los colores que vamos a usar, el ángulo de pintado, dónde obtenemos cada color, el punto de partida... es bastante complejo de hacer a mano para algunos efectos más complicados.
Gracias a Dios, tenemos un enlace con una aplicación web que nos proporciona una interfaz parecida a la de Adobe Photoshop para crear los gradientes y nos genera el código preparado para ser compatible con todos los navegadores.
Aquí dejo el enlace a esta aplicación:
Ultimate CSS Gradient Generator.
Así podemos conseguir fácilmente efectos como estos:
background: -moz-linear-gradient(-45deg, rgba(30,87,153,0) 0%, rgba(30,87,153,0.8) 15%, rgba(30,87,153,1) 19%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 81%, rgba(30,87,153,0.8) 85%, rgba(30,87,153,0) 100%); background: -ms-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -o-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(15%,rgba(30,87,153,0.8)), color-stop(19%,rgba(30,87,153,1)), color-stop(20%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(80%,rgba(30,87,153,1)), color-stop(81%,rgba(30,87,153,1)), color-stop(85%,rgba(30,87,153,0.8)), color-stop(100%,rgba(30,87,153,0))); background: -webkit-linear-gradient(-45deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); background: linear-gradient(135deg, rgba(30,87,153,0) 0%,rgba(30,87,153,0.8) 15%,rgba(30,87,153,1) 19%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 81%,rgba(30,87,153,0.8) 85%,rgba(30,87,153,0) 100%); color: white; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=1 ); text-align: center;
Todo el texto interior no es que me haya vuelto loco, es todo el código que hace falta para que funcione... así que yo prefiero que me lo haga una aplicación.
Muy bien... ¿y dónde está el botoncito?
Para terminar voy a sacarle partido a todo lo que hemos visto y a crear sólo con CSS un botón con esquinas redondeadas y textura cristal que se ilumine cuando estemos encima de él sin usar ninguna imagen. Para ello haré lo siguiente:
- Creare un estilo de clase "botonRapido" con:
- Bordes redondeados
- Un gradiente que me dé la textura cristal apagado
- Una sombra centrada en el botón
- Un color para la fuente del texto que no sea blanco puro
- Modificaré el estilo anterior cuando suceda el evento "hover" (pasar el ratón por encima) para que:
- El gradiente sea más luminoso
- La sombra más clara
- El color de la fuente blanco puro.
Implementando todo eso ya tenemos nuestro botón. Probarlo.