Gli angoli arrotondati con i CSS sono da sempre uno degli argomenti più seguiti in tema di web design. Segnalo così due articoli piuttosto recenti: il primo è Simple rounded corners with CSS boxes
e il secondo è More rounded corners with CSS. Niente di particolarmente innovativo, ma due articoli ben scritti con tecniche semplici e robuste allo stesso tempo. Ho però una piccola riflessione da fare su More rounded corners with CSS, dato che mi sono soffermato su un passaggio dell'articolo:
A lot of other approaches (do a search for "css rounded corners") use CSS hacks, inline images or
even Javascript to accomplish the desired behaviour. Some have programmatically tried to generate corners via one-pixel div elements using Javascript; while perhaps a minor technical feat, they are ultimately kludgy, slow and perhaps unreliable.
Credo che chi conosca i Nifty Corners abbia intuito il riferimento, neanche troppo velato. Se mi è consentita una piccola parola di difesa: è vero, Javascript non dovrebbe essere usato per la presentazione, ma neanche l'HTML. Ecco il markup necessario per ottenere angoli arrotondati con la tecnica "More rounded corners with CSS":
<div class="dialog">
<div class="hd">
<div class="c"></div>
</div>
<div class="bd">
<div class="c">
<-- main content goes here -->
</div>
</div>
<div class="ft">
<div class="c"></div>
</div>
</div>
Il punto è questo: ottenere un box fluido e scalabile con angoli arrotondati necessita di (almeno) 4 elementi di "aggancio", come per Simple Rounded Corners. Nel caso di More Rounded Corners gli elementi necessari all'effetto sono ben 7, e ho il sospetto che il markup sia un po' sovradimensionato. Come qualcuno ha scritto su del.icio.us a proposito... "Se avessi 1 dollaro per ogni tecnica sugli angoli arrotondati che trovo!"
