Comment donner de l'éclat extérieur d'un objet dans une image png transparente à l'aide de CSS3?

Je travaille sur un projet où j'ai besoin de faire des modifications dans plus de 500 images à donner outerglow sur le vol stationnaire effet. J'ai besoin de modifier chaque image pour lui donner l'éclat extérieur. Cela sera une tâche fastidieuse.

C'est l'exemple d'une image. Toutes les images sont la transparence .png

Est-il possible de donner à ce outerglow effet à l'image de bouteille en utilisant toutes les astuces de CSS3?

C'est juste un exemple d'une image de l'autre des images dans les différentes taille et la forme.

Non, il n'est pas. Avec css, vous pouvez appliquer glow/de l'ombre à un élément. Il peut être arrondi avec css3, mais comme il n'est pas et c'est une image rectangulaire, l'ombre sera aussi un rectangle.
Tâche qui prend du temps en effet, et c'est une question intéressante, mais je crains que ce ne sera même plus de temps à essayer de le faire par programmation.
Vous pouvez faire cela à l'aide de la toile, mais ce serait dur. Vous auriez probablement pour itérer sur chaque pixel et de cerner la limite de la bouteille (c'est à dire de gauche à droite sur chaque ligne, trouver d'abord celui qui n'est pas transparent, puis répétez la droite vers la gauche sur chaque ligne.) Vous pouvez alors faire toutes ces pixels vert, puis ajoutez prendre 1 hors les coordonnées x pour la moitié gauche, et en ajouter un à la des droits, et de faire un peu moins vert, etc. Chose est, ce n'est pas le même aspect en raison des courbes... Hmmm... je pense que c'est un problème difficile!
aurais essayé quelques-uns toile magique, mais je pense que j'aurais reculé bientôt
Y a t il vraiment pas de solution pour ce problème ... seulement la toile???
Je pense que vous pourriez peut-être enregistrer une macro pour photoshop ou quelque chose et de stocker le normal et éclatante version..
je sais que sur photoshop .... en css3 uniquement il dosn pas possible
Je pourrait en fait avoir un aller à ce canevas au point de penser à elle, je peux voir comment vous pourriez le faire, mais il y aura naturellement de la limitation qu'il ne fonctionne que sur les navigateurs les plus récents, ne sera pas peut-être aussi utile que vous ne l'imaginez.
Toute chance vous pourriez mettre en place le png transparent quelque part? Je doute que je vais avoir le temps pour le faire fonctionner, mais j'ai eu l'intention de jouer avec de la toile à un certain point, et cela semble être une bonne excuse.
il y a en toile permettant jquery libs pour les anciens navigateurs
Prendre note de mon post ci-dessous. J'ai créé une DÉMO pour vous. Pour modifier la lueur de tout ce que vous devez faire est de changer la couleur de fond d'un DIV.
Quiconque a essayé de corriger cela avec de la toile? J'aimerais l'utiliser.

InformationsquelleAutor Jitendra Vyas | 2012-01-01

css css3

77

Cela peut être fait à l'aide de filtre(box-shadow). Jetez un oeil à http://demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison

Voici une démo http://jsfiddle.net/jaq316/EKNtM/

Et voici le code
```
<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"/>
```
- Ne fonctionne pas sur mon FF31, mais il ne le fait sur mon Chrome. Est-il une explication de quelque sorte que l'explique le comment et le pourquoi?
- Selon developer.mozilla.org/en-US/docs/Web/CSS/... CSS filtre n'est pas pris en charge dans Firefox encore.
- En effet. Je vais jeter un oeil à ce qui a changé et éventuellement mettre à jour la réponse
- J'ai mis à jour le code et les tripoter pour refléter les mises à jour de support dans les navigateurs firefox et chrome
InformationsquelleAutor Jacques Snyman
8

voici un plugin que j'ai trouvé au début que faire l'affaire sur Image PNG...

Utilisation:

Permettre d'éclat et de définir la couleur et le rayon:
```
$("#testimg").glow({ radius: "20", color:"green"});
```
Désactiver éclat:
```
$("#testimg").glow({ radius: "20", color:"green", disable:true }); 
```
ou
```
$("#testimg").glow({ disable:true }); 
```
https://github.com/MisterDr/JQuery-Glow
- Oui, c'est assez cool!! Merci pour ça!! J'ai essayé pendant des heures pour obtenir Raphaël de travail, mais c'est tellement plus simple et mieux
InformationsquelleAutor unijad

Simple comme bonjour. Il vous suffit d'utiliser la même image deux fois, l'une au dessus de l'autre.

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

Que vous venez de travail sur l'image ci-dessous, l'échelle un peu, vif jusqu'à ce qu'il est blanc et flou. Ensuite, vous définissez votre opacité à 0 et le ramener à l'un quand l'image ci-dessus est planait.

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

Pas de Javascript requis que ce soit.

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

BRO. Je dois vous dire ceci: VOUS ÊTES UN GÉNIE. Je n'ai pas même besoin de cette fonctionnalité dans CSS/JS. Je souhaite l'utiliser dans une toile pour une application android. Je pensais à une itération de pixels et de reconnaître ce qui est un avantage, quand j'ai lu votre réponse, je me sentais vraiment stupide. Merci

InformationsquelleAutor Simentesempre

3

Si vous devez le faire à plus de 500 images, ce que je voudrais faire est de grand format PNG transparent de l'inverse de la bouteille avec bords adoucis autour de la bouteille et laïcs qui, sur une DIV avec la couleur d'arrière-plan et l'image de bouteille entre les deux. Cela rendra le fond uni de couleur apparaissent à s'estomper dans l'inverse de la bouteille PNG et tout ce que vous avez à faire pour changer la couleur de l'éclat est de changer la valeur de la CSS.

Écrire un peu de jQuery pour vous permettre de saisir la valeur HEXADÉCIMALE et vous êtes fixés 😉

MODIFIER *

Problème résolu!

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

Modifier la ligne 19 du code CSS "background-color" et il mettra à jour l'éclat. La PNG sont de faible qualité, mais vous pouvez peaufiner leur de se débarrasser de la côtelée bords.

InformationsquelleAutor wwwroth
1

En fait, vous pouvez le faire avec le flou CSS3 filtre.
Juste pile 2 images l'une sur l'autre et appliquer le style suivant de l'une d'elle:
```
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
```
Pour changer la couleur de l'autre image, vous pouvez jouer avec les autres filtres comme la teinte de rotation, sephia, etc.

InformationsquelleAutor Reynold Salceda
1

Je préfère générer un tel s'allume avec un peu de l'empilement. La première image utilise le code CSS suivant la règle de filtre:
```
blur(5px) grayscale(1) sepia(1) saturate(10000%) invert(1)
```
Cela vous donne un peu plus grand que la base de "bouteille", un éclat bleu.

Puis de charger une deuxième copie de l'image dans les mêmes coordonnées, vous donnant la bouteille avec un fond transparent au sommet de la floue bleu "halo" avec un même arrière-plan transparent.

InformationsquelleAutor Aaron Nichols
0

J'ai trouvé un moyen facile si vous pouvez travailler avec photoshop.

Vous ouvrez l'image transparente (par exemple.png) dans photoshop et de prendre l'outil flou.
Ensuite, le flou sur l'ensemble de l'image et de l'enregistrer sous (par exemple, le vol stationnaire.png).
```
<div id="img1">
    <img src="images/example.png">
</div>

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

Vous devez vous connecter pour publier un commentaire.