Box con angoli arrotondati estensibili senza immagini!

Solo CSS, no js o immagini!

Torna al tutorial
vedi anche:
Ebbene sì: un'altra proposta per creare in modo veloce e "pulito" box estensibili dagli angoli arrotondati, questa volta senza aggiunta di immagini!

Tra le varie risorse che si trovano per il web sul modo di creare box con angoli arrotondati in maniera veloce e pratica, ne aggiungo una mia: box con angoli curvi altamente configurabili usando le versatili "definition list" al posto dei div.
I punti di forza di questa mia versione sono:

  • Non necessita di nessun elemento aggiuntivo al codice. Quindi presenta un HTML stringato e semantico, che si occupa solo del contenuto, non della presentazione.
  • Non necessita di immagini per creare gli angoli.
  • Non necessita di inserimento di js. Questa soluzione è in puro CSS.
  • Altamente configurabile. Applicando poi una classe a ogni box, ci si può sbizzarrire a cambiarne gli stili secondo i propri gusti.
  • Permettono l'effetto 3d. Vedi l'ultimo esempio.
  • Cross browser. Funziona su tutti i browser in circolazione: Google Chrome, Opera, Firefox, IE7, Safari e, udite udite, perfino su IE6.
  • XHTML Strict validato. Provare per credere.
Ovviamente è possibile farli con solo la cornice

In questo caso bisogna impostare un colore di sfondo per ogni elemento, aggiungere un bordo all'elemento "dl" e portare il valore del margine laterale per l'elemento "dt" e per "dt b" a da 1px a 2px.

Box flottante 1
Box flottante 2
Box flottante 3
Box flottante 4
Si possono anche creare effetti 3d

Basta lavorare sul colore dei bordi dei vari elementi.