Box con angoli arrotondati estensibili.
Torna al tutorialvedi 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