Как передать внешнее свечение объекту в прозрачном png с помощью CSS3?

Ответ 1

Это можно сделать с помощью фильтра (box-shadow). Посмотрите http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

Вот демо http://jsfiddle.net/jaq316/EKNtM/

И вот код

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

Ответ 2

Что вы можете сделать, так это создать эффект свечения в вашей графической программе, а затем применить это как фоновое изображение, когда изображение зависнет. Вам нужно будет произвести свечение для каждого изображения самостоятельно, но это будет выглядеть действительно круто.

EDIT: Я создал программу, которая быстро и легко создаст светящиеся изображения. Вы можете скачать его на http://thedarkworld.net/projects/imgglow/
Надеюсь, это поможет.

Ответ 3

вот плагин, который я нашел раньше, чтобы сделать трюк в PNG Image...

Использование:

Включить свечение и установить цвет и радиус:

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

Отключить свечение:

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

или

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

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

Ответ 4

Если вам нужно сделать это с более 500 изображениями, то я бы сделал отличный прозрачный PNG обратного к бутылке с пернатыми краями вокруг бутылки и лежал над DIV с цветом фона под ним и бутылкой изображение между ними. Это приведет к тому, что сплошной цвет фона исчезнет в обратном флаконе PNG, и все, что вам нужно будет сделать, чтобы изменить цвет свечения, изменит значение CSS.

Напишите jQuery, чтобы ввести значение HEX, и вы установили;)

РЕДАКТИРОВАТЬ *

Проблема решена!

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

Измените строку 19 кода CSS "background-color" и обновите свечение. PNG имеют низкое качество, но вы можете точно настроить их, чтобы избавиться от ребристых краев.

Ответ 5

Так же легко, как пирог. Вы просто используете одно и то же изображение дважды, один над другим.

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

Вы просто работаете над изображением ниже, немного масштабируйте его, ярким, пока он не станет белым, а затем размыте его. Затем вы устанавливаете непрозрачность на 0 и устанавливаете ее обратно на один, когда изображение выше.

.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;
}

Никакой Javascript не требуется.

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

Ответ 6

На самом деле вы можете сделать это с помощью фильтра размытия CSS3. Просто складывайте 2 изображения друг над другом и применяйте следующий стиль к одному из них:

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

Чтобы изменить цвет другого изображения, вы можете играть с другими фильтрами, такими как пошаговое вращение, сепия и т.д.

Ответ 7

Я предпочитаю генерировать такие свечения с небольшим количеством укладки. Первое изображение использует следующее правило фильтра CSS:

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

Это дает вам немного больше, чем синее свечение базовой бутылки.

Затем загрузите вторую копию изображения в те же координаты, предоставив вам бутылку с прозрачным фоном поверх размытого синего "гало" с аналогичным прозрачным фоном.

Ответ 8

Я нашел простой способ, если вы можете работать с фотошопом.

Вы открываете прозрачное изображение (example.png) в фотошопе и берете инструмент размытия. Затем размыть все изображение и сохранить как (пример-hover.png).

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

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