web-dev-qa-db-fra.com

Comment donner un éclat externe à un objet dans un png transparent en utilisant CSS3?

Je travaille sur un projet où je dois apporter des modifications à plus de 500 images pour donner un effet de survol au dessus de la lumière. Je devrai modifier chaque image pour donner la lueur extérieure. Ce sera une tâche très chronophage.

Ceci est un exemple d'une image. Toutes les images sont transparentes .png

enter image description here

Est-il possible de donner cet effet de rayonnement extérieur à l'image de la bouteille en utilisant des astuces de CSS3?

Ceci est juste un exemple d'une image d'autres images sont dans différentes taille et forme.

csscss3
36
Jitendra Vyas

Cela peut être fait en utilisant un filtre (box-shadow). Regardez 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"/>
72
Jacques Snyman

voici un plugin que j'ai trouvé tôt qui fait le tour sur PNG Image ...

Usage:

Activer la lueur et définir la couleur et le rayon:

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

Désactiver la lueur:

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

ou

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

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

8
unijad

Ce que vous pouvez faire, c'est créer un effet de rayonnement dans votre programme graphique, puis l'appliquer comme image d'arrière-plan lorsque l'image est survolée. Vous devrez produire la lueur pour chaque image vous-même, mais ça aura l'air vraiment cool.

EDIT: J'ai créé un programme qui créera les images brillantes pour vous rapidement et facilement. Vous pouvez le télécharger sur http://thedarkworld.net/projects/imgglow/
J'espère que cela t'aides.

7
Niet the Dark Absol

Aussi facile que la tarte. Vous utilisez 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>

Vous travaillez simplement sur l'image ci-dessous, redimensionnez-la un peu, éclaircissez-la jusqu'à ce qu'elle soit blanche, puis appliquez un flou. Ensuite, définissez votre opacité sur 0 et réglez-la à nouveau lorsque l'image ci-dessus est survolée.

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

4
Simentesempre

Si vous devez faire cela à plus de 500 images, ce que je ferais serait un PNG transparent de l’inverse de la bouteille avec des bords à bords flous autour de la bouteille et déposez-le sur une DIV avec la couleur de fond en dessous et l’image de la bouteille entre les deux. . Cela fera apparaître la couleur de fond solide dans la bouteille inversée PNG et tout ce que vous auriez à faire pour changer la couleur de lueur est de changer la valeur du CSS.

Ecrivez un jQuery pour vous permettre de saisir la valeur HEX et le tour est joué;)

MODIFIER *

Problème résolu!

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

Éditez la ligne 19 du code CSS "background-color" et cela actualisera la lueur. Les PNG sont de mauvaise qualité mais vous pouvez les ajuster pour vous débarrasser des bords striés.

3
wwwroth

En fait, vous pouvez le faire avec le filtre flou CSS3 ..__, empilez simplement 2 images et appliquez le style suivant à l'une d'elles:

-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 d’autres filtres, tels que teinte/rotation, sephia, etc.

1
Reynold Salceda

Je préfère générer de telles lueurs avec un peu d'empilement. La première image utilise la règle de filtre CSS suivante:

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

Cela vous donne une lueur bleue plus grande que la base.

Ensuite, chargez une seconde copie de l'image aux mêmes coordonnées, ce qui vous donnera la bouteille avec un fond transparent au sommet du "halo" bleu flou avec un fond transparent similaire.

1
Aaron Nichols

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

Vous ouvrez l'image transparente (example.png) dans photoshop et prenez l'outil de flou . Ensuite, floutez toute l'image et enregistrez sous (example-hover.png).

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

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