CSS  »  Articoli  »  Effetti con CSS 

Gli angoli arrotondati su box e div sono da sempre uno degli argomenti più seguiti, e già altre volte ne abbiamo parlato su HTML.it. Presenteremo qui una tecnica semplice, leggera e robusta per avere un numero arbitrario di box affiancati della stessa altezza con angoli arrotondati, usando un'unica immagine e poche regole CSS. Ecco una piccola anteprima dell'esempio che passo passo andremo a realizzare.

Esempio di base

Vediamo subito l'esempio di base che è il punto di partenza della tecnica. Ecco il codice HTML:

Due parole di commento sul markup. Nell'esempio abbiamo un elemento con angoli arrotondati che ha larghezza fissa ma si adatta, in altezza, al contenuto: vi basta ridimensionare il testo del browser per notarlo. In questi casi sono necessari due agganci grafici, uno per la parte superiore e uno per quella inferiore: da qui l'uso di due div annidati. Prima di procedere con il CSS, diamo uno sguardo all'unica immagine utilizzata, larga 180 pixel e alta 500. Ed è circa 500 px l'altezza massima degli elementi che questa immagine può supportare.

Ora il CSS, che è molto semplice. Al div esterno viene attribuita la larghezza, la parte inferiore dell'immagine e un padding inferiore così da lasciarle spazio:

Al div interno viene assegnata la parte superiore dell'immagine, un padding laterale e superiore:

L'esempio è così ultimato. A questo punto possiamo procedere a estendere l'idea realizzando elementi affiancati.

Altri articoli

Altre guide

Altre newsletter