sombreado - sombra texto css

¿Puedes agregar una sombra paralela no cuadrada al contenido PNG con CSS?

Question

Esta pregunta ya tiene una respuesta aquí:

• Sombra paralela para imagen PNG en CSS 15 respuestas

¿Es posible hacer una sombra paralela sobre el contenido de un PNG?

No es un cuadrado , sino una sombra de objeto que
actúa sobre el contenido no transparente de PNG.

Answer 1

Cómo cambian los tiempos Ahora es posible en algunos navegadores , como se muestra en la respuesta actualmente aceptada.

No es posible hacer esto usando CSS:

Eso es lo que supongo que estás pidiendo.

Answer 2

Definitivamente es posible.

Usando filtros, muestra:

img { 
    -webkit-filter: drop-shadow(5px 5px 5px #222);
    filter:         drop-shadow(5px 5px 5px #222); 
}

Answer 3

Hasta que esté disponible para CSS, puedes probar mi enfoque.

Mi ejemplo usa esta imagen:

porque tiene un fondo transparente y no es cuadrado (para que la sombra de cuadro de CSS entre en acción). No es muy elegante, pero sirve este pequeño y sencillo tutorial.

El siguiente paso que tomé fue crear otra imagen, basada en la de arriba, para colocarla debajo del original.

Paso 1. Agregar desenfoque:

Paso 2. Luz y contraste eliminados:

Entonces tengo el original y la sombra.

A continuación, lo mostraré como si fuera una sombra:

Estilo:

.common {width: 100px;height: 100px;background-size: 100% 100%; position:absolute;}

.divOriginal {background-image: url(../img/original.png);top:2em;left:2em;z-index:10;}

.divShadow {background-image: url(../img/shadow.png);top: 3em;left: 2.5em;z-index:8;}

Haz la magia:

Agregue un div y establezca el attribute class="divOriginal common " y otro con class="divShadow common" .

El resultado debería ser:

¡Aclamaciones!

Adi

Answer 4

He escrito un complemento jQuery para esto, basado en la sugerencia de Chris Morgan sobre el lienzo. Puede encontrarlo en GitHub aquí: https://github.com/Kukunin/image-shadow

Answer 5

No es posible hacer eso en CSS. Sin embargo, es muy posible hacerlo a través de un lienzo, pero será algo ineficiente (ya que el cliente lo procesa cada vez) y dependerá de JavaScript. Hacerlo en PNG será más fácil y funcionará en más buscadores.

Si desea obtener más información al respecto, busque en la Web elementos como "html canvas blur" y "html canvas load image". O mejor aún, use la funcionalidad de sombreado de lona que puede hacerlo todo.

Aquí hay un ejemplo: http://philip.html5.org/demos/canvas/shadows/various.html

• crear contexto desde el lienzo
• establecer context.shadow(Color|OffsetX|OffsetY|Blur) como desee
• cargar PNG desde la etiqueta img con context.drawImage
• ah! ¡las sombras!

Y una bonificación:

• utiliza context.toDataURL si quieres exportar a PNG (crea una aplicación web en la que coloques PNGs y te da sombras).

Answer 6

Use createjs sample se puede encontrar en JSFiddle

shadowTarget.shadow = shadow;

stage.addChild(shadowTarget);

shadowTarget.x = 500 / 2;
shadowTarget.y = 450 / 2;

shadowTarget.regX = shadowTarget.image.width/2;
shadowTarget.regY = shadowTarget.image.height/2;