Il grande net.tutsplus mi ha insegnato l’ennesima ‘chicca’ di cui non ero a conoscenza. E io la condivido con voi.

Molte volte cerchiamo software, servizi o programmi di grafica potenti per realizzare l’effetto immagine-riflessa che, invece, potremmo realizzare facilmente con poche righe di CSS.

Va premesso che si tratta di un ‘trucco’ supportato solo dai browser webkit-based che, al momento, sono circa il 20% di tutti i browser utilizzati. Prima di mostrarvi come realizzare quanto detto, vorrei dire due parole sul Webkit perché molti potrebbero non sapere di cosa si tratta.

Si tratta di un framework per applicazioni disponibile come aggiornamento per Mac OS X. In sostanza, WebKit è il motore di Safari e di altre applicazioni o browser come Chrome, ad esempio. Le sue potenzialità consistono nel permette a sviluppatori terzi di includere con facilità nelle loro applicazioni molte delle funzioni proprie di Safari. Nato come progetto open source, unisce i vantaggi della combinazione di componenti del sistema grafico KDE e di tecnologie targate Apple.

Detto questo eccovi il video che vi mostra come realizzare l’immagine che introduce questo post :

La chiave sta tutta nella proprietà -webkit-box-reflect. Eccovi la porzione interessante di codice :

img {
-webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(white));
-webkit-border-radius: 3px;
border-radius: 3px;
border: 3px solid #666;
}

Domande o dubbi?