Box con angoli arrotondati estensibili.

Torna al tutorial
vedi anche:
Ebbene sì: un'altra proposta per creare in modo veloce e "pulito" box estensibili dagli angoli arrotondati

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.
  • Qualsiasi sia lo stile dei box le 4 immagini usate per gli angole sono sempre le stesse. Una volta scaricate le quattro minuscole gif usate per gli angoli e inserite nel CSS, potete creare box con angoli curvi di qualsiasi dimensione e colore.
  • Altamente configurabile. 4 selettori nel CSS si occupano di arrotondare i 4 angoli di tutte le "definition list" (leggi: i box) presenti sulla pagina. Applicando poi una classe a ogni box, ci si può sbizzarrire a cambiarne gli stili secondo i propri gusti.
  • 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.
Se preferite si può fare un box uniforme senza "header"

Se preferite si può fare un box uniforme senza "header".
Basta inserire, nei CSS che gestiscono la parte alta del box (l'header, ossia il tag <dt>) un'indentazione del testo negativa dal valore altissimo (tipo -6000px).

Box flottante 1
Box flottante 2
Box flottante 3
Box flottante 4