Mam obraz PNG, który ma dowolny kształt (nie kwadratowy).
Muszę zastosować efekt cienia do tego obrazu.
Standardowe podejście ...
-o-box-shadow: 12px 12px 29px #555;
-icab-box-shadow: 12px 12px 29px #555;
-khtml-box-shadow: 12px 12px 29px #555;
-moz-box-shadow: 12px 12px 29px #555;
-webkit-box-shadow: 12px 12px 29px #555;
box-shadow: 12px 12px 29px #555;
... wyświetla cienie dla tego obrazu, jakby był kwadratem. Widzę więc mój obraz i kwadratowy cień, który nie jest zgodny z formą obiektu, wyświetlany na obrazie.
Czy jest jakiś sposób, aby zrobić to poprawnie?
css
image
png
transparency
AntonAL
źródło
źródło
filter
właściwości CSS wielopłytkowej ... Chociaż nie sądzę, żeby tagi SVG HTML były potrzebne, jakikolwiek PNG z kanałem alfafilter: drop-shadow(x y blur color);
więc sztuczka SVG nie powinna już być konieczna.Tak, można to zrobić za pomocą
filter: dropShadow(x y blur? spread? color?)
CSS lub wbudowanego:źródło
Jeśli masz> 100 obrazów, dla których chcesz mieć cienie, sugerowałbym użycie programu wiersza poleceń ImageMagick . Dzięki temu możesz zastosować cienie w kształcie do 100 zdjęć, wpisując jedno polecenie! Na przykład:
Powyższe polecenie (powłoki) pobiera każdy plik .png z bieżącego katalogu, stosuje cień i zapisuje wynik w katalogu shadow /. Jeśli nie podoba Ci się generowany cień, możesz bardzo poprawić parametry; zacznij od przejrzenia dokumentacji cieni i ogólnych instrukcji użytkowania zawierają wiele fajnych przykładów rzeczy, które można zrobić z obrazami.
Jeśli w przyszłości zmienisz zdanie na temat wyglądu cieni - to tylko jedno polecenie, aby wygenerować nowe obrazy o różnych parametrach :-)
źródło
mkdir shadow
) 2.$i
powinieneś zacytować (jak w"$i"
) lub zadławi się, jeśli w nazwie pliku będzie spacja:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i".png; done
filename.png.png
. Oto w pełni działająca wersja:for i in *.png; do convert "$i" '(' +clone -background black -shadow 80x3+3+3 ')' +swap -background none -layers merge +repage shadow/"$i"; done
To działało dla mnie świetnie. Należy zauważyć, że w IE potrzebujesz pełnego koloru (# 222222), trzy znaki nie działają.
źródło
Jak wspomniał Dudley w swojej odpowiedzi jest to możliwe dzięki filtrowi CSS typu drop-shadow dla webkita, SVG dla Firefoxa i filtrom DirectX dla Internet Explorera 9-.
Kolejnym krokiem jest wprowadzenie SVG, eliminując dodatkowe żądanie:
źródło
Dodaj ramkę z promieniem w swojej klasie, jeśli jest to blok. ponieważ domyślnie cień będzie stosowany na granicy bloku, nawet jeśli obraz ma zaokrąglony narożnik.
border-radius: 4px;
zmień jego promień obramowania zgodnie ze swoim narożnikiem obrazu. Mam nadzieję, że to pomoże.
źródło
Po prostu dodaj to:
przykład:
źródło
Oto gotowy fragment kodu animacji po najechaniu blaskiem:
http://codepen.io/widhi_allan/pen/ltaCq
źródło
Kiedy zamieściłem to pierwotnie, nie było to możliwe, więc jest to obejście. Teraz po prostu sugeruję użycie innych odpowiedzi.
Nie ma sposobu, aby uzyskać dokładny kontur obrazu, ale można go sfałszować za pomocą div za obrazem pośrodku.
Jeśli moja sztuczka nie działa, musisz wyciąć obraz i zrobić to dla każdego z małych obrazów. (im więcej zdjęć, tym dokładniejszy będzie wyglądać cień), ale w przypadku większości zdjęć wygląda dobrze z jednym zdjęciem.
co musisz zrobić, to tak otoczyć img div
następnie wsuwasz pustą przegrodę do owinięcia (będzie to cień)
a następnie musisz sprawić, by cień pojawił się za obrazkiem za pomocą CSS:
umieść teraz imgWrap, aby ustawić oryginalny obraz ... w celu wyśrodkowania cienia obrazu, możesz pomieszać z pierwszymi dwoma wartościami cienia-pudełka, czyniąc je ujemnymi .... lub możesz ustawić obraz i obraz cienia całkowicie czyniąc img górną i lewą wartość = 0, a wartości div cienia = połowę odpowiednio szerokości i wysokości img.
Jeśli to wygląda okropnie, wytnij obraz i spróbuj ponownie.
(Jeśli nie chcesz, aby cień za imgiem znajdował się tylko na konturze, musisz sprawić, by twój img był nieprzezroczysty i sprawić, by działał tak, jakby był przezroczysty, co nie jest takie trudne i możesz to skomentować, a wyjaśnię później)
źródło
W moim przypadku musiał działać na nowoczesnych przeglądarkach mobilnych, z obrazem PNG w różnych kształtach i przezroczystości. Cień utworzyłem przy użyciu duplikatu obrazu. Oznacza to, że mam dwa
img
elementy tego samego obrazu, jeden na drugim (za pomocąposition: absolute
), a jeden za nim ma następujące zasady:Obejmuje to filtr jasności w celu przyciemnienia dolnego obrazu oraz filtr rozmycia w celu rzucenia efektu rozmazania efektu cienia. Następnie stosuje się krycie w 50%, aby go zmiękczyć.
Można to zastosować w różnych przeglądarkach za pomocą
moz
ims
flag .Przykład: https://jsfiddle.net/5mLssm7o/
źródło
Zaproponowano funkcję, której można użyć do dowolnie ukształtowanych cieni. Możesz to zobaczyć tutaj, dzięki uprzejmości Lea Verou:
http://www.netmagazine.com/features/hot-web-standards-css-blending-modes-and-filters-shadow-dom
Obsługa przeglądarki jest jednak minimalna.
źródło
Nie będzie to możliwe z css - obraz jest kwadratem, więc cień byłby cieniem kwadratu. Najłatwiejszym sposobem byłoby użycie programu Photoshop / Gimp lub dowolnego innego edytora obrazów w celu zastosowania cienia jak rysowanie rdzenia.
źródło
Sztuczka, której często używam, gdy potrzebuję tylko „małego” cienia (czytaj: kontur nie może być super precyzyjny), polega na umieszczeniu DIV z wypełnieniem promieniowym 100% -czarno-100% -przezroczystym pod obrazem. CSS dla DIV wygląda mniej więcej tak:
Spowoduje to utworzenie okrągłej czarnej, wyblakłej „kropki” na DIV 320 x 320. Jeśli przeskalujesz wysokość lub szerokość DIV, otrzymasz odpowiedni owal. Bardzo miło jest tworzyć np. Cienie pod butelkami lub inne kształty w kształcie walca.
Istnieje absolutnie niesamowite, super doskonałe narzędzie do tworzenia gradientów CSS:
http://www.colorzilla.com/gradient-editor/
ps: Wykonaj uprzejme kliknięcie reklamy, gdy z niej korzystasz. (I nie, nie jestem z tym związany. Ale uprzejme klikanie powinno stać się trochę nawykiem, szczególnie w przypadku narzędzia, którego często używasz ... po prostu mówię ... ponieważ wszyscy pracujemy w sieci ... )
źródło
Nie można tego zrobić niezawodnie we wszystkich przeglądarkach. Microsoft nie obsługuje już filtrów DX od IE10 +, więc żadne z rozwiązań tutaj nie działa w pełni:
https://msdn.microsoft.com/en-us/library/hh801215(v=vs.85).aspx
Jedyną właściwością, która działa niezawodnie we wszystkich przeglądarkach, jest
box-shadow
ustawienie ramki na elemencie (np. Div), co daje kwadratową ramkę:box-shadow: horizontalOffset verticalOffset blur Rozmycie odległości Odstęp koloru wstawki;
na przykład
Jeśli zdarzy się, że masz obraz „kwadratowy”, ale z jednolitymi zaokrąglonymi narożnikami, cień z nim współpracuje
border-radius
, więc zawsze możesz emulować zaokrąglone rogi obrazu w div.Oto dokumentacja Microsoft dla
box-shadow
:https://msdn.microsoft.com/en-us/library/gg589484(v=vs.85).aspx
źródło
Może szukasz tego. http://lineandpixel.com/blog/png-shadow
źródło