Reflection gradienty za pomocą CSS w Android Browser

Question

mam trochę CSS do wyświetlania refleksji nad elementem, który wykorzystuje gradient -webkit-fade out:

.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); } 

• Na przeglądarek, które wspierają -webkit-box-zastanowienia takie jak chrom, wyświetla odbicie elementu, który stopniowo zanika zgodnie z oczekiwaniami.
• W przeglądarkach, które w ogóle nie obsługują, żadne odbicie nie jest wyświetlane.

Jednak w przeglądarce Androida odbicie jest pokazywane, ale nie zanika.

Czy jest jakiś sposób na uzyskanie Android albo:

1. wyciszeniem odbiciu lub
2. nie przedstawiają odbicie w ogóle.

Wiem, że mogę użyć javascript do wykrycia przeglądarki i odpowiednio zmienić styl, ale zdecydowanie wolę rozwiązanie tylko CSS.

Answer 1

CSS nie jest przeznaczony do obsługi takich rzeczy. Innymi słowy: nie, to niemożliwe.

Answer 2

Mam podobne problemy staramy się robić rzeczy z gradientów tła w przeglądarce Android i wydaje się całkowicie nieobsługiwane

Niestety powyższa odpowiedź jest w porządku, nie ma sposobu, aby podzielić swoją deklarację w górę ładny, progresywnie ulepszony sposób. Możesz użyć JavaScript/modernizr, o którym wspomniałeś, i przynajmniej ustawić klasy pomocnicze, aby nie musieć odwracać stylu w kodzie.

Możesz spróbować odtworzyć ten efekt za pomocą elementu canvas HTML, używając drawImage z obrazem i przekształcając go. Chociaż płótno może być wolne w mobilnym pakiecie internetowym.

Powodzenia

Answer 3

czy gradienty działają w ogóle w przeglądarce na Androida? jeśli tak, upewnij się, że używasz poprawnej wersji. Istnieje stary format webkita, którego możesz potrzebować. Jeśli nie, po prostu użyj modernizr, aby ukryć go w miejscach, które nie obsługują gradientów.

Answer 4

Bez przykładowego pliku lub linku, trudno jest zobaczyć, czego potrzebujesz.

Kilka miesięcy temu też grałem z kilkoma refleksjami i nie znalazłem niczego, co mogłoby zrobić to, co opisujesz. Mam kilka kroków, aby uzyskać to, czego chcesz, poza kodem. Polecam element, który chcesz odzwierciedlać, jako plik PNG na przezroczystym tle, aby rozpocząć.

etapy: 1.Take obraz do swojego ulubionego programu do obróbki obrazu (. Ex Photoshop)

1. dwukrotnie lub rozszerzyć obraz płótno ilości niezbędnej do włączenia odbicie w odpowiednim kierunku
2. Zduplikuj warstwę (Warstwa Photoshop-Layer/Duplicate)
3. Odzwierciedlaj obraz.(Photoshop Warstwa/Obrót obrazu/Klapki Płótno (twój kierunek))
4. Przenieś powielona warstwę tak, że pojawia się jako lustro pomocą narzędzia Move
5. Wybierz narzędzie Marquis i ustaw rozmycie krawędzi do około 50% oryginalnej szerokości obrazu.
6. Przeciągnij kursor nad warstwę "odbitą", nie przejmuj się, jeśli powiesz, że linie wyboru nie będą widoczne, chyba że nic nie zostanie wybrane. Jeśli jest napisane, że nic nie zostało wybrane, zmniejsz rozmycie krawędzi do około 25% i spróbuj ponownie.
7. Po wybraniu, czy jest widoczny, czy nie, usuń wybrany obszar. To powinno dać ci "odbicie".
8. W razie potrzeby dodaj tło na warstwie poniżej wszystkiego.
9. Zapisz swoje zdjęcie jako zdjęcie jpg, jeśli nie masz przezroczystego tła lub png, jeśli to zrobisz. Użyj go zamiast obrazu, który odbijałeś i zanikając za pomocą kodu. Będzie to w większości zgodne z przeglądarką.