Cómo hacer sobra interior y sombra exterior en CSS3

Muchos no saben que se puede hacer sombra interior usando CSS3, y peor aún que se puede combinar con la sobra exterior. De hecho, a partir de CSS3 se puede sobrecargar una propiedad si así lo acepta, es decir, para una propiedad X se le puede poner más de un valor A,B,C,etc de tal forma que todos los reconoce y aplica. Algunos ejemplos son las imágenes de fondo y en nuestro caso de hoy las sombras.

A continuación vamos a ver cómo aplicar sobra interior y exterior en CSS3, así como aplicar varias sobras en un mismo elemento sin tener que definir más etiquetas HTML, algo muy útil si por ejemplo quieren hacer un efecto 3D de algún elemento contenedor, y no quieren gastar en crear capas para hacer eso, pero ese tutorial lo veremos en próximas ocasiones.

Lo básico

Entonces, primero recordemos la estructura de nuestra propiedad box-shadow

donde tenemos que especificar una dirección en X, en Y, un valor para el difuminado y el color de esa sombra. Como vemos son cuatro valores que definir y hasta este punto no creo que sea difícil.

Sombra interior

Si nosotros sin embargo quisiéramos aplicar una sombra interior, es decir, que la sombra se reflejará dentro de un elemento, y no fuera, tenemos que usar la palabra “inset” al comiendo de la definición de nuestros valores para que de esa forma cambie la sombra.

Obteniendo algo así:

Juntando sombras

Por último, hay que saber que podemos definir más de una sombra para nuestro elemento, separando cada definición de sombra por una coma, logrando una sobrecarga, por así decirlo. Entonces, si quisiéramos una sombra interior y dos exteriores para nuestra cajita haríamos algo así:

logrando algo como esto:

El orden entre las sobras interiores y exteriores no importa, pero si en el caso de las exteriores con exteriores y las interiores con interiores porque dependiendo como las configuremos es como se van a sobreponer