Come dare un bagliore esterno a un oggetto in una png trasparente usando CSS3?

Question

Sto lavorando a un progetto in cui è necessario apportare modifiche in più di 500 immagini a dare effetto bagliore esterno al volo stellare. Dovrò modificare ogni immagine per dare il bagliore esterno. Sarà un compito molto dispendioso in termini di tempo.

Questo è un esempio di un'immagine. Tutte le immagini sono .png trasparente

E 'possibile dare questo effetto outerglow all'immagine bottiglia utilizzando qualsiasi trucchi di CSS3?

Questo è solo un esempio di un'immagine altre immagini sono di dimensioni e forma diverse.

Answer 1

Quello che puoi fare è creare un effetto bagliore nel tuo programma di grafica, quindi applicarlo come immagine di sfondo quando l'immagine viene posizionata sopra. Dovrai produrre il bagliore per ogni immagine da solo, ma sembrerà davvero bello.

EDIT: Ho creato un programma che creerà le immagini luminose in modo rapido e semplice. Puoi scaricarlo a http://thedarkworld.net/projects/imgglow/
Spero che questo aiuti.

Answer 2

Se devi fare questo a oltre 500 immagini, quello che farei è un ottimo PNG trasparente dell'inverso della bottiglia con bordi sfumati attorno alla bottiglia e adagiarlo su un DIV con il colore di sfondo sotto di esso e il immagine della bottiglia in mezzo. Questo farà apparire il solido colore di sfondo in dissolvenza nel PNG inverso della bottiglia e tutto quello che dovresti fare per cambiare il colore del bagliore è cambiare il valore del CSS.

scrivere alcune jQuery che consente di immettere il valore esadecimale e siete a posto;)

EDIT *

Problema risolto!

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

Modifica riga 19 del codice CSS "background-color" e aggiornerà il bagliore. I PNG sono di bassa qualità ma è possibile regolarli per eliminare i bordi increspati.

Answer 3

Questo può essere fatto usando il filtro (box-shadow). Date un'occhiata a http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

Ecco una demo http://jsfiddle.net/jaq316/EKNtM/

Ed ecco il codice

<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

ecco un plugin ho scoperto presto che fare il trucco sul PNG Immagine ...

utilizzati:

Enable bagliore e impostare il colore e raggio:

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

Disable incandescenza:

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

o

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

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

Answer 5

Ho trovato un modo semplice se riesci a lavorare con Photoshop.

Si apre l'immagine trasparente (esempio.png) in Photoshop e si utilizza lo strumento sfocatura. Quindi sfocare l'intera immagine e salvare come (esempio-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

In realtà è possibile farlo con il filtro sfocatura CSS3. Basta impilare 2 immagini una sopra l'altra e applicare il seguente stile ad uno di esso:

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

Per cambiare colore degli altri dell'immagine, è possibile giocare con altri filtri, come la tonalità rotazione, sephia etc.

Answer 7

Facile come torta. Basta usare la stessa immagine due volte, una sopra l'altra.

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

Basta lavorare sull'immagine qui sotto, la scala un po ', luminoso fino a quando non è bianco e poi sfocatura esso. Quindi imposti la tua opacità su 0 e la rimandi a quella quando l'immagine sopra è al passaggio del mouse.

.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 Javascript richiesto di sorta.

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

Answer 8

preferisco generare tali bagliori con un po 'di accatastamento. La prima immagine utilizza la seguente regola del filtro CSS:

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

Questo ti dà un po 'più grande del bagliore' bottiglia 'di base in blu.

Quindi caricare una seconda copia dell'immagine con le stesse coordinate, dandovi il flacone con uno sfondo trasparente sopra l'alone blu sfocato con uno sfondo trasparente simile.