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.

lauryn

Web designer dal 2002, mi occupo di content marketing per la società WordSteps SLT LTD di Edimburgo e altri clienti. Vivo a Milano, sposata con una figlia e due cagnoline, e una passione per libri e Scozia.

Lascia un commento

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

Scarica lo starter kit del professionista
Iscrivendoti alla newsletter mensile riceverai la checklist pdf alla tua casella email
Guide to Million Dollar Success
My Website
Per chi inizia a muoversi nel web
Scarica lo starter kit del professionista
Iscrivendoti alla newsletter riceverai la guida in pdf direttamente al tuo indirizzo email.
My Website
Per chi inizia a muoversi nel web
%d blogger hanno fatto clic su Mi Piace per questo: