Angoli arrotondati con CurvyCorners

Corso jQuery
Creare applicazioni client-side col Framework jQuery

Scritto da Luca Ruggiero nella sezione Javascript

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!

I più cliccati della sezione Javascript

:: jQuery Validation: validazione di un form con jQuery (103.048)

:: Breve guida a jQuery (92.524)

:: Le espressioni regolari in Javascript (83.811)

:: Gestione delle stringhe in Javascript (71.820)

:: Stampare una pagina col Dhtml (42.036)

:: Inserire in automatico lo slash nel formato data gg/mm/aaaa (36.671)

:: Menu orizzontale dinamico in Dhtml (36.270)

:: Gli Array in Javascript (35.117)

:: Temporizzazioni Javascript (30.398)

:: Istruzion condizionali in Javascript: if e switch (27.773)

IN EVIDENZA
DOWNLOAD