Text-shadow: inset 16.7.12
Text-shadow: inset
No. No es que se haya añadido el valor inset a la propiedad text-shadow. Tampoco es que algún bug de los navegadores lo haga funcional.
Es sólo otra muestra del uso imaginativo y creativo de css.
En este caso para lograr eso, un efecto de sombra al interior en los textos
Text-shadow: inset; simulado
Una imagen de cómo se ve
El código Css
.elemento {
background: #e6e6e6;
color: rgba(128, 128, 128, 0.8);
text-shadow: 0 0.1em 0.1em #e6e6e6, 0 0 0 #000;
}
Una pequeña explicación
El efecto desaparece y el "truco" queda al descubierto si no coinciden los colores del background del elemento y el 1º de la sombra (#e6e6e6) que es el que vela ligéramente al segundo valor de text-shadow (#000).
Juega variando el color del texto, así como el valor del canal alfa (transparencia) y los efectos al variar los colores que intervienen.
El resultado
KsesoCss. text-shadow: inset
El crédito
Idea original de Daiderd Jordan
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡Buen truco! Pero una pregunta, por qué hacerlo así y no con inset directamente?
ResponderEliminarA ver si desde Chrome y logada con google quiere. Realmente solo comentaba que me parece un gran truco! pero preguntaba por qué no usar inset directamente :)
ResponderEliminarHola Elena:
ResponderEliminarYa siento las dificultades para que comentes con FF.
Respecto a tu consulta, la keyname "inset" no es un valor permitido en text-shadow. Por lo tanto si se utiliza no sólo no crea la sombra hacia interior, además ocurre como con cualquier otra propiedad al usar un valor no permitido:
El navegador ignora toda la declaración.
Un saludo y gracias de nuevo por el aviso
Anda claro! Estaba pensando en box-shadow, my fault :P
ResponderEliminarEntonces chapeau por el truco.
Y sin problemas tengo ambos navegadores abiertos, uso este para tu blog y ya está :D
Pero quería avisarte por si se habían perdido más comentarios por ahí.
Gracias Kseso,
ResponderEliminarme acabas de resolver justo lo que necesito ahora para añadir sombra interior.
Saludos y sigue así.