Come Stilizzare un'Immagine con CSS
Usa i CSS per presentare le immagini del tuo sito nel miglior modo possibile. In questo articolo imparerai dove posizionare un'immagine e se includere decorazioni come bordi.
Float e Centratura
Passo 1: Inserire l'Immagine
Inserisci la tua immagine nella pagina col metodo abituale. Non dimenticare di includere un testo alt appropriato.
Passo 2: Float a Sinistra (Testo a Destra)
Per far avvolgere il testo intorno all'immagine a destra, simile alla foto di apertura di questo articolo, usa una regola CSS come:
img { float: left; padding-right: 1em; }
float:left sposta l'immagine al margine sinistro. padding-right impedisce al testo di toccare il lato destro dell'immagine. Se aggiungi un bordo, il padding sta tra immagine e bordo.
Passo 3: Float a Destra (Testo a Sinistra)
Per far avvolgere il testo a sinistra, metti l'immagine a destra:
img { float: right; padding-left: 1em; }
Passo 4: Centrare l'Immagine - Display Block
Per centrare un'immagine devi prima rendere l'elemento inline normalmente in un elemento a livello di blocco:
img { display: block; }
Passo 5: Centrare con Margin Auto
Poi aggiungi margini sinistro e destro per centrarla. Il valore corretto per centrare è auto:
img { display: block; margin-right: auto; margin-left: auto; }
Bordi e Margini
Passo 1: Bordo Spesso Stile Groove
I bordi possono creare un effetto ombra o l'aspetto di una cornice. Per un bordo spesso stile groove:
img { float: left; border-width: 1em; border-style: groove; border-color: #000000; }
Altri stili: solid, dotted, dashed, double, ridge, inset, outset. Larghezza in pixel, em o percentuali.
Passo 2: Bordi Selettivi
I bordi possono essere applicati selettivamente a top, right, bottom, left. Puoi usare questo per creare un effetto ombra.
Passo 3: Effetto Ombra con Due Toni di Grigio
Usando un bordo solid in due tonalità di grigio solo a destra e in basso:
img { float: left; border-right-style: solid; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-color: #999999; }
Passo 4: Margine Esterno al Bordo
Il margine è fuori dal bordo. Aggiungere margine a destra e in basso impedisce al testo di toccare l'immagine:
img { float: left; border-right-style: solid; border-right-width: 8px; border-right-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 8px; border-bottom-color: #999999; margin-right: 1em; margin-bottom: 1em; }
Suggerimento
Se hai immagini in più divisioni (div) di una pagina, usa i selettori discendenti per stilizzarle individualmente. Selettori possibili: #content img, #sidebar img, #feature img.