CSS: Weißes Leuchten um das Bild erzeugen

79

Wie kann ich ein weißes Leuchten als Rand eines Bildes unbekannter Größe erstellen?

image css border glow Tamir
quelle

Antworten:

138

Verwenden Sie einfaches CSS3 (wird in IE <9 nicht unterstützt).

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

Dadurch wird jedes Bild in Ihrem Dokument weiß beleuchtet. Verwenden Sie spezifischere Selektoren, um auszuwählen, um welche Bilder es sich handeln soll. Sie können die Farbe natürlich ändern :)

Wenn Sie sich Sorgen über Benutzer machen, die nicht über die neuesten Versionen ihrer Browser verfügen, verwenden Sie Folgendes: 

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

Für IE können Sie einen Glühfilter verwenden (nicht sicher, welche Browser ihn unterstützen)

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

Spielen Sie mit den Einstellungen, um zu sehen, was zu Ihnen passt :)

Kyle
quelle
Ich denke, dies unterstützt nur IE 9+, fügen Sie einfach hinzu: <meta http-equiv="X-UA-Compatible" content="IE=9" />um die Seite in IE9 und IE10 als Version IE9 zu rendern
Christian Mark
5
Beachten Sie, dass der Filter in mehreren Elementen ein unerwartetes Verhalten aufweist. Wenden Sie es auf ein Feldset an und lassen Sie sich überraschen. Es kann auch zu untergeordneten Elementen gelangen. Und es wird eine ActiveX-Warnung für die Seite mit dem gefürchteten gelben Balken angezeigt. Vermeiden Sie es einfach. Fügen Sie einen flachen hellgrauen Schatten für IE hinzu und fertig.
GCB
Funktioniert nicht mit transparenten Bildern. Wie ein rundes PNG-Logo.
Santosh Kumar
@ SantoshKumar, nein, das tut es nicht, weil der Kastenschatten unmöglich wissen kann, wo sich die nicht transparenten Pixel eines PNG befinden. Es betrifft nur HTML-Elemente, das <img> -Element selbst, nicht den Inhalt.
Kyle
1
@ Kyle Schlagschatten kann aber :)
Brandito
9

@tamir; Sie können es mit der CSS3-Eigenschaft tun.

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

Überprüfen Sie die Geige http://jsfiddle.net/XUC5q/1/ und Sie können von hier aus http://css3generator.com/ generieren.

Wenn Sie es benötigen, um in älteren Versionen von IE zu funktionieren, können Sie CSS3 PIE verwenden , um den Box-Shadow in diesen Browsern zu emulieren, und Sie können verwenden, filterwie Kyle dies sagte

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

Sie können Ihren Filter hier generieren: http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Sandeep
quelle
Sie brauchen die Moz- und Webkit-Präfixe nicht mehr, die neuesten Versionen dieser Browser unterstützen sie box-shadowwie sie sind :)
Kyle
@Kyle; Ich weiß, aber es funktioniert nicht mit der vorherigen Version vor Mozilla Beta.
Sandeep
2
@Kyle - und wenn Sie Benutzer älterer Versionen unterstützen möchten? (Es gibt noch einige da draußen)
Spudley
1
@Kyle; Möglicherweise müssen Sie Ihre Antwort aktualisieren, weil es so viele Leute gibt, die dort Mozilla nicht aktualisiert haben.
Sandeep
7

Klappt wunderbar!

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

Voila! Das ist es! Offensichtlich funktioniert das nicht in dh, aber wen interessiert das ...

Strang
quelle
2
Abgestimmt; -webkit-filter ist keine CSS-Eigenschaft und würde auf jeden Fall nur Webkit-Browser unterstützen. Sie sollten auch eine Version ohne Präfix und wahrscheinlich die Präfixe -moz-, -ms- und -o- hinzufügen. sollte Mozilla, Microsoft oder Opera (während Opera 12 noch im Umlauf ist ...)
Algy Taylor
Upvoted. Eine nicht standardmäßige Immobilie zu sein, macht sie nicht nutzlos. Es gibt Anwendungsfälle, in denen Sie nur das Webkit unterstützen müssen. Diese Antwort hat mir geholfen, und der Webkit-Filter-Effekt ist in meinem Fall besser geeignet als Box-Shadow.
Anton Reshetnikov
Dies ist die beste Antwort, da sie den Inhalt und nicht den Container in den
Schatten stellt
3

Hängt davon ab, was Ihre Zielbrowser sind. In neueren ist es so einfach wie :

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

Für ältere Browser müssen Sie Problemumgehungen implementieren, z. B. basierend auf diesem Beispiel , aber Sie benötigen höchstwahrscheinlich zusätzliche Markierungen.

Boldewyn
quelle
2

spät zur Party hier; wollte aber nur ein bisschen mehr Spaß machen ..

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

gibt Ihnen ein gut aussehendes gepolstertes Bild. Durch das Auffüllen erhalten Sie einen simulierten weißen Rand (oder einen von Ihnen festgelegten Rand). Mit der RGBA können Sie nur eine Opizität für die jeweilige Farbe vornehmen. 0,0,0 ist schwarz. Sie können genauso gut jede andere RGB-Farbe verwenden.

Hoffe das hilft jemandem!

Petrogad
quelle