effetto mirror
mirror orizzontale
Ottenuto con trasform:matrix
prova di testo prova di testo (non va su FF)
Ottenuto con trasform:scale
prova di testo prova di testo (non va su FF)
prova per i webkit
mirror verticale
con transform:rotate
Con transform:rotate l'effetto specchio non è perfetto, manca il flip orizzontale:
con transform:scaleY
Allora bisogna ricorrere a transform:scaleY(-1), così:
Prova di flip verticale del testo
Prova di flip verticale del testo
conclusione
Il modo più semplice e più efficace di applicare un effetto specchio è transform:scale: transform:scale per il flip orizzontale, transform:scaleY per il flip verticale.
un esperimento
sul testo
Aggiungiamo al testo rispecchiato verticalmente in basso un effetto gradient senza immagini
Testo da mirrorizzare
Testo da mirrorizzare
su immagini
Il trucco sperimentato sul testo non funziona sulle immagini:
Come si vede manca l'effetto sfumatura. Bisognerebbe sfumare un'immagine con CSS. Qualcosa si può fare:
l'immagine di sfondo è sfumata con css: sembra rispecchiarsi
Da notare che abbiamo dovuto usare non il tag img, ma una immagine di sfondo di un box (background-image).
Come si fa a sfumare un'immagine con css? Ricorrendo a due “trucchi”:
- lo sfondo multiplo (multiple background)
- e combinando un gradient tra bianco e trasparente come immagine di sfondo da affiancare all'immagine da sfumare.
🛒 ricerche / acquisti
cerca libri su Amazon sul tema: effetto mirror effetto specchio mirror specchio riflettere immagini capovolgere immagini e-book e-reader ereader Kindle Kobo computer PC hardware software sistema operativo linux Apple cultura libri on-line effetto mirror .