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

Question

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

Это пример одного изображения. Все изображения прозрачны .png

Можно ли придать этот эффект внешнего свечения изображению бутылки, используя какие-то хитрости CSS3?

Это просто пример одного изображения, другие изображения имеют другой размер и форму.

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

Answer 2

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

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

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

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

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

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

или

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

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

Answer 3

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

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

Answer 4

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

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

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

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

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

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

Answer 5

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

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

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

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

Answer 6

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

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

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

Answer 7

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

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

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

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