resplandor - Sombra de texto interno con CSS
sombra texto css generator (21)
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í está mi mejor intento:
.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;
}
<span class="inner_shadow">Inner Shadow</span>
¡El problema es cómo recortar la sombra que sangra por los bordes! Intenté en webkit usando background-clip: text, pero webkit muestra la sombra sobre el fondo para que no funcione.
Hacer una máscara de texto con CSS
Sin una capa de máscara superior, es imposible hacer una verdadera sombra interna en el texto.
Quizás alguien debería recomendar que el W3C agregue background-clip: reverse-text , que cortaría una máscara a través del fondo en lugar de cortar el fondo para que quepa dentro del texto.
O bien eso o renderiza la sombra de texto como parte del fondo y clápala con background-clip: text.
Traté de colocar absolutamente un elemento de texto idéntico encima de él, pero el problema es fondo-clip: el texto recorta el fondo para que quepa dentro del texto, pero necesitamos el reverso de eso.
Intenté usar el trazo de texto: 20px blanco; tanto en este elemento como en el anterior, pero el trazo de texto entra y sale.
Métodos alternativos
Dado que actualmente no hay forma de crear una máscara de texto invertido en CSS, puede pasar a SVG o Canvas y crear una imagen de reemplazo de texto con las tres capas para obtener su efecto.
Como SVG es un subconjunto de XML, el texto SVG aún sería seleccionable y buscable, y el efecto puede producirse con menos código que Canvas.
Sería más difícil lograr esto con Canvas porque no tiene dom con capas como SVG.
Puede producir el SVG ya sea en el lado del servidor o como un método de reemplazo de texto de JavaScript en el navegador.
Otras lecturas:
SVG versus Canvas:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
Recorte y enmascaramiento con texto SVG:
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/
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
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;
}
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.
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/
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
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);
}
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à
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).
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).
(por cierto, texto y estilo basado en OP de un hilo de engaño )
Lo estoy usando desde este sitio, también se ve bien. Échale un vistazo. Sombra interior
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.
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);
}
Pruebe este ejemplo para la sombra de texto insertada. Aquí está el HTML
<h1 class="inset-text-shadow">Inset text shadow trick</h1>
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);
}
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.
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
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;
}
<h1>http://.com/</h1>
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:
<h1>Get this</h1>
y este CSS:
h1 {
color: black;
background-color: #cc8100;
}
Paso 1
Comencemos haciendo que el texto sea transparente:
h1 {
color: transparent;
background-color: #cc8100;
}
Paso 2
Ahora, recortamos ese fondo a la forma del texto:
h1 {
color: transparent;
background-color: #cc8100;
background-clip: text;
}
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;
}
Ver el resultado final .
Desventajas?
- Solo funciona en Webkit (
background-clipno puede sertext). - Múltiples sombras? Ni siquiera pienses.
- Obtienes un brillo exterior también.
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