verosimile.it

Esperimenti CSS

Creare automaticamente box con angoli arrotondati estensibili, anche senza immagini: tre soluzioni CSS

Premessa: tengo a precisare che questa è una soluzione che ha la sua ragione di vita nell’essere “cross browser”. Se per voi è sufficente offrire un layout con angoli tondi per gli utenti di Firefox e Safari/Chrome, potete utilizzare la proprietà CSS3 “-border-radius”:

-moz-border-radius: 10px (per Firefox)
-webkit-border-radius: 10px (per Safari/Chrome)

A tutt'oggi solo i browser della famiglia Mozilla offrono la possibilità di creare facilmente box con angoli arrotondati via CSS. Chi volesse crearne uno cross-browser è costretto a barcamenarsi tra gif o jpg che rappresentano gli angoli curvi di vari tipi, div vuoti che non hanno nessun significato strutturale, difficoltà nell’usare un layout liquido... Insomma, soluzioni che appesantiscono il markup e costringono a usare spesso editor grafici.
Vediamo allora tre alternative che ho sviluppato per automatizzare la creazione di box con gli angoli smussati, usando, al posto dei classici div, le versatili liste di definizioni.
Si tratta di veri e propri “kit per box stondati”, da scaricare e da usare ogni volta che si presenti l’occasione:

• Soluzione per creare box semplici
• Soluzione per creare fancy box, con background a scelta
• Infine, spingendo al massimo il concetto di automatizzazione e ottimizazione delle risorse, soluzione per creare box con gli angoli arrotondati senza usare immagini.