Spesso vi sarà capitato, navigando, di imbattervi in siti in cui alcune sezioni avessero gli angoli arrotondati. Se l’avessimo visto almeno una decina di anni fa non avremmo avuto dubbi sulla loro implementazione. Si sarebbe infatti trattato di tabelle annidate con immagini al proprio interno: un approccio assolutamente da non perseguire in un web che sempre di più si batte per un codice semanticamente corretto e che non appesantisca le pagine. Vediamo quindi come fare ad ottenere, utilizzando immagini, box con angoli smussati utilizzando semplicemente i CSS. Il primo approccio che andremo a verificare è quello di un box a larghezza fissa. Per prima cosa quindi, col nostro programma di grafica, dobbiamo creare due immagini che andremo a posizionare in alto e in basso. Poi dovremo creare due DIV annidati ai quali poi attribuiremo delle semplicissime regole per ottenere un effetto di sicuro impatto, leggero e semplice da implementare. Come detto in precedenza, questo è un ottimo approccio per box di larghezza fissa. Qui potrete trovare una pagina esplicativa dalla quale copiare e analizzare il codice di questo esempio appena descritto.

Se invece abbiamo l’esigenza di creare un box, cosiddetto “liquido” e cioè non a larghezza fissa, ma che si può ridimensionare, abbiamo la necessità, non più di creare immagini a larghezza fissa, ma bensì dovremo creare i quattro angoli col nostro programma di grafica preferito così poi da implementarli nel nostro codice, come immagini di sfondo per quattro DIV che andremo ad annidare. Qui potrete trovare una pagina esplicativa dalla quale copiare e analizzare il codice di questo esempio. Noterete che la larghezza del box non è espressa con un numero preciso di pixel, ma è in percentuale, proprio per far notare come questo approccio sia indipendente dalle dimensioni del box. Non per ultimo, c’è un ulteriore metodo per implementare angoli arrotondati con i CSS, detto “modular corners”. Si tratta in questo caso di ottenere un box a larghezza fissa, ma che si adatta in altezza al contenuto al suo interno. Questo effetto lo otteniamo con una semplice immagine che andremo ad associare agli unici due DIV annidati che avremo. L’immagine che andremo a editare col nostro programma di grafica preferito, avrà pertanto, una larghezza fissa e una altezza massima decisa da noi, che però non sarà quella visibile in un primo momento, ma sarà quella massima fin alla quale avremo la possibilità che il nostro box si potrà adattare. Vediamo qui un esempio esplicativo con tanto di codice.

Penso che sia tutto…qualcuno ha cercato di creare anche angolo non utilizzando immagini, ma il risultato, pur essendo pulito e senza appunto immagini, non è dei migliori soprattutto se il box viene allargato. Così invece otteniamo ciò che vogliamo, con codice standard, accessbile, non tanto semanticamente corretto, questo è da dirlo, ma pur di non utilizzare javascript, quindi un approccio poco accessibile, meglio scendere a compromessi con la semantica e quindi ottenere un bel risultato visivo e usabile al tempo stesso. Buon markup a tutti con gli angoli arrotondati coi CSS!