CSS: Weißes Leuchten um das Bild erzeugen

79

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

— Tamir
quelle

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

0

Sie können CSS3 verwenden, um einen solchen Effekt zu erstellen, aber dann wird er nur in modernen Browsern angezeigt , die Box Shadow unterstützen, es sei denn, Sie verwenden eine Polyfüllung wie CSS3PIE . So könnten Sie beispielsweise Folgendes tun: http://jsfiddle.net/cany2/

— Kinakuta
quelle