Con la llegada de la norma CSS 3 introdujo la propiedad box-shadow, que se ha vuelto ampliamente utilizada entre los desarrolladores web, ya que facilita agregar una o más sombras al cuadro de un elemento para brindar el efecto visual deseado.

En el artículo anterior, analizamos la propiedad border-radius; al usarla, puedes obtener una sombra con esquinas redondeadas. Por analogía con una sombra de texto (text-shadow), puede crear múltiples sombras, se aplican de acuerdo con eje Z de adelante hacia atrás (con la primera sombra dada en la parte superior).

Echemos un vistazo más de cerca a la sintaxis de esta propiedad moderna:

Consideremos en orden los posibles valores de esta propiedad:

Significado	Descripción
ninguno	La sombra no se muestra. Este es el valor predeterminado.
recuadro	Valor opcional. Si no se especifica este valor (el valor predeterminado), la sombra estará en el exterior del elemento y creará el efecto de que el elemento está abultado. Si el recuadro de la palabra clave (valor) está presente, la sombra caerá dentro del elemento y creará un efecto abollado. En otras palabras, es un cambio de una sombra exterior a una interior.
h-sombra	Valor requerido. Establece la ubicación de la sombra horizontal. Se permiten valores negativos.
v-sombra	Valor requerido. Establece la ubicación de la sombra vertical. Se permiten valores negativos.
radio de desenfoque	Valor opcional. Establece el radio de desenfoque. Cuanto mayor sea el valor, mayor será el desenfoque, lo que hará que la sombra sea más grande y más clara. Si no se especifica el valor, el valor será 0 (nítido: sombras distintas). No se permiten valores negativos.
radio de extensión	Valor opcional. Tamaño de la sombra (radio de estiramiento de la sombra). Con valores positivos la sombra se expandirá, y con valores negativos se reducirá. Si no se especifica ningún valor, el valor será 0 (la sombra corresponde al tamaño del elemento).
color	Valor opcional. Define el color de la sombra (HEX, RGB, RGBA, HSL, HSLA, "Colores predefinidos"). El valor predeterminado es negro.

Los puntos principales que debes comprender para crear sombras para elementos son:

Me gustaría llamar su atención sobre el hecho de que la propiedad box-shadow actualmente es compatible con todos los navegadores modernos:

Propiedad			Ópera		Explorador	Borde
sombra de la caja	10.0 4.0 -webkit-	4.0 3.5 -moz-	10.5	5.1 3.1 -webkit-	9.0	12.0

Si desea ampliar la compatibilidad con algunos navegadores, incluidos los móviles iOS 3.2 - 4.3 Y Androide 2.1 - 3, entonces se recomienda utilizar prefijos del fabricante y utilizar la siguiente sintaxis (en los ejemplos del artículo, la sintaxis solo se utilizará para navegadores modernos):

-webkit-box-shadow: valor; /* Safari 3.1 - 4, IOS 3.2 - 4.3 y Android 2.1 - 3 */-moz-box-shadow: valor; /* Firefox 3.5 - 3.6 */ box-shadow: valor; /* tabla arriba */

Pasemos a la práctica y comencemos con un ejemplo sencillo en el que añadimos una sombra a los elementos:

El resultado de nuestro ejemplo:

Usando múltiples sombras

En el siguiente ejemplo, propongo considerar el interesante efecto de mezcla de colores que se puede lograr al usar múltiples sombras:

• Dos bloques de ancho y alto fijos (15em y 10em), agregó relleno en todos los lados (2em) y configuró los bloques en línea de bloque para poder alinearlos.
• Para primero bloquear con clase .prueba nosotros indicamos cuatro sombras con diferentes valores de sombra horizontal y vertical para que el elemento tenga diferentes sombras en todos los lados. El radio de desenfoque para todas las sombras se estableció en el mismo. El color de cada sombra es diferente y se especifica mediante colores predefinidos.
• Para segundo bloquear con clase .prueba2 nosotros indicamos cuatro Sombras con diferentes valores de sombra horizontal y vertical. El radio de desenfoque para todas las sombras se estableció en el mismo, mientras que el estiramiento de la sombra se estableció en negativo, lo que provocó una disminución en la sombra misma. El color de cada sombra es diferente y se especifica mediante el sistema RGBA.

El resultado de nuestro ejemplo:

Usar sombras para imágenes

El último ejemplo de este artículo se centrará en el uso de sombras para imágenes. Me gustaría llamar su atención de inmediato sobre el hecho de que puede especificar directamente la sombra del elemento HTML. No funcionará, pero tenemos la oportunidad de especificar una imagen como fondo para el elemento que nos interesa y luego asignar la sombra que necesitamos a este elemento.

Consideraremos en detalle cómo trabajar con imágenes de fondo en el artículo del libro de texto "", y ahora, para finalizar el estudio del uso de sombras, lo tocaremos superficialmente y usaremos la imagen como fondo para un elemento en lo siguiente. ejemplo:

• Dos bloques de ancho y alto fijos (237px y 232px), agregaron márgenes para todos los lados (2em) y configuró los bloques para que sean líneas de bloque para poder alinearlos. Establecimos el tamaño del bloque de 237 px por 232 px para el tamaño de la imagen, de modo que en esta etapa del entrenamiento no tuviéramos que escalar la imagen para que se ajuste al elemento y afectar aquellas propiedades CSS que planeamos estudiar en una etapa posterior. (en el artículo del libro de texto " ").
• Para primero bloquear con clase .prueba Especificamos un valor cero para la sombra horizontal y vertical, pero al mismo tiempo especificamos un radio de desenfoque de 50 px y lo ampliamos estableciendo un radio de extensión de 10 px. El color de la sombra se indicó con un color predefinido (violeta). Además, especificamos la palabra clave insert en la declaración, que hace que la sombra caiga dentro del elemento. En otras palabras, hemos creado una sombra interior del elemento.
• Para segundo bloquear con clase .prueba2 Especificamos un valor cero para la sombra horizontal y vertical, pero al mismo tiempo especificamos un radio de desenfoque de 50 px y lo ampliamos estableciendo un radio de extensión de 10 px. El color de la sombra se especifica en el modo RGBA.

El resultado de nuestro ejemplo:

Arroz. 98 Ejemplo de uso de sombras para imágenes en CSS (propiedad box-shadow)

Preguntas y tareas sobre el tema.

Antes de pasar al siguiente tema, complete la tarea de práctica:

Si tiene dificultades para completar la tarea de práctica, siempre puede abrir el ejemplo en una ventana separada e inspeccionar la página para comprender qué código CSS se utilizó.

2016-2020 Denis Bolshakov, puede enviar comentarios y sugerencias sobre el sitio a [email protected]

La propiedad box-shadow agrega una o más sombras a un elemento. La sombra es una copia del elemento desplazada a la distancia especificada. Las sombras pueden ser externas o internas, borrosas o planas y pueden seguir los contornos de bloques con esquinas redondeadas. Usando la palabra clave insert, se crean sombras dentro del elemento, haciendo que el elemento sea visualmente voluminoso o deprimido.

Cómo hacer una sombra de cuadro usando la propiedad box-shadow

Soporte del navegador

ES DECIR: 9.0
Borde: 12.0
Firefox: 4.0, 3.5 -moz-
Cromo: 10.0, 4.0 -kit web-
Safari: 5.1, 3.1 -kit web-
Ópera: 11.5
iOSSafari: 5.1, 3.1 -kit web-
Navegador de Android: 4.0, 2.1 -kit web-

1. Sintaxis de la propiedad Box-shadow

La propiedad box-shadow adjunta una o más sombras a un cuadro. La propiedad acepta el valor none , que indica que no hay sombras, o una lista de sombras separadas por comas ordenadas de principio a fin.

Cada sombra es una sombra separada, representada por 2 a 4 longitudes, un color opcional y una palabra clave insertada opcional. Longitudes permitidas 0 ; Los colores omitidos tienen por defecto el valor de la propiedad de color.

La propiedad no se hereda.

Arroz. 1. Sintaxis de la propiedad Box-shadow

Valores:
desplazamiento x	Establece el desplazamiento horizontal de la sombra. Un valor positivo dibuja una sombra desplazada a la derecha del texto, una longitud negativa dibuja una sombra a la izquierda.
desplazamiento y	Establece el desplazamiento vertical de la sombra. Un valor positivo mueve la sombra hacia abajo, un valor negativo mueve la sombra hacia arriba.
difuminar	Establece el radio de desenfoque. No se permiten valores negativos. Si el valor de desenfoque es cero, entonces el borde de la sombra es nítido. De lo contrario, cuanto mayor sea el valor, más borroso será el borde de la sombra.
extensión	Establece la distancia en la que aumenta la sombra. Los valores positivos hacen que la sombra se expanda en todas direcciones según el radio especificado. Los valores negativos hacen que la sombra se reduzca. Para sombras interiores, expandir la sombra significa comprimir la forma del perímetro de la sombra.
color	Establece sombras. Si no hay color, el color utilizado se toma de la propiedad de color. Para Safari, se debe especificar el color de la sombra.
recuadro	Cambia la sombra proyectada del bloque de una sombra exterior a una sombra interior.
ninguno	El valor predeterminado significa que no hay sombra.
inicial	Establece el valor de la propiedad en el valor predeterminado.
heredar	Hereda el valor de la propiedad del elemento padre.

Los efectos de sombra se aplican de la siguiente manera: la primera sombra está arriba y el resto detrás. Las sombras no afectan el diseño y pueden superponerse a otros elementos o sus sombras. En términos de contextos de apilamiento y orden de dibujo, las sombras exteriores de un elemento se dibujan directamente debajo del fondo de ese elemento, y las sombras interiores de un elemento se dibujan directamente encima del fondo de ese elemento (debajo del borde y la imagen del borde, si corresponde).

Si un elemento tiene múltiples cuadros, todos reciben sombras, pero sólo se dibujan sombras donde también se dibujarán los bordes; ver caja-decoración-rotura.

Las sombras no provocan el desplazamiento ni aumentan el tamaño del área desplazable.

2. Bloquear ejemplos de sombras

2.1. Sombra interior

.example-shadow-1 (fondo: #e6e3df; text-align: center;) .example-shadow-1 span (margen: 50px; alto: 100px; ancho: 200px; pantalla: bloque en línea; box-shadow: recuadro 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255, 255, 255, 1); )

2.2. Sombra plana en un lado

departamento

departamento

.example-shadow-2 (fondo: beige; alineación de texto: centro;) .example-shadow-2 a (pantalla: bloque en línea; radio de borde: 5px; relleno: 15px 35px; tamaño de fuente: 22px; texto -decoración: ninguna; margen: 20px; color: blanco; fondo: #55acee; ​​box-shadow: 0 5px 0 #3C93D5; transición: .3s; ) .example-shadow-2 a:hover (fondo: #6FC6FF ; )

2.3. Sombra de diseño de materiales

.example-shadow-3 (fondo: #e8e8e8; text-align: center;) .example-shadow-3 span (fondo: blanco; pantalla: bloque en línea; ancho: 200px; alto: 100px; margen: 50px; cuadro -sombra: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); )

El orden de grabación es fundamentalmente importante. El primer valor es siempre el desplazamiento a lo largo del eje X, el segundo, a lo largo del eje Y.

Si no es necesario un desplazamiento a lo largo de uno de los ejes, configúrelo en cero:

Clase(box-shadow: 0 8px;) – desplaza la sombra solo a lo largo del eje Y

Resultado

Clase(box-shadow: 8px 8px;) – desplazamiento a lo largo de ambos ejes

Resultado

Valor negativo para los ejes de sombra de cuadro.

La sombra se moverá en dirección opuesta:

Clase(box-shadow: -8px 8px;) – desplaza la sombra con un valor negativo a lo largo del eje X

Resultado

Radio de desenfoque de sombra

Tercer parámetro de propiedad sombra de la caja. Si no se especifica, el valor es 0 y el tamaño de la sombra es igual al tamaño del elemento al que se aplica.

Class(box-shadow: 0 48px 0;) – la sombra duplica las dimensiones del elemento al que se aplica

Resultado

Cuando el valor es mayor que cero, los bordes pierden definición, la sombra se vuelve más grande y visualmente más clara. El desenfoque se aplica desde todos los lados:

Clase(box-shadow: 0 0 8px;) – sin desplazamiento, solo desenfoque

Resultado

Clase (box-shadow: 0 8px 8px;) – Desplazamiento y desenfoque del eje Y

Resultado

Un valor negativo se considera un error y la sombra no se mostrará en absoluto.

Radio de extensión de sombra

Cuarto parámetro de propiedad sombra de la caja. Cambia el tamaño de la sombra en relación con el elemento. Se estira en todas direcciones:

Class(box-shadow: 0 0 0 8px;) – sin desplazamiento ni desenfoque, solo estiramiento

Resultado

En este caso, la sombra es 16 píxeles más grande que el elemento en ancho y alto: 8px izquierda + 8px derecha y 8px arriba + 8px abajo.

Valor de estiramiento de sombra negativo en CSS

La sombra no se estira, sino que se estrecha por todos lados según el valor especificado:

Clase(box-shadow: 0 16px 0 -8px;) – disminuye la sombra con un valor negativo

Resultado

color de sombra

De forma predeterminada, el color de la sombra duplica el color de la fuente: como en los ejemplos anteriores.

El color de la sombra se especifica en cualquier formato CSS disponible:

• #ff0009
• rgb(255, 0, 9)
• hsl(358, 100%, 50%);

Dale al elemento una sombra azul:

Clase(box-shadow: 0 8px #3a8fe7;)

Resultado

Sombra interior

Parámetro recuadro muestra una sombra dentro del bloque.

A diferencia de las opciones enumeradas anteriormente, no existe un orden de escritura estricto. Ambas opciones darán el mismo resultado:

Sombra de cuadro: 0 8px #3a8fe7 inserto; sombra de cuadro: inserción 0 8px #3a8fe7;

Resultado

La segunda opción es más fácil de entender al leer el código.

Varias sombras

Se especifican varias sombras separadas por comas. Orden de visualización de arriba a abajo:

Clase (box-shadow: 0 8px #3a8fe7, 0 16px #3ae7af;)

Resultado

Si intercambias lugares, la sombra azul no será visible:

Clase (box-shadow: 0 16px #3ae7af, 0 8px #3a8fe7;)

Resultado

La sombra interior y exterior se establecen al mismo tiempo:

Clase( box-shadow: 0 16px #3ae7af, recuadro 0 8px #3a8fe7; )

Resultado

Sombra redondeada

Si a un elemento se le da la propiedad radio-frontera, la sombra tendrá esquinas redondeadas.

Clase (box-shadow: 0 16px #3a8fe7; border-radius: 8px;)

Resultado

Al establecer la extensión de la sombra, aumentamos su redondeo. Por ejemplo, el radio del borde es de 8 píxeles y el estiramiento de la sombra es de 4.

8+4=12px es el radio de redondeo de la sombra.

Clase (box-shadow: 0 16px 0 4px #3a8fe7; border-radius: 8px;)

Resultado

El mismo principio se aplica a la reducción de la sombra cuando el valor es negativo.

8+(-4)=4px: obtenemos un redondeo de sombra que es dos veces más pequeño.

Si la compresión de la sombra es mayor que el radio del borde, obtendremos una sombra con ángulos rectos. Por ejemplo, la compresión es de 16px.

8+(-16)=(-8), pero el filete no puede tener un valor negativo y se aplicará cero.

Clase (box-shadow: 0 24px 0 -16px #3a8fe7; border-radius: 8px;)

Resultado

propiedad CSS sombra de la caja Compatible con todos los navegadores populares excepto Opera Mini.

La sombra de bloque es un excelente efecto tridimensional que le da realismo y volumen a los bloques del sitio web. Cuando comencé a estudiar (hace unos 5 o 6 años), no tenía idea de su existencia, y al crear un sitio tuve que convertir la sombra de los bloques en una imagen. Fue muy inconveniente y no siempre salió como quería. Gracias al poder de CSS, que ha facilitado el trabajo de los diseñadores web. Hoy te mostraré cómo crear una sombra para bloques en CSS.

Para agregar una sombra en CSS, use la propiedad sombra de la caja .

1. desplaza la sombra horizontalmente (hasta 100 px a la derecha, hasta -100 px a la izquierda);
2. desplazamiento vertical (hasta 100 px hacia abajo, hasta -100 px hacia arriba);
3. sombra borrosa (0 - sombra clara, 100 - sombra muy borrosa);
4. estirar la sombra (hasta 100 px - estiramiento, hasta -100 px - compresión);
5. color de sombra;
6. recuadro: la sombra está dentro del elemento, sin recuadro la sombra estará hacia afuera.

Resultado :

Mesa con sombras:

código	Ejemplo:
sombra de cuadro: 0px 13px 17px -6px #000000;
sombra de cuadro: 10px -10px 0px -6px #000000;
sombra de cuadro: 10px 13px 0px -6px #000000;
sombra de cuadro: 1px 1px 32px -6px #000000;
sombra de cuadro: -1px 23px 41px -25px #000000;
sombra de cuadro: -1px 23px 41px -25px #4dc13c;
sombra de cuadro: -10px -10px 40px -6px #000000 inserto;
sombra de cuadro: 7px 10px 23px -8px #92a9e7;

Usando una sombra puedes crear un bloque tridimensional:

Código	Ejemplo
sombra de cuadro: 1px 0px rgb(220,195,35), 1px 1px rgb(192,167,7), 2px 1px rgb(219,194,34), 2px 2px rgb(191,166,6), 3px 2px rgb(218,193,33), 3px 3px rgb(190,165,5), 4px 3px rgb(217,192,32), 4px 4px rgb(189,164,4), 5px 4px rgb(216,191,31), 5px 5px rgb(188,163,3), 6px 5px rgb(215,190, 30), 6px 6px rgb(187,162,2), 7px 6px rgb(214,189,29), 7px 7px rgb(186,161,1), 8px 7px rgb(213,188,28), 8px 8px rgb(185,160,0), 9px 8px rgb(212,187,27), 9px 9pxrgb(184,159,0);
sombra de cuadro: -1px 0px rgb(220,195,35), -1px 1px rgb(192,167,7), -2px 1px rgb(219,194,34), -2px 2px rgb(191,166,6), -3px 2px rgb(218,193 ,33), -3px 3px rgb(190,165,5), -4px 3px rgb(217,192,32), -4px 4px rgb(189,164,4), -5px 4px rgb(216,191,31), -5px 5px rgb(188,163) ,3), -6px 5px rgb(215,190,30), -6px 6px rgb(187,162,2), -7px 6px rgb(214,189,29), -7px 7px rgb(186,161,1), -8px 7px rgb(213,188) ,28), -8px 8px rgb(185,160,0), -9px 8px rgb(212,187,27), -9px 9px rgb(184,159,0);
sombra de cuadro: -1px -0px rgb(220,195,35), -1px -1px rgb(192,167,7), -2px -1px rgb(219,194,34), -2px -2px rgb(191,166,6), -3px -2px rgb(218,193,33), -3px -3px rgb(190,165,5), -4px -3px rgb(217,192,32), -4px -4px rgb(189,164,4), -5px -4px rgb(216,191, 31), -5px -5px rgb(188,163,3), -6px -5px rgb(215,190,30), -6px -6px rgb(187,162,2), -7px -6px rgb(214,189,29), -7px - 7px rgb(186,161,1), -8px -7px rgb(213,188,28), -8px -8px rgb(185,160,0), -9px -8px rgb(212,187,27), -9px -9px rgb(184,159,0 );
sombra de cuadro: 1px -0px rgb(220,195,35), 1px -1px rgb(192,167,7), 2px -1px rgb(219,194,34), 2px -2px rgb(191,166,6), 3px -2px rgb(218,193 ,33), 3px -3px rgb(190,165,5), 4px -3px rgb(217,192,32), 4px -4px rgb(189,164,4), 5px -4px rgb(216,191,31), 5px -5px rgb(188,163) ,3), 6px -5px rgb(215,190,30), 6px -6px rgb(187,162,2), 7px -6px rgb(214,189,29), 7px -7px rgb(186,161,1), 8px -7px rgb(213,188) ,28), 8px -8px rgb(185,160,0), 9px -8px rgb(212,187,27), 9px -9px rgb(184,159,0);

Blok1 (ancho: 70%; ancho máximo: 550px; margen: 10px automático; relleno: 1em; sombra de cuadro: 0 1px 4px rgba(0, 0, 0, .3), -23px 0 20px -23px rgba(0 , 0, 0, .8), 23px 0 20px -23px rgba(0, 0, 0, .8), 0 0 40px rgba(0, 0, 0, .1) inserto; )

Resultado :

Blok1 (ancho: 30%; ancho máximo: 550px; margen: 2em automático; relleno: 1em; fondo: #DADADA; sombra de cuadro: 6px 6px #BBBBBB, 12px 12px #919191;)

Resultado :

Blok1 (ancho: 30%; margen: 0 automático; relleno: 2em; sombra de cuadro: 0 0 0 1px #ccc, 0 -20px 0 -10px #00FF00, 20px 0 0 -10px #FF0000, 0 20px 0 -10px # FFFF00, -20px 0 0 -10px #FF3399; )

Resultado :

Usando una sombra puedes hacer un hermoso marco.

Hermoso marco usando propiedades.caja- sombra

Blok1 (ancho: 20%; ancho máximo: 250px; margen: 0 automático; relleno: 1em; borde: 2px discontinuo #999; sombra de cuadro: 0 0 0 1px #999, recuadro 0 0 0 1px #999;)
Resultado
:

Blok1 (ancho: 30%; ancho máximo: 250px; margen: 2em automático; relleno: 4em; fondo: #dcc005; sombra de cuadro: 0 0 4em 4em #fff inset;)
Resultado
:

Blok1 (ancho máximo: 250 px; margen: 0 automático; relleno: 1 em; radio de borde: 10 px; fondo: rgb (100,100,100) gradiente radial (círculo en 0 0, rgba (255,255,255, .65), rgba (255,255,255, .35)); sombra de cuadro: inserto rgba(0,0,0,.5) -3px -3px 8px, inserto rgba(255,255,255,.9) 3px 3px 8px, rgba(0,0,0,.8) 3px 3px 8px -3px; )
Resultado
:


 
 
 
 
 
 
 

 

 
sitio web
 

 





Resultado
:

Estos hermosos efectos se pueden lograr usando sombras en CSS.  Inventa algo nuevo y original, todo está en tus manos.  Tienes el conocimiento y las capacidades. 
Y un día de estos publicaré un artículo sobre cómo se puede crear sin utilizar Photoshop.  Entonces, mantente en el centro de todo y suscríbete a las actualizaciones de mi blog.  No te pierdas ningún tema que te interese.  Bueno eso es todo, mucha suerte!!!
Las sombras regulares son fáciles de implementar usando box-shadow o text-shadow.  Pero, ¿qué pasa si necesitas hacer sombras internas?  Este artículo describe cómo hacer estas sombras con solo unas pocas líneas de código.
Sintaxis
Primero, veamos las dos formas principales de implementar sombras en CSS. 
sombra de la caja
Diseño sombra de la caja contiene varios significados diferentes: 
Desplazamiento horizontal Y desplazamiento vertical- desplazamiento horizontal y vertical, respectivamente.  Estos valores indican en qué dirección proyectará su sombra el objeto:
Radio de desenfoque Y radio de extensión un poco más complicado.  ¿Cual es la diferencia?  Veamos un ejemplo con dos elementos, donde los valores radio de desenfoque diferir de:
El borde de la sombra simplemente está borroso.  Con diferentes valores radio de extensión vemos lo siguiente:
En este caso, vemos que la sombra se dispersa sobre una gran superficie.  Si no especifica un valor radio de desenfoque Y radio de extensión, entonces serán iguales a 0.
sombra de texto
La sintaxis es muy similar a sombra de la caja:
Los significados son similares, pero no. sombra extendida.  Ejemplo de uso:
Insertado en la sombra del cuadro
Para "voltear" la sombra dentro del objeto, debe agregar recuadro en CSS: 
Una vez que comprenda la sintaxis básica de la sombra del cuadro, será muy fácil comprender cómo implementar sombras internas.  Los valores siguen siendo los mismos, puedes agregar color (RGB en hexadecimal):
El color está en formato RGB, el valor alfa es responsable de la transparencia de la sombra:
Imágenes con sombras
Agregar una sombra interior a una imagen es un poco más difícil que agregar una sombra normal div.  Para empezar, aquí está el código de imagen habitual: 
 
 
Es lógico suponer que puedes agregar una sombra como esta:
Img (box-shadow: inserto 0px 0px 10px rgba(0,0,0,0.5); )
Pero la sombra no es visible:
Hay varias formas de solucionar este problema, cada una de las cuales tiene sus pros y sus contras.  Veamos dos de ellos.  La primera es envolver la imagen en un formato regular. div:
 

 

 
Div (alto: 200px; ancho: 400px; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.9); ) img (alto: 200px; ancho: 400px; posición: relativa; índice z: -2 ; )
Todo funciona, pero tenemos que agregar un poco más de HTML y CSS.  La segunda forma es establecer la imagen como fondo del bloque deseado:
 

 

 
Div (alto: 200 px; ancho: 400 px; fondo: url (http://lorempixum.com/400/200/transport/2); box-shadow: inset 0px 0px 10px rgba (0,0,0,0.9); )
Esto es lo que puede pasar al utilizar sombras interiores:
Insertado en sombra de texto
Para implementar una sombra de texto interna, simplemente agréguela al código recuadro No funciona: 
Para resolverlo, primero aplique al encabezado. h1 Establece un fondo oscuro y una sombra clara:
H1 (color de fondo: #565656; color: transparente; sombra de texto: 0px 2px 3px rgba(255,255,255,0.5); )
Esto es lo que sucede:
Agregando un ingrediente secreto clip de fondo que corta todo lo que se extiende más allá del texto (a un fondo oscuro):
H1 (color de fondo: #565656; color: transparente; sombra de texto: 0px 2px 3px rgba(255,255,255,0.5); -webkit-fondo-clip: texto; -moz-fondo-clip: texto; clip de fondo: texto ; )
Resultó casi exactamente lo que necesitábamos.  Ahora simplemente oscurecemos un poco el texto (alfa) y el resultado es: