Aggiungere un bordo intorno alle immagini

9 novembre 2010

Le immagini fotografiche inserite all’interno di un articolo o di una galleria hanno un aspetto più pulito se contengono un bordo intorno ad esse.

Inserire il bordo ad un immagine è un’operazione piuttosto semplice con il CSS:

img { border: 1px solid #000; }

Non tutte le immagini però necessitano di un bordo intorno ad esse per cui è consigliato realizzare una classe apposita da assegnare all’evenienza:

.imageborder { border: 1px solid #000; }
<img src=”images/foto.jpg” alt=”photo” class=”imageborder” />

In questa demo possiamo vedere in azione la differenza tra un’immagine con e senza bordo.

Si potrebbe anche decidere di lasciare un piccolo padding tra il bordo e l’immagine dando un semplice effetto cornice, la classe imageborder diventa:

.imageborder { 
  border: 1px solid #000; 
  padding: 5px;
}

Il risultato che otterremo è visibile nel secondo esempio.

Tutte le lezioni

1 ... 20 21 22 ... 49

Se vuoi aggiornamenti su Aggiungere un bordo intorno alle immagini inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Aggiungere un bordo intorno alle immagini

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento dei dati per attività di marketing