La proprietà box-reflect è solo uno dei tanti fantastici nuovi effetti CSS3 che Webkit porta in tavola. Sfortunatamente, non è il più facile da usare. C'è molta sintassi che può essere fonte di confusione e oggi la analizzeremo e la spiegheremo nei dettagli in modo da poterla risolvere.
È importante notare che, a questo punto, box-reflect è supportato solo dai browser Webkit. È un effetto visivo superfluo, quindi puoi utilizzarlo fino a quando accetti che non verrà eseguito il rendering in nulla tranne Chrome e Safari.
Sintassi di base: la direzione è tutto ciò di cui hai bisogno
Nonostante il fatto che, in pratica, sia così complesso, -webkit-box-riflettere inizia estremamente facile da usare. Tutto quello che devi fare per aggiungere una riflessione a un elemento è dichiarare la proprietà e impostare il direzione valore.
Nell'esempio sopra ho impostato il direzione valore a sotto. Completamente al 98% del tempo o più, questo è l'unico valore di cui avrai bisogno. Ma nel caso tu stia davvero diventando creativo, puoi effettivamente dichiarare una riflessione in una delle quattro direzioni:
Qualunque direzione tu scelga, il browser la sceglierà come punto di ancoraggio e capovolgerà l'immagine. Ad esempio, se hai modificato il nostro esempio originale con un valore di destra, otterresti quanto segue.
Compensare
Dopo il direzione valore, puoi opzionalmente impostare un compensare valore. Questo è piuttosto semplice e pone semplicemente la distanza tra l'immagine e il suo riflesso, quasi come se l'immagine si muovesse su una superficie di vetro. Ecco come funziona:
Ecco un'anteprima di quale sia la differenza tra un valore di? 0? e un valore di? 20px ?.
È interessante notare che non sei limitato ai pixel come misura. Ecco alcuni altri valori che funzionano altrettanto bene:
Gradienti Webkit
Perché stiamo parlando di gradienti webkit, non è questo un articolo sulle riflessioni? La risposta è che il terzo valore, maschera-box-immagine, utilizza vari strumenti complicati per ottenere alcuni effetti avanzati, l'essere primario -webkit gradiente. Semplicemente non puoi capire come funzionano i riflessi CSS senza prima aver compreso i gradienti.
Ci sono diversi tipi di gradienti e browser diversi nella loro sintassi, ma per gli scopi di questo articolo, ci atterremo ai gradienti lineari di Webkit. Facciamo un salto e guardiamo il codice per un gradiente Webkit di base.
Questo codice genera il seguente gradiente:
Questo codice può essere fonte di confusione, quindi scomporlo. Ci sono tre parti principali: tipo, punto di partenza / arresto e da / a colore. Ci sono un paio di tipi diversi ma non abbiamo bisogno di entrare in tutto tranne i gradienti lineari, quindi questo valore rimarrà lo stesso.
I punti di partenza e di arresto consentono di inclinare la sfumatura nella direzione che si utilizza. Nell'esempio sopra, abbiamo iniziato nel centro in alto e finito nel centro in basso, ottenendo una gradazione di colore perfettamente verticale. Tuttavia, se iniziamo a giocare con questi, possiamo ottenere risultati diversi.
Questa volta abbiamo iniziato a sinistra in alto e finito in basso a destra, il che si traduce in un gradiente inclinato come quello in basso.
Allo stesso modo, il a partire dal e a i valori ti permettono di impostare il colore all'inizio e alla fine del gradiente. Negli esempi precedenti siamo passati dal nero al bianco, ma puoi usare tutti i colori che desideri in qualsiasi formato di colore CSS che desideri.
Ecco un altro esempio che crea un gradiente rosso piacevole.
Soste di colore
Oltre ai punti di partenza e di arresto, è anche possibile dichiarare varie fermate di colore lungo il percorso. Fondamentalmente, quello che stai facendo è dire al browser, al punto? X?, Rendere il gradiente questo colore.
Ecco un esempio di un gradiente che va dal nero al nero, che normalmente risulterebbe in un colore solido. Tuttavia, abbiamo gettato un fermo colore al 50% e lo abbiamo impostato su bianco, il che si traduce in un gradiente che inizia con il nero, sfuma in bianco a metà, quindi si dissolve nuovamente in nero.
Mascherare la riflessione
Ora che sappiamo come funzionano le sfumature, abbiamo il terzo tassello del nostro puzzle di riflessione sul Webkit. Dopo aver dichiarato il direzione e compensare valori, il tuo riflesso è ancora piuttosto noioso ma attraverso l'uso di una maschera gradiente all'improvviso abbiamo molto più controllo.
Inseriamo la sintassi del gradiente e vediamo cosa ne ricaviamo:
Come puoi vedere, qui siamo passati da cima a fondo e abbiamo lanciato una palla curva dichiarando il a partire dal colore come trasparente Dato che stiamo essenzialmente costruendo una maschera, il colore trasparente permetterà al gradiente di sfumare su qualsiasi sfondo. Allo stesso modo, il bianco del gradiente rappresenta semplicemente la piena opacità del riflesso in quel punto.
Questo codice risulta nell'immagine seguente:
Come puoi vedere, la dissolvenza del riflesso con il gradiente consente di ottenere un certo livello dinamico che fornisce un suggerimento più realistico che stavamo ottenendo in precedenza. Una delle cose più confuse qui è quella, anche se abbiamo dichiarato trasparente in cima al gradiente e completamente opaco in fondo, quello che otteniamo è esattamente l'opposto! Questo perché la nostra riflessione è una versione capovolta dell'immagine, quindi tutto è capovolto.
Se questo ti confonde, tutto ciò che devi fare è capovolgere tutti i valori del gradiente. Il codice seguente produrrà lo stesso gradiente e potrebbe essere più facile da capire per alcuni perché inizia al bianco e termina a trasparente, proprio come il risultato sopra.
Accorciare la riflessione
A questo punto, potresti aver notato che il nostro riflesso è piuttosto lungo. Nei casi in cui si sta lavorando con un'immagine grande come noi, probabilmente si vorrà accorciare un poco la sfumatura in modo da renderla più trasparente prima.
Quindi, come funziona questo lavoro? È qui che entrano in gioco quelle fermate di colore. Quello che vorremmo fare è creare un gradiente da trasparente a bianco, quindi inserire un punto di colore trasparente in qualche punto lungo la strada, che dissolverà in modo efficace il riflesso prima. Diamo un'occhiata al codice.
Ridurre l'opacità del riflesso
Ogni discussione che abbia mai visto per il box-reflect si ferma qui. Sfortunatamente, penso che il nostro gradiente non sia ancora molto credibile. Ogni volta che creo dei riflessi in Photoshop, riduco sempre l'opacità del livello di riflessione. Raramente vedresti un riflesso reale tanto forte quanto l'oggetto che sta riflettendo!
Quindi, a questo punto la nostra riflessione sembra sciocca e abbiamo bisogno di un modo per ridurre la sua opacità. La soluzione ovvia che ho inizialmente pensato di provare è risultata essere quella corretta: rgba. Poiché i colori dichiarati nel gradiente definiscono in realtà solo la trasparenza del gradiente, l'uso di rgba anziché di bianco puro ci consente di ridurre l'opacità e creare un risultato molto più credibile.
Nel codice qui sotto, ho semplicemente scambiato la parola "bianco"? per il suo equivalente rgba al 20% (0,2).
Qui ci sono due diversi risultati con solo il alfa valore della proprietà rgba che viene manipolata. Come puoi vedere, il risultato è molto migliore di quello che ottenevamo con il bianco solido!
Utilizzando una maschera immagine
Ecco un piccolo trucco che ho imparato da Peter Gasston in The Book of CSS3. Invece di costruire la maschera usando i gradienti CSS, puoi effettivamente usare solo un'immagine. Usando questo metodo, puoi ottenere risultati piuttosto folli.
Tutto quello che fai è dichiarare un URL di origine proprio come se tu stessi impostando un'immagine di sfondo su un elemento. Nonostante il lato negativo di essere costretti a caricare un'immagine, il codice è in realtà molto più pulito.
Per verificarlo, ho creato e salvato due file PNG separati con sfondi trasparenti. Uno contiene solo il nero solido mentre l'altro usa un gradiente radiale.
Quando utilizziamo il frammento sopra per applicare queste immagini al nostro riflesso, ecco cosa otteniamo:
Non posso per la vita di me pensare a un uso pratico per questa tecnica, ma se ci metti qualche pensiero creativo in esso le possibilità sono infinite.
Implicazioni del layout
Quando stai usando -webkit-box-riflettere, è importante capire come il riflesso interagirà con il tuo layout. È interessante notare che non è così!
Il riflesso è più di un'immagine di sfondo di un elemento che influenza il flusso del documento. Per vedere come funziona, ecco due esempi, il primo con un riflesso e il secondo senza.
Come un effetto collaterale strano e inaspettato, notate che, anche se il riflesso a sinistra non modifica il layout della pagina, è in qualche modo un po 'il colore del testo.
Combinazione con altri effetti CSS
Un'ultima nota sui riflessi: puoi combinarli con altri effetti CSS puri con ottimi risultati. Ad esempio, ecco un esempio di un'immagine con angoli arrotondati e un'altra con un bordo applicato. Entrambi gli effetti sono perfettamente rappresentati nella riflessione.
Tuttavia, non è il caso tutti Gli effetti CSS sono riprodotti nella riflessione. Ad esempio, ecco cosa succede se lanci un box-ombra. Nota come appare solo sull'immagine originale e non nel riflesso.
Conclusione
Per riassumere, tutto ciò che serve per creare una riflessione di lavoro è a direzione valore. Tuttavia, utilizzando direzione, compensare e a pendenza insieme, è possibile ottenere risultati molto migliori e sfumare efficacemente il gradiente.
L'effetto è notevolmente migliorato se si utilizza rgba per ridurre l'opacità complessiva del riflesso. È quindi possibile applicare bordi, angoli arrotondati e vari altri effetti e questi verranno automaticamente applicati al riflesso.
Infine, se vuoi diventare veramente pazzo, puoi usare un'immagine per mascherare il riflesso. L'immagine è usata solo per applicare la trasparenza, quindi dove c'è un colore pieno, il tuo riflesso sarà opaco e dove c'è trasparenza, il tuo riflesso sarà trasparente.