sombreado - sombra texto css
¿Puedes agregar una sombra paralela no cuadrada al contenido PNG con CSS? (6)
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.
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.
Definitivamente es posible.
Usando filtros, muestra:
img {
-webkit-filter: drop-shadow(5px 5px 5px #222);
filter: drop-shadow(5px 5px 5px #222);
}
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
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
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.toDataURLsi quieres exportar a PNG (crea una aplicación web en la que coloques PNGs y te da sombras).
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;