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

79

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

— tamir
źródło

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