Lauryn Web Design - Milano, Edimburgo e online

Bordi perfetti sulle immagini

Cesare Lamanna di Edit oggi ci aiuta a formattare i bordi delle immagini, con pochi comandi semplici.

Livello del tutorial: base (non si accettano lamentele da chi è già avanti 😉 )

[…]sul web un bel bordo intorno alle immagini è un gran guadagno in termini estetici e di resa visiva. E metterlo con i CSS è un’operazione più che semplice. Volendo ottenere un effetto ‘doppio bordo’ (esterno e interno) basta sfruttare il padding:

img {    
   padding:3px;    
   border:1px solid #000;    
}  

In questo modo la parte interna delle cornice assumerà come colore quello di sfondo definito per l’elemento in cui è contenuta l’immagine. Volendo assegnare un colore diverso basterà impostare un colore di sfondo per l’immagine:

img {  
   background-color#ff0;  
   padding:3px;    
   border:1px solid #000;    
}  

In fondo al tutorial il link ad una pagina di CSS3.info che documenta l’implementazione su Safari 3 della proprietà border-image, tramite la quale sarà possibile impostare come bordi di un elemento anche elementi grafici.

Se ti è piaciuto condividilo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *