Angoli arrotondati con CurvyCorners

Corso Javascript Impara a creare controlli ed animazioni

CurvyCorners è una splendida libreria Javascript che consente con estrema semplicità di creare angoli arrotondati da applicare ai box delle proprie pagine Web, come mostrato nel seguente screenshot:

Per prima cosa, scaricare la libreria all'indirizzo:

http://www.curvycorners.net/downloads/

quindi includere nelle proprie pagine Web il file curvycorners.js come mostrato nel seguente codice:

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

A questo punto, costruiamo il box, assegnandogli un ID:

<div id="testo">Esempio di CurvyCorners by Luca Ruggiero</div>

e stilizziamolo via CSS:

<style type="text/css">
#testo
{
    background: #CCDDEE;
    color: #336699;
    font: normal 12px verdana;
    width: 500px;
    padding: 20px 20px 20px 20px;
    border: solid 3px #336699;
}
</style>

Non resta che creare un piccolo semplice script:

<script type="text/javascript">
window.onload = function() {
    var impostazioni = {
        tl: { radius: 20 },
        tr: { radius: 50 },
        bl: { radius: 50 },
        br: { radius: 20 },
        antiAlias: true
    }
    curvyCorners(impostazioni, document.getElementById("testo"));
}
</script>

Quel che ci interessa è valorizzare il parametro della funzione curvyCorners() con l'ID del nostro box, quindi agire sui seguenti parametri esprimendo il valore numerico:

• tl (top left) angolo superiore sinistro.
• tr (top right) angolo superiore destro.
• bl (bottom left) angolo inferiore sinistro.
• br (bottom right) angolo inferiore destro.

Ed il gioco è fatto!

TAGS - angoli arrotondati, curvycorners