Fare internet

E' come il lego, più pezzi ho più sono allegro
Seguci su Facebook Seguici su Twitter Iscrivita ai nostri Feed      Mandaci una mail

CSS: ottenere un doppio bordo sulle immagini.

Scritto da Fare-internet il 29 settembre 2010 condividi condividi

Ottenere un doppio sfondo su un’immagine è molto semplice, basta sfruttare contemporaneamente bordo, background e padding.

Assengando colore, dimensione e tipo al bordo dell’immagine (o di qualsiasi altro elemento) otteniamo il bordo vero e proprio:

border:#9C6 8px solid;

E quindi un bordo l’abbiamo realizzato, per realizzare il secondo (il più interno) dobbiamo contemporaneamente assegnare un padding e uno sfondo:

background:#960;
padding:15px;


Ovviamente questa tecnica funziona con le immagini in quanto “coprono” lo sfondo, se le applicassimo ad un testo vedremmo lo sfondo, e per ottenere un doppio bordo dovremmo mettere dentro un altro box.
Invece di utilizzare un colore per lo sfondo potremmo utilizzare un’altra immagine, ottenendo un effetto ancora diverso.

Per il codice completo e un esempio del risultato ottenuto: http://demo.studio-88.it/imgBackgruond/

Twitter