Sombra de texto interno con CSS

Actualmente estoy jugando con CSS3 y tratando de lograr un efecto de texto como este (la sombra interna borrosa negra):

Pero no puedo encontrar una forma de crear sombras de texto dentro del texto. Me pregunto si todavía es posible porque el elemento de sombreado de caja es capaz de representar la sombra en el interior de esta manera:

box-shadow: inset 0px -5px 10px 0px rgba(0, 0, 0, 0.5); 

¿Algunas ideas?

Aquí hay un pequeño truco que descubrí usando los pseudo-elementos: :before y :after :

 .depth { color: black; position: relative; } .depth:before, .depth:after { content: attr(title); color: rgba(255,255,255,.1); position: absolute; } .depth:before { top: 1px; left: 1px } .depth:after { top: 2px; left: 2px } 

El atributo de título debe ser el mismo que el contenido. Demostración: http://dabblet.com/gist/1609945

Deberías poder hacerlo usando la sombra de texto, erm algo así como esto:

 .inner_text_shadow { text-shadow: 1px 1px white, -1px -1px #444; } 

he aquí un ejemplo: http://jsfiddle.net/ekDNq/

Aquí está mi mejor bash:

  .inner_shadow { color:transparent; background-color:white; text-shadow: 0 0 20px rgba(198,28,39,0.8), 0 0 0 black; font-family:'ProclamateHeavy'; // Or whatever floats your boat font-size:150px; } 
 Inner Shadow 

Puedes hacer esto. Lamentablemente, no hay forma de utilizar un recuadro en la sombra de texto, pero puedes simularlo con el color y la posición. Toma el desenfoque hacia abajo y organiza la sombra en la parte superior derecha. Algo como esto podría hacer el truco:

 background-color:#D7CFBA; color:#38373D; font-weight:bold; text-shadow:1px 1px 0 #FFFFFF; 

… pero tendrás que ser muy, muy cuidadoso con los colores que uses, de lo contrario, se verán apagados. Es esencialmente una ilusión óptica, por lo que no funcionará en todos los contextos. Tampoco se ve muy bien en tamaños de fuente más pequeños, así que tenlo en cuenta también.

No hay necesidad de sombras múltiples ni nada tan elegante como eso, solo tienes que compensar tu sombra en el eje y negativo.

Para texto oscuro sobre fondo claro:

 text-shadow: 0px -1px 0px rgba(0, 0, 0, .75); 

Si tiene un fondo oscuro, simplemente puede invertir el color y la posición y:

 text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.75); 

Juega con los valores de rgba, la opacidad y el desenfoque para obtener el efecto perfecto. Dependerá mucho de la fuente y el fondo de color que tengas, y cuanto más grande sea la fuente, mejor.

Explicación más precisa del CSS en la respuesta de kendo451 .

Hay otra manera de obtener una ilusión de sombra interior fantasiosa y hacky,
que explicaré en tres simples pasos. Digamos que tenemos este HTML:

 

Get this

y este CSS:

 h1 { color: black; background-color: #cc8100; } 

Es un buen eslogan

Paso 1

Comencemos haciendo que el texto sea transparente:

 h1 { color: transparent; background-color: #cc8100; } 

Es una caja

Paso 2

Ahora, recortamos ese fondo a la forma del texto:

 h1 { color: transparent; background-color: #cc8100; background-clip: text; } 

¡El fondo es el texto!

Paso 3

Ahora, la magia: vamos a poner una text-shadow borrosa, que estará en frente del fondo , dando así la impresión de una sombra interior.

 h1 { color: transparent; background-color: #cc8100; background-clip: text; text-shadow: 0px 2px 5px #f9c800; } 

¡Lo conseguimos! ¡Hurra!

Ver el resultado final .

Desventajas?

  • Solo funciona en Webkit ( background-clip no puede ser text ).
  • Múltiples sombras? Ni siquiera pienses.
  • Obtienes un brillo exterior también.

Prueba esta pequeña joya de variación:

 text-shadow:0 1px 1px rgba(255, 255, 255, 0.5); 

Normalmente tomo “no hay respuesta” como un desafío

He visto muchas de las soluciones propuestas, pero ninguna era lo que esperaba.

Este es mi mejor truco en esto , donde el color es transparente, el fondo y la sombra de texto superior son del mismo color con opacidades variables, simulando la máscara, y la segunda sombra de texto es una versión más oscura y saturada del color que realmente quiero (bastante fácil de hacer con HSLA).

enter image description here

(por cierto, texto y estilo basado en OP de un hilo de engaño )

He tenido algunas instancias en las que he necesitado sombras internas en el texto, y el siguiente me ha funcionado bien:

 .inner { color: rgba(252, 195, 67, 0.8); font-size: 48px; text-shadow: 1px 2px 3px #fff, 0 0 0 #000; } 

Esto establece la opacidad del texto en 80% y luego crea dos sombras:

  • La primera es una sombra blanca (suponiendo que el texto esté sobre un fondo blanco) con desplazamiento de 1px desde la izquierda y 2px desde la parte superior, borrosa 3px.
  • La segunda es una sombra negra que es visible a través del texto de 80% de opacidad pero no a través de la primera sombra, lo que significa que es visible dentro de las letras solo donde se desplaza la primera sombra (1px desde la izquierda y 2px desde la parte superior). Para cambiar el desenfoque de esta sombra visible, modifique el parámetro desenfoque para la primera sombra de capa.

Advertencias

  • Esto solo funcionará si se puede lograr el color deseado del texto sin que tenga que estar al 100% de opacidad.
  • Esto solo funcionará si el color de fondo es sólido (por lo tanto, no funcionará para el ejemplo específico del interrogador donde el texto se encuentra sobre un fondo con textura).

Aquí hay un enlace sobre cómo hacer esto, debe ser lo que está buscando:

http://sixrevisions.com/css/how-to-create-inset-typography-with-css3/

este es un ejemplo muy bueno y fácil:

 body { background: #F2F2F2 } h1 { font-size: 50px; font-weight: bold; background-color: #565656; color: transparent; text-shadow: 0px 2px 3px rgba(255, 255, 255, 0.8); -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; } 
 

http://stackoverflow.com/

Parece que está funcionando: http://tips4php.net/2010/08/nice-css-text-shadow-effects/

Está usando múltiples sombras para lograr ese efecto, como se explica aquí: http://www.w3.org/Style/Examples/007/text-shadow#multiple

Parece que todos tienen una respuesta a esta. Me gusta la solución de @Web_Designer. Pero no necesita ser tan complejo como eso y aún puede obtener la sombra interior borrosa que está buscando.

http://dabblet.com/gist/3877605

 .depth { display: block; padding: 50px; color: black; font: bold 7em Arial, sans-serif; position: relative; } .depth:before { content: attr(title); color: transparent; position: absolute; text-shadow: 2px 2px 4px rgba(255,255,255,0.3); } 

Este es fácilmente el mejor ejemplo que he visto. http://lab.simurai.com/carveme/

La fuente está en gitthub https://github.com/simurai/lab/tree/gh-pages/carveme

Basándose en la técnica :before :after de web_designer, aquí hay algo que se acerca más a su aspecto:

Primero, haga que su texto tenga el color de la sombra interna (negro-ish en el caso del OP).

Ahora, use una clase: after psuedo para crear un duplicado transparente del texto original, colocado directamente encima de él. Asigne una sombra de texto regular sin desfase. Asigna el color del texto original a la sombra y ajusta el alfa según sea necesario.

http://dabblet.com/gist/2499892

No tienes el control completo sobre la dispersión, etc. de la sombra como lo haces en PS, pero para valores de desenfoque más pequeños es bastante pasable. La sombra va más allá de los límites del texto, por lo que si está trabajando en un entorno con un fondo de primer plano en primer plano, será obvio. Para elementos de bajo contraste, especialmente los que tienen el mismo tono, no es demasiado notable. Por ejemplo, he podido hacer un texto grabado con buen aspecto en fondos metálicos usando esta técnica.

Aquí hay una gran solución para la VERDADERA sombra de texto insertada usando la propiedad CSS3 de fondo de clip:

 .insetText { background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px; } 

Esto es lo que surgió después de ver algunas de las ideas aquí. La idea principal es que el color del texto se combine con ambas sombras, y tenga en cuenta que se está utilizando sobre un fondo gris (de lo contrario, el blanco no se mostrará bien).

 .inset { color: rgba(0,0,0, 0.6); text-shadow: 1px 1px 1px #fff, 0 0 1px rgba(0,0,0,0.6); } 

Pruebe este ejemplo para la sombra de texto insertada. Aquí está el HTML

 

Inset text shadow trick

y el CSS

 body { background: #f8f8f8; } h1 { font-family: Helvetica, Arial, sans-serif; font-weight: bold; font-size: 6em; line-height: 1em; } .inset-text-shadow { /* Shadows are visible under slightly transparent text color */ color: rgba(0,0,0,0.6); text-shadow: 2px 8px 6px rgba(0,0,0,0.2), 0px -5px 35px rgba(255,255,255,0.3); } 

Demo on Jsfiddle

 text-shadow: 4px 4px 2px rgba(150, 150, 150, 1); 

para la sombra de la caja:

 -webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75); 

puede ver el texto en línea y la sombra de la caja: texto en línea y sombra de la caja

para obtener más ejemplos, puede ir a esta dirección: más código de ejemplo freeclup

Hay una manera mucho más simple de lograr esto

 .inner{color: red; text-shadow: 0 -1px 0 #666;} // #666 is the color of the inner shadow 

Voilà

Lo estoy usando desde este sitio, también se ve bien. Échale un vistazo. Sombra interior