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>