JavaScript  »  Articoli  »  Effetti e controlli Javascript 

A distanza di alcuni mesi dagli articoli sui http://css.html.it/articoli/leggi/1611/nifty-corners-cube-angoli-arrotondati-mai-cosi-fac/>Nifty Corners, torniamo a parlare di angoli arrotondati con Javascript. La tecnica che presenterò è basata esclusivamente su immagini e Javascript, e non richiede markup nè CSS aggiuntivo.

L'idea degli angoli arrotondati con Javascript non è totalmente nuova: a parte i Nifty Corners, ci sono almeno altre due letture in merito: Rounded Corners with CSS and Javascript di Simon Willison e Transparent custom corners and borders di Roger Johansson.

Il mio approccio è un po' differente: le priorità erano realizzare una tecnica veloce, leggera e soprattutto facilmente parametrizzabile. Prima di presentare Javascript ed esempi (qui per i curiosi una piccola anteprima) vediamo l'idea di base.

DomCorners: la versione HTML e CSS

La versione con HTML e CSS costituisce il punto di partenza della tecnica. Ecco l'unica immagine che serve per gli angoli arrotondati dell'esempio:

È un'immagine di 10px di larghezza e 40 di altezza. Ogni quadratino 10x10 dell'immagine rappresenta uno dei quattro angoli: in cima c'è l'angolo in alto a sinistra, e procedendo verso il basso seguono in senso orario gli altri tre angoli, ovvero superiore destro, inferiore destro e inferiore sinistro. Nel preparare le immagini è importante mantenere quest' ordine.

Preparato uno dei quattro angoli dei semplici copia, incolla e ruota, magari aiutandovi con una griglia o delle guide, con il vostro programma di grafica preferito basteranno.

Passiamo al codice: la soluzione HTML e CSS è stata ispirata da questa tecnica di Douglas Livingstone. Trovo infatti che questa tecnica sia una tra le più semplici, efficaci e robuste. In questo caso, rispetto alla versione originale, ho pensato di utilizzare una sola immagine. Questo ci consente di risparmiare un po' di peso per le immagini e traffico sul server. Inoltre appena l'immagine è pronta i quattro angoli sono immediatamente visibili.

Vediamo l'HTML dell'esempio:

<div id="box">
<b class="btop"><b></b></b>

qui il contenuto

<b class="bbot"><b></b></b>
</div>

L'uso degli elementi <b> è soprattutto perchè essendo elementi inline possono essere inseriti in qualsiasi altro elemento. Ora vediamo il CSS. I quattro elementi b hanno in comune buona parte delle dichiarazioni, su cui viene effettuato il raggruppamento parziale. A cambiare è solo la porzione visibile dell'immagine: infatti per ciascuno di essi viene specificata la coordinata x (che può essere zero o 100%, così da avere lo sfondo rispettivamente a sinistra o a destra) e traslata verso l'alto usando valori negativi per l'asse x. Da notare che per il <b> che rappresenta l'angolo in alto a sinistra le coordinate non sono specificate, dato che di default corrispondono alla coppia 0 0. Ecco le regole CSS:

b.btop, b.btop b, b.bbot, b.bbot b{
    display: block;height: 10px;font-size: 1px;
    background-image:url(rc.png);
    background-repeat: no-repeat}

b.btop b{background-position: 100% -10px}
b.bbot{background-position: 0 -20px}
b.bbot b{background-position: 100% -30px}

Tutto qui: rivediamo il risultato. La tecnica di per sè è abbastanza semplice, ma come abbiamo visto oltre alle immagini richiede markup e CSS aggiuntivo. Il passo successivo, come per i Nifty Corners, è stato quindi quello di spostare a livello di Javascript l'HTML extra, e in questo caso anche il CSS, per ottenere una tecnica leggera e versatile.

Altri articoli

Altre guide

Altre newsletter