I fogli di stile (Cascading Style Sheets) hanno rivoluzionato la gestione dei layout e dello sviluppo web. Ad oggi sono in vigore le specifiche 2.1 ma il W3c ha gia ampiamente trattato i futuri sviluppi che permetterà la terza release dei CSS.

Uno dei maggiori problemi che affligge il web designer è la creazione di angoli arrotondati. Questa tecnica se usata sapientemente dona al nostro sito un aspetto gradevole e moderno.

Vediamo insieme come negli anni si è evoluto il concetto di rounded corners…

Con le immagini…

Fino a non molti anni fa (quando le tabelle erano ancora largamente utilizzate) si otteneva l’effetto di arrotondamento tramite delle piccole immagini sapientemente disposte. La tecnica consisteva nel creare  una tabella di 3 righe e 3 colonne impostando le immagini come sfondo delle celle corrsipondenti agli angoli:

1

Questa tecnica per gli standard attuali è obsoleta a meno che non si abbia la necessità di creare particolari effetti non riproducibili via Javascript.

Nota: è possibile ottenere lo stesso effetto anche con Div e CSS impostando dei box annidati e agendo sulla proprieta background-position.

Con JavaScript (e CSS)…

L’esplosione delle “pagine arrotondate” si ha con l’avvento delle tecniche javascript e con il rilascio di semplici funzioni utilizzabili anche dall’utente medio.

Tutti i più famosi framework javascript come jQuery o MooTools offrono script per queste necessità ma se l’unico uso che fate dei Js è per arrotondare gli angoli vi consiglio di usare script più semplice e leggeri come questo

Con CSS…

Per capire Il concetto di angolo arrotondato tramite CSS può essere utile la seguente immagine:

griglia1

grglia pixel angolo supeiore sinistro

Quella che vedi è la scomposizione in pixel dell’angolo superiore sinistro. Un sapiente utilizzo delle propietà CSS permette di ricreare l’effetto desiderato.

Nel caso illustrato per comporre l’angolo sono presenti 7 righe di altezza un pixel. Utilizzando la proprietà margin per ogni riga inserendo il numero dei qudratini bianchi come margine laterale andiamo a definire gli stili delle righe:

span.riga1{margin: 0 5px}
span.riga2{margin: 0 3px}
span.riga3{margin: 0 2px}
...

nella pagina andremo poi ad inserire il codice:

<span class="riga1"></span>
<span class="riga2"></span>
<span class="riga3"></span>
...

che rappresenta gli angoli sinitro e destro della parte alta del box.

Per realizzare gli angoli in basso la tecnica è la medesima con la dovuta accortezza perchè bisogna invertire le righe. Partiremo quindi dalla riga n fino ad arrivare alla riga 1.

Qui trovate un generatore automatico di codice per questa tecnica

In alternativa esistono anche tecniche che fanno uso di immagini e javascript senza l’utilizzo di CSS. Qui ne trovate un ottimo esempio.

Con CSS3…

Con i recenti browser sono state introdotte nuove proprietà CSS. In Firefox e Safari è in tutti i browser che utilizzano Webkit è possibile impostare gli angoli arrotondati direttamente da CSS utilizzando le seguenti proprietà:

-moz- //Firefox
-webkit- //Safari Webkit

Per arrotondare solamente determinati angoli utlizziamo con Firefox:

-moz-border-radius-topleft
-moz-border-radius-topright
-moz-border-radius-bottomleft
-moz-border-radius-bottomright

e con Safari (basato su Webkit):

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

utilizzando le keywords top, bottom, left e right come nell’esempio.

in questo modo è possibile arrotondare gli angoli senza utilizzare javascript o immagini tuttavia questa tecnica non ha effetti in Internet Explorer.

La proprietà definitiva con l’avvento di CSS3 sarà:

border-radius

Cosa usare?

Personalmente, odiando Internet Ecplorer, per i miei progetti uso i rounded corner basati su CSS3. Come scrivevo qualche tempo fa la tendenza sta cambiando e l’uso di Firefox cresce esponenzialmente.

Discorso diverso quello per in siti che realizzo per clienti. Li purtroppo sembra che Internet Explorer debba vivere per sempre e quindi utilizzo soluzioni basate su javascript le quali sebbene più pesanti di quelle CSS sono decisamente più estensibili.

Le immagini di sfondo le uso ancora ma associate ai div e solo per casi particolari. Il layout di Webquadro ne è un esempio concreto.

Di seguito una lista di risorse sui rounded corners che potrebbero fare al caso tuo:


css-tag-webquadro

Se stai cercando nuove risorse sui fogli di stile visita il canale CSS di webquadro

Ecco una lista di altre risorse che potrebbero interessarti:

  1. Un anno di Webquadro