Corsi on-line

Clonazione di immagini con CSS

La tecnica descritta in questo articolo permetterà di ottenere due differenti risultati: il primo, come indicato dal titolo del post, sarà quello di clonare un’immagine senza l’ausilio di alcun programma per il fotoritocco, il secondo consisterà nella sovrapposizione parziale dell’immagine clonata a quella originale; per ottenere i risultati desiderati si farà ricorso unicamente a delle regole di stile CSS, opzione particolarmente comoda perché permetterà di lavorare con un unico file.

Sostanzialmente lo scopo della semplice procedura esposta sarà quello di utilizzare un’immagine sorgente come la seguente:

Capannone-0011

per ottenere in output un elaborato grafico compatibile con la maggior parte dei browser per la navigazione Web come quello proposto di seguito:

Screenshot_2015-05-07-12-00-39

Ora, si ipotizzi che l’immagine finale da visualizzare sia contenuta nella nostra pagina Internet all’interno di una divbox; quest’ultima potrà essere associata ad un identificatore denominato, per esempio, framebox. Tale selettore potrà essere stilizzato arbitrariamente, definendone per esempio il colore di sfondo (che nel codice riportato è un grigio chiaro):

#framebox {
background: rgba(240,240,240);
}

Fatto questo si potrà intervenire direttamente sul tag <code>img</code>, che nella divbox sarà associato all’immagine originale; quest’ultima potrà essere stilizzata tramite l’applicazione di alcuni filtri (nel nostro caso sfumatura e saturazione) e determinandone il livello di opacità:

#framebox img {
-webkit-filter: blur(3px) saturate(190%);
opacity: .2;
}

Passando ora al clone, per ottenere l’effetto di sovrapposizione desiderato dovremo prima determinarne le dimensioni, che dovranno essere inferiori rispetto a quelle dell’originale per poi definirne la posizione all’interno della divbox

#framebox img.clone {
width: 200px;
height: 200px;
position: absolute;
top: 4px;
left: -100px;
-webkit-box-reflect: none;
-webkit-filter: saturate(90%);
opacity: 2;
}

Si noti come la proprietà left di CSS ci permetta di rendere visibile soltanto una porzione dell’immagine clone in modo da non determinare una sovrapposizione completa; in caso di posizionamento assoluto (position: absolute), left ha il compito di impostare il limite sinistro di un elemento all’interno del contenitore di riferimento (la nostra divbox).

Post correlati
I più letti del mese
Tematiche