gradienti Riflessione usando i CSS nel browser di Android

Question

ho qualche CSS per la visualizzazione di una riflessione su un elemento che utilizza -webkit-gradiente di 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)); } 

• Il browser che supportano -webkit-box-riflettere come chrome, questo mostra un riflesso dell'elemento che si attenua gradualmente come previsto.
• Sui browser che non lo supportano affatto, non viene mostrato alcun riflesso.

Tuttavia, sul browser di Android, viene visualizzata una riflessione, ma non si dissolve.

non v'è alcun modo di ottenere Android a uno:

1. fade out la riflessione, o
2. non mostrare il riflesso a tutti.

So che potrei usare javascript per rilevare il browser e modificare lo stile di conseguenza, ma preferirei molto una soluzione solo CSS.

Answer 1

CSS non è progettato per gestire cose del genere. In altre parole: no, non è possibile.

Answer 2

Sto avendo problemi simili cercando di fare le cose con sfondo gradienti nel browser di Android, e sembra completamente supportato

Purtroppo la risposta di cui sopra è di destra, non c'è un modo per dividere la sua dichiarazione in un bel modo progressivamente migliorato. Potresti usare JavaScript/modernizr come hai detto e almeno impostare una classe di supporto in modo da non dover capovolgere lo stile all'interno del codice.

Si potrebbe provare a riprodurre questo effetto con un elemento canvas HTML, usando drawImage con l'immagine e trasformandola. Sebbene il canvas possa essere lento nel webkit mobile.

Buona fortuna

Answer 3

fanno gradienti funzionano affatto nel browser di Android? se lo fanno, assicurati di utilizzare la versione corretta. C'è un vecchio formato webkit che potrebbe essere necessario utilizzare. In caso contrario, basta usare modernizr per nasconderlo in luoghi che non supportano le sfumature.

Answer 4

Senza un file di esempio o un collegamento, è un po 'difficile vedere quello che ti serve.

Ho anche suonato alcune cose di riflessione qualche mese fa e non ho trovato nulla che potesse fare ciò che descrivevi. Ho alcuni passaggi per ottenere quello che vuoi, al di fuori del codice. Raccomando l'elemento che desideri riflettere come PNG su uno sfondo trasparente, per iniziare.

I passi: 1.Take l'immagine nel programma di manipolazione delle immagini preferito (Es. Photoshop)

1. doppio o estendere l'immagine di tela la quantità necessaria per includere la riflessione nella direzione appropriata
2. Duplica il livello (Photoshop-Layer/Duplicate Layer)
3. Riflette l'immagine.(Photoshop-layer/Rotazione immagine/Canvas flip (la direzione))
4. Spostare il livello duplicato in modo tale che appare come uno specchio utilizzando lo strumento Sposta
5. Selezionate lo strumento marchese, e impostare la sfocatura bordo a circa 50% della larghezza dell'immagine originale.
6. Trascina il cursore sul livello "riflesso", non preoccuparti se dice che le linee di selezione non saranno visibili, a meno che non venga indicato che non è stato selezionato nulla. Se dice che non è stato selezionato nulla, riduci la sfocatura dei bordi a circa il 25% e riprova.
7. Una volta selezionata, visibile o meno, eliminare l'area selezionata. Questo dovrebbe darti un aspetto "riflesso".
8. Se lo si desidera, aggiungere uno sfondo su un livello sotto tutto il resto.
9. Salva la tua immagine come jpg se non hai uno sfondo trasparente o un png se lo fai. Usalo al posto dell'immagine che stavi riflettendo e sbiadendo con il codice. Questo sarà principalmente compatibile con il browser.