back to top

Immagini riflesse con CSS

Il Flipping è una tecnica utilizzata dai grafici per applicare un effetto di riflesso sulle immagini rendendole visualizzabili come attraverso uno specchio realizzando, di fatto, una sorta di effetto riflesso. Effetti simili vengono ottenuti in genere attraverso l’utilizzo di programmi per la grafica, è però possibile applicare l’effetto flip ad un’immagine anche tramite un semplice selettore CSS.

Attraverso CSS, quindi, avremo la possibilità di riflettere un’immagine sia orizzontalmente che verticalmente. In questo articolo vedremo come creare un interessante effetto riflesso su un’immagine mediant la proprietà CSS transform.

Per prima cosa vediamo l’immagine sulla quale andremo ad operare:

Di seguito il codice HTML che andremo ad incorporare all’interno della nostra pagina:

<div class="img-riflessa"> 
  <img src="colosseo.jpg">
  <img src="colosseo.jpg" class="riflesso"> 
</div>

Per finire vediamo il CSS che andremo ad applicare per realizzare l’effetto riflesso sulla nostra immagine:

.img-riflessa img {
  display: block;
}
.img-riflessa img.riflesso
{ 
  transform: scaleY(-1); 
  -webkit-transform: scaleY(-1); 
  -moz-transform: scaleY(-1); 
  -ms-transform: scaleY(-1); 
  -o-transform: scaleY(-1); 
  filter: flipv; 
  opacity: 0.70; 
  filter: alpha(opacity='30'); 
}

Questo l’output che abbiamo ottenuto:

Come potete notare la seconda immagine appare come fosse riflessa nonostante si tratti della stessa identica immagine con la sola differenza che a quest’ultima è stata applicata un’apposita classe CSS.

Prova il codice

Come potete vedere il risultato è quello di un’immagine che sembra riflessa in una sorta di specchio d’acqua.

Il vantaggio di utilizzare CSS al posto di un programma di grafica sta nel fatto che il primo è in grado di applicare l’effetto di riflesso direttamente sul file sorgente, senza la necessità di crearne una copia modificata.

Altri contenuti interessanti

Pubblicità
Claudio Garau
Claudio Garau
Web developer, programmatore, Database Administrator, Linux Admin, docente e copywriter specializzato in contenuti sulle tecnologie orientate a Web, mobile, Cybersecurity e Digital Marketing per sviluppatori, PA e imprese.

Leggi anche...

Stilizzare HR (linee orizzontali) in puro CSS

Il tag <hr> (Horizontal Rule) è un elemento HTML...

Applicare un bordo alle lettere di un testo con CSS

Con l'avvento di CCS3 il linguaggo di stilizzazione delle...

CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l'avvento e la diffusione di CSS 3 e...

Rimuovere CSS inutilizzato

Soprattutto quando si gestiscono progetti Web based di grandi...

CSS: centrare orizzontalmente un elenco puntato

Il sistema migliore per scrivere un buon menu è...

Gestire i bordi delle tabelle con i CSS

In questo post vorrei ritornare su un concetto basilare...
Pubblicità