Cómo dar brillo exterior a un objeto en un png transparente usando CSS3?

Question

Estoy trabajando en un proyecto en el que necesito hacer modificaciones en más de 500 imágenes para dar brillo exterior en el efecto de hover. Tendré que modificar cada imagen para dar brillo exterior. Será una tarea muy lenta.

Este es un ejemplo de una imagen. Todas las imágenes son .png transparente

¿Es posible dar a este efecto outerglow a la imagen de la botella usando trucos de CSS 3?

Esto es solo un ejemplo de una imagen Las otras imágenes tienen diferentes tamaños y formas.

Answer 1

Lo que puede hacer es crear un efecto de brillo en su programa de gráficos, y luego aplicarlo como una imagen de fondo cuando la imagen esté suspendida. Tendrá que producir el brillo de cada imagen usted mismo, pero se verá realmente genial.

EDIT: He hecho un programa que creará las imágenes brillantes para usted de forma rápida y fácil. Puede descargarlo en http://thedarkworld.net/projects/imgglow/
Espero que esto ayude.

Answer 2

Si tiene que hacer esto con más de 500 imágenes, lo que haría sería un gran PNG transparente de la inversa de la botella con bordes emplumados alrededor de la botella y colocarlo sobre una DIV con el color de fondo debajo y la imagen de la botella en el medio. Esto hará que el color de fondo sólido parezca desvanecerse en la botella inversa PNG y todo lo que tendrías que hacer para cambiar el color del brillo es cambiar el valor del CSS.

escribir algunos jQuery para permitirle introducir el valor HEX y ya estás;)

EDITAR *

Problema resuelto!

http://phillipjroth.com/stackoverflow/8693733/index.html

Editar la línea 19 del código CSS "background-color" y se actualizará el resplandor. Los PNG son de baja calidad, pero puede ajustarlos para eliminar los bordes estriados.

Answer 3

Esto se puede hacer usando el filtro (caja-sombra). Echar un vistazo a http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

He aquí una demostración http://jsfiddle.net/jaq316/EKNtM/

Y aquí está el código

<style> 
    .shadowfilter { 
    -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); 
    filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.5)); 
} 

.bottleimage { 
    width: 500px; 
} 
</style> 
<img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Coca_Cola_Zero_bottle.png" class="shadowfilter bottleimage"/> 

Answer 4

aquí es un plugin que encontré temprana que hacer el truco de imagen PNG ...

Uso:

Habilitar resplandor y establecer el color y el radio:

$("#testimg").glow({ radius: "20", color:"green"}); 

resplandor Disable:

$("#testimg").glow({ radius: "20", color:"green", disable:true }); 

o

$("#testimg").glow({ disable:true }); 

https://github.com/MisterDr/JQuery-Glow

Answer 5

Encontré una manera fácil si puedes trabajar con photoshop.

Abre la imagen transparente (ejemplo.png) en photoshop y toma la herramienta de desenfoque. A continuación, difumine toda la imagen y guárdela como (ejemplo-hover.png).

<div id="img1"> 
    <img src="images/example.png"> 
</div> 

#img1:hover{ 
    background: url('images/example-hover.png') no-repeat 0px 0px;; 
} 

Answer 6

En realidad se puede hacer esto con el filtro de desenfoque CSS3. Sólo pila 2 imágenes una encima de la otra y se aplica el siguiente estilo a una de ella:

-webkit-filter: blur(5px); 
-moz-filter: blur(5px); 
-o-filter: blur(5px); 
-ms-filter: blur(5px); 
filter: blur(5px); 

Para cambiar el color de la otra imagen, se puede jugar con otros filtros como el matiz-rotación, sephia etc.

Answer 7

Tan fácil como el pastel. Solo usa la misma imagen dos veces, una encima de la otra.

<div class="container"> 
    <img class="main" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
    <img class="glow" src="http://www.pngmart.com/files/2/Mario-PNG-Image.png" /> 
</div> 

Usted acaba de trabajar en la imagen de abajo, la escala que sea un poco, brillante hasta que es blanca y luego se difuminan. Luego establece su opacidad en 0 y la vuelve a establecer en uno cuando la imagen de arriba está suspendida.

.container { 
    position:relative; 
    background-color:#444444; 
    width:600px; 
    height:600px; 
} 
img { 
    position:absolute; 
    max-height:90%; 
    top:50%; 
    left:50%; 
    transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform-origin: 0 0; 
    -webkit-transform-origin: 0 0; 
} 
img.main { 
    z-index:2; 
} 
img.glow { 
    z-index:1; 
    transform: scale(1.01) translate(-50%, -50%); 
    -webkit-transform: scale(1.01) translate(-50%, -50%); 
    filter: brightness(0) invert(1) blur(5px); 
    -webkit-filter: brightness(0) invert(1) blur(5px); 
    opacity:0; 
} 
img.main:hover ~ img.glow { 
    opacity:1; 
} 

No se requiere Javascript en absoluto.

https://jsfiddle.net/nkq1uxfb/3/

Answer 8

prefiero generar tales brilla con un poco de apilamiento. La primera imagen utiliza la siguiente regla de filtrado CSS:

blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1) 

Esto le da un poco más grande que la base de 'botella' iluminará en azul.

A continuación, cargue una segunda copia de la imagen en las mismas coordenadas, dándole la botella con un fondo transparente encima del borroso halo azul con un fondo transparente similar.