Text-shadow: inset

Text-shadow: inset

Por Kseso ✎ 5

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

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 Don Kseso Kseso

Comentarios: 5

  1. Lenatwitteada17/7/12

    ¡Buen truco! Pero una pregunta, por qué hacerlo así y no con inset directamente?

    ResponderEliminar
  2. A 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 :)

    ResponderEliminar
  3. Hola Elena:
    Ya 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

    ResponderEliminar
  4. Anda claro! Estaba pensando en box-shadow, my fault :P

    Entonces 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í.

    ResponderEliminar
  5. Gracias Kseso,

    me acabas de resolver justo lo que necesito ahora para añadir sombra interior.

    Saludos y sigue así.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap