CurvyCorners: angoli arrotondati per i nostri box in 2 minuti!

Ho scovato in rete un interessante scriptino in Javascript che consente di creare dei bellissimi box con gli angoli arrotondati in meno di 2 minuti. Lo script in questione si chiama CurvyCorners è può essere scaricato dal sito ufficiale.
Per creare il nostro box è sufficiente scricare lo script ed includerlo nella nostra pagina web:

<script type="text/JavaScript" src="curvycorners.js"></script>

Poi creiamo un semplice DIV con un ID univoco:

<div id="mioBox">bla bla bla<br/>
bla bla bla<br/>
bla bla bla</div>

Ora applichiamo il nostro effetto con un pizzico di javascript:

<script type="text/JavaScript">
window.onload = function() {
var settings = {
tl: { radius: 20 },
tr: { radius: 20 },
bl: { radius: 20 },
br: { radius: 20 },
antiAlias: true
}
var divObj = document.getElementById("mioBox");
curvyCorners(settings, divObj);
}
</script>

Et voilà, il gioco è fatto!

Nell’esempio appena visto abbiamo applicato l’effetto ad uno specifico elemento identificato da un ID; volendo è anche possibile applicare l’effetto ad una classe (come tale replicabile su una pluralità di elementi). In questo caso il metodo curvyCorners potrà essere richiamato in questo modo:

curvyCorners(settings, ".angolicurvi");

A questo punto sarà sufficiente aggiungere la classe a tutti gli elementi sui quali vogliamo applicare l’effetto.

<div class="angolicurvi">
bla bla bla
</div>