Box con angoli arrotondati estensibili senza immagini!
Solo CSS, no js o immagini!
Torna al tutorialvedi 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.