CSS: utwórz białą poświatę wokół obrazu

79

Jak mogę stworzyć białą poświatę jako obramowanie obrazu o nieznanym rozmiarze?

image css border glow tamir
źródło

Odpowiedzi:

138

Użyj prostego CSS3 (nieobsługiwany w IE <9)

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

Spowoduje to umieszczenie białej poświaty wokół każdego obrazu w dokumencie, użyj bardziej szczegółowych selektorów, aby wybrać obrazy, które mają się świecić. Oczywiście można zmienić kolor :)

Jeśli martwisz się o użytkowników, którzy nie mają najnowszych wersji swoich przeglądarek, użyj tego: 

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

W IE możesz użyć filtra poświaty (nie wiem, które przeglądarki go obsługują)

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

Baw się ustawieniami, aby zobaczyć, co Ci odpowiada :)

Kyle
źródło
Myślę, że to obsługuje tylko IE 9+, po prostu dodaj: <meta http-equiv="X-UA-Compatible" content="IE=9" />aby wyrenderować stronę w IE9 i IE10 jako wersję IE9
Christian Mark
5
Zwróć uwagę, że filtr zachowuje się nieoczekiwanie w kilku elementach. Zastosuj go do zestawu pól i zdziw się. Może również przeciekać do elementów podrzędnych. I wyświetli ostrzeżenie ActiveX dla strony z przerażającym żółtym paskiem. Po prostu tego unikaj. dodaj płaski, jasnoszary cień dla IE i gotowe.
gcb
Nie działa z przezroczystymi obrazami. Jak okrągłe logo png.
Santosh Kumar
@SantoshKumar, nie, nie ma, ponieważ box-shadow nie może prawdopodobnie wiedzieć, gdzie znajdują się nieprzezroczyste piksele png. Wpływa tylko na elementy HTML, sam element <img>, a nie na treść.
Kyle,
1
@Kyle drop-shadow może chociaż :)
Brandito,
9

@tamir; możesz to zrobić z właściwością 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; 
}

sprawdź skrzypce http://jsfiddle.net/XUC5q/1/ i swoją puszkę wygenerować tutaj http://css3generator.com/

Jeśli potrzebujesz go do pracy w starszych wersjach IE, możesz użyć CSS3 PIE do emulacji cienia pola w tych przeglądarkach i możesz użyć filtertak, jak powiedział Kyle

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

możesz wygenerować swój filtr tutaj http://samples.msdn.microsoft.com/workshop/samples/author/filter/Glow.htm

Sandeep
źródło
Nie potrzebujesz już prefiksów moz i webkit, najnowsze wersje tych przeglądarek obsługują box-shadowtak jak jest :)
Kyle
@kyle; Wiem, ale to nie działa na poprzedniej wersji przed wersją beta Mozilli.
sandeep
2
@Kyle - a jeśli chcesz wspierać użytkowników starszych wersji? (wciąż jest kilka)
Spudley,
1
@kyle; być może będziesz musiał zaktualizować swoją odpowiedź, ponieważ jest tak wiele osób, które nie aktualizowały tam mozilla.
Sandeep
7

Działa jak marzenie!

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

Voila! Otóż ​​to! Oczywiście to nie zadziała w ie, ale kogo to obchodzi ...

Motek
źródło
2
Głosowano w dół; -webkit-filter nie jest właściwością CSS, aw każdym razie obsługuje tylko przeglądarki webkit - lepiej byłoby dodać również wersję bez prefiksu i prawdopodobnie przedrostki -moz-, -ms- i -o-, czy mozilla, Microsoft czy Opera (o ile Opera 12 jest jeszcze w obiegu ...)
Algy Taylor
Głosowano za. Bycie niestandardową własnością nie czyni jej bezużyteczną. Są przypadki użycia, w których nie potrzebujesz niczego poza webkitem. Ta odpowiedź pomogła mi, a efekt -webkit-filter wygląda w moim przypadku lepiej niż box-shadow.
Anton Jebrak
To najlepsza odpowiedź, ponieważ
zrzuci
3

Zależy od tego, jakie są Twoje przeglądarki docelowe. W nowszych jest to tak proste, jak :

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

W przypadku starszych przeglądarek musisz zastosować obejścia, np. Na podstawie tego przykładu , ale najprawdopodobniej będziesz potrzebować dodatkowego znacznika.

Boldewyn
źródło
2

spóźniony na imprezę tutaj; jednak chciałem tylko dodać trochę dodatkowej zabawy.

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

da ci ładnie wyglądający wyściełany obraz. Dopełnienie da ci symulowaną białą ramkę (lub dowolną ustawioną ramkę). rgba po prostu pozwala ci zrobić opicję na określonym kolorze; 0,0,0 jest czarny. Równie łatwo możesz użyć dowolnego innego koloru RGB.

Mam nadzieję, że to komuś pomoże!

Petrogad
źródło
0

Możesz użyć CSS3, aby stworzyć taki efekt, ale wtedy zobaczysz to tylko w nowoczesnych przeglądarkach obsługujących cienie pola, chyba że używasz wypełnienia takiego jak CSS3PIE . Na przykład możesz zrobić coś takiego: http://jsfiddle.net/cany2/

kinakuta
źródło