Ktoś wie, czy możliwe jest jeszcze utworzenie cienia na podstawie przezroczystego tła PNG?Możliwe jest utworzenie css css na przezroczystym tle obrazu PNG?
Być może z CSS3, jquery lub po stronie serwera?
Przykład po efekt co usiłuję acheive:
całkiem pewny, czy jest możliwe, że nie będzie krzyż przeglądarka ale gotów zastosować, jeśli degraduje dobrze?
Zapraszam do dodawania ci wejście, otwartą dyskusję technik ..
Po załadowaniu obrazu do kontekstu można to zrobić.
dobre czyste źródło tutaj:
CSS nie ma pojęcia, co kształt obrazu IS, dlatego nie można określić kontur i nie można zastosować cień do niego.
Możesz utworzyć czarną kopię obrazu i umieścić ją za nim, używając indeksu Z, przesunięć kierunkowych i pewnej nieprzezroczystości. O to chodzi.
Zanim użyję 2 obrazów tylko do zrobienia cienia w png, wtedy poprawię cień bezpośrednio w png. –
Tak, to naprawdę nie ma znaczenia w tym punkcie. Nie możesz tego rozwiązać na końcu klienta. Musisz spojrzeć na rozwiązanie po stronie serwera. –
@diodeus Zgaduję, że można uzyskać obraz jako blob i pracować z danymi za pomocą javascript, więc nie powiedziałbym "nie mogę", ale bardziej prawdopodobne "nie chcę" ... :) – Christoph
Nie jest to niemożliwe. Nawet gdy tło jest przezroczyste, twój obraz nadal jest prostokątem, a cień zostanie zastosowany do obramowania.
To, co możesz zrobić, to umieszczenie cienia graficznego bezpośrednio w png. To świetnie działa na przezroczystym tle.
Wiem, że jest to możliwe przy użyciu biblioteki PHP GD. Sprawdź ten samouczek:
http://www.codewalkers.com/c/a/Miscellaneous/Adding-Drop-Shadows-with-PHP/
Przypuszczam, że stosując roztwór PHP byłby najbardziej zgodny w różnych przeglądarkach.
TAK! Możliwe jest robienie cieni na przezroczystym pliku .png w CSS3! Potrzebowałem tego w jednym projekcie, który wyświetlał się jak śmieci w IE10. Zamiast używać box-shadow użyj filtra: drop-shadow(). Składnia jest prawie taka sama. Oto artykuł: link
Ostatnim rozwiązaniem jest to (w przypadku przerw link):
.filter-drop-shadow {
-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
filter: drop-shadow(0 1px 2px rgba(0,0,0,.5));
}
Aaa i znalazłem! Zamiast używać box-shadow użyj filtra: drop-shadow(). Składnia jest prawie taka sama. Oto artykuł: [link] (http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow) –
Twój komentarz jest bardziej wartościowy w twojej odpowiedzi. Powinieneś edytować odpowiedź, ponieważ tak naprawdę nie pomaga (bez komentarza). – looper
Gotowe. Dzięki za wskazówkę. –
Nie mogę sobie wyobrazić, że jest to możliwe. W jaki sposób przeglądarka wie, czym jest zasłonięcie obrazu, aby rzucić cień? – MetalFrog
Czy to nie obraz z tutoriala, jak wykonać dokładnie to, o co pytasz: http://lineandpixel.com/blog/png-shadow? –
prawdopodobny duplikat: http://stackoverflow.com/questions/3186688/drop-shadow-for-png-image-in-css – RozzA