Creare un bordo doppio su un’immagine usando i CSS

4 Lug

Out Of Date Warning

Questo post è stato pubblicato più di 2 anni fa (il 4 luglio 2011). Le idee vanno avanti velocemente, le prospettive cambiano quindi i contenuti potrebbero non essere aggiornati. Ti prego di tenere in considerazione questo, e di verificare le informazioni tecniche presenti nell'articolo prima di farne affidamento per i tuoi scopi.

Semplicissima tecnica per applicare un effetto di bordo doppio (inteso come bordo di colori diversi) su un’immagine.
Per ottenere questo risultato utilizzeremo i CSS ed un po’ di fantasia 🙂

La tecnica

Il trucco e veramente banale ma molto efficace, e consiste nell’utilizzare tre proprietà: border, padding, ed background-color sulla nostra immagine. Il primo bordo è generato in maniera classica attraverso border mentre l’effetto di secondo bordo viene dato dalla combinazione delle prioprietà padding, e background-color. In pratica aumentando il padding aumenterò lo spessore del bordo.

Di seguito potete vedere un esempio della tecnica:

Immagine con doppio bordo

Lascia un commento