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>
