CSS3 Image Reflection [Suggerimenti CSS3]
Finora abbiamo discusso molte nuove proprietà in CSS3. Oltre a ciò, ci sono in realtà alcune altre proprietà che non sono attualmente incluse nelle specifiche ufficiali CSS3 che vale la pena provare, una delle quali è la box-riflettere proprietà avviata da Webkit. Questa proprietà può riflettere sugli oggetti specificati.
Riflessione di base
L'implementazione di base è abbastanza intuitiva; diciamo, vogliamo il riflesso sotto l'oggetto reale. Possiamo scrivere:
img -webkit-box-reflect: di seguito;
Questo esempio mostra come riflettiamo un'immagine sotto (la posizione) l'oggetto. Ma, in questo caso, possiamo anche tenere la riflessione sul destra, sinistra, e sopra.
Offset di riflessione
Compensare è usato per definire lo spazio tra il riflesso e l'oggetto reale riflesso. Vediamo il frammento di codice qui sotto;
img -webkit-box-reflect: below 10px;
Nel codice sopra, abbiamo separato il riflesso dall'oggetto reale di 10px;
- Visualizza la demo
Mascherare con gradienti
L'effetto riflesso che vediamo comunemente è la dissolvenza in chiusura e mostra solo la metà o meno dell'oggetto reale. Per replicare questo tipo di effetto, possiamo applicare Gradienti CSS3 per mascherare l'oggetto, in questo modo;
-webkit-box-reflect: below 0px -webkit-gradient (lineare, a sinistra in alto, a sinistra in basso, da (trasparente) a (rgba (250, 250, 250, 0,1)));
Questo codice produrrà la seguente presentazione;
Possiamo anche usare colore-stop per controllare le transizioni e rendere il riflesso più gradevole:
img -webkit-box-reflect: below 0px -webkit-gradient (lineare, superiore sinistro, inferiore sinistro, da (trasparente), color-stop (70%, trasparente), a (rgba (250, 250, 250, 0,1 )));
- Visualizza la demo
Alternative per Firefox
Questa proprietà, tuttavia, al momento funziona solo con i browser Webkit (ovvero Safari e Chrome). Per ottenere lo stesso effetto in Firefox, è necessario un altro percorso: utilizzando -moz-elemento () funzione. Questa funzione essenzialmente genererà o replicherà il contenuto da specifici elementi HTML. Diamo un'occhiata al seguente esempio;
Abbiamo un'immagine avvolta in a E, per tenere il riflesso, useremo Il Sfortunatamente, non esiste ancora un modo semplice per creare un simpatico effetto riflesso in Firefox usando questa pratica. Il codice sopra semplicemente creerà il riflesso, senza l'effetto di dissolvenza.moz-riflettere id;
:dopo pseudo-elemento, come segue; # moz-reflect: after content: ""; blocco di visualizzazione; background: -moz-element (# moz-reflect) no-repeat; larghezza: auto; altezza: 375 px; margin-bottom: 100px; -moz-transform: scaleY (-1);
-moz-transform con la scala negativa si usa per capovolgere l'oggetto generato capovolto. Inoltre, assicurati che il altezza è abbastanza preciso per l'oggetto reale altezza per evitare inutili linee extra per posizionare il riflesso.Ulteriori riferimenti
