web-dev-qa-db-fra.com

CSS: créer une lueur blanche autour de l'image

Comment créer une lueur blanche en tant que bordure d'une image de taille inconnue?

cssimagecss3borderglow
78
tamir

Utiliser un CSS3 simple (non supporté dans IE <9)

img
{
    box-shadow: 0px 0px 5px #fff;
}

Cela donnera une lueur blanche autour de chaque image de votre document. Utilisez des sélecteurs plus spécifiques pour choisir les images que vous souhaitez luire. Vous pouvez changer la couleur bien sûr :)

Si vous êtes inquiet au sujet des utilisateurs ne disposant pas des dernières versions de leurs navigateurs, utilisez ceci:

img
{
-moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0px 0px 5px #fff;
}

Pour IE vous pouvez utiliser un filtre anti-lueur (vous ne savez pas quel navigateur le prend en charge)

img
{
    filter:progid:DXImageTransform.Microsoft.Glow(Color=white,Strength=5);
}

Jouez avec les réglages pour voir ce qui vous convient :)

137
Kyle

@tamir; vous pouvez le faire avec la propriété css3.

img{
-webkit-box-shadow: 0px 0px 3px 5px #f2e1f2;
-moz-box-shadow: 0px 0px 3px 5px #f2e1f2;
box-shadow: 0px 0px 3px 5px #f2e1f2; 
}

vérifier le violon (http://jsfiddle.net/XUC5q/1/ & votre peut générer à partir d'ici http://css3generator.com/

Si vous avez besoin que cela fonctionne dans les anciennes versions d'IE, vous pouvez utiliser CSS3 PIE pour émuler l'ombre de la boîte dans ces navigateurs et vous pouvez utiliser filter comme l'a dit kyle comme ceci

filter:progid:DXImageTransform.Microsoft.Glow(color='red', Strength='5')

vous pouvez générer votre filtre à partir d'ici http://samples.msdn.Microsoft.com/workshop/samples/author/filter/Glow.htm

8
sandeep

Fonctionne comme un charme!

.imageClass {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
}

Voila! C'est ça! Évidemment, cela ne marchera pas, par exemple, mais peu importe.

5
Hank

Cela dépend de ce que sont vos navigateurs cibles. Dans les plus récents, c'est aussi simple que :

   -moz-box-shadow: 0 0 5px #fff;
-webkit-box-shadow: 0 0 5px #fff;
        box-shadow: 0 0 5px #fff;

Pour les navigateurs plus anciens, vous devez implémenter des solutions de contournement, par exemple, sur cet exemple , mais vous aurez probablement besoin d'une majoration supplémentaire.

3
Boldewyn

tard à la fête ici; Cependant, je voulais juste ajouter un peu de plaisir supplémentaire ..

box-shadow: 0px 0px 5px rgba(0,0,0,.3);
padding:7px;

vous donnera une belle apparence rembourrée en image. Le rembourrage vous donnera une bordure blanche simulée (ou celle que vous avez définie). le rgba vous permet juste de faire une opicité sur la couleur particulière; 0,0,0 étant noir. Vous pouvez tout aussi facilement utiliser n'importe quelle couleur RVB.

J'espère que cela aide quelqu'un!

2
Petrogad

Vous pouvez utiliser CSS3 pour créer un effet de ce type, mais vous ne le verrez que dans les navigateurs modernes qui prennent en charge Box Shadow, sauf si vous utilisez un remplissage multiple tel que CSS3PIE . Ainsi, par exemple, vous pourriez faire quelque chose comme ceci: http://jsfiddle.net/cany2/

0
kinakuta