Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→CurvyCorners: angoli arrotondati per i nostri box in 2 minuti!
  • 07
    MAR
    2010

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

Scritto da Massimiliano Bossi | Scripting

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>

  • aqngoli arrotondati
  • curvycorners
  • Javascript
  • radius
  • rounded corners

Naviga tra i post del Blog

← Windows 3.11 rivive on-line
→ Creare PDF con Javascript grazie a jsPDF

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
Post correlati
  • jQuery CurvyCorners 23/07/2010
  • Angoli arrotondati con i CSS 05/03/2010
  • Uno slideshow in 5 minuti con jQuery 18/03/2011
  • Bordi arrotondati con jQuery Corner 02/07/2010
  • Siti web in pochi minuti con Edicy 22/04/2010
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina01/01/1970
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript01/01/1970
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP01/01/1970
  • Parsing di un file JSON con JQueryParsing di un file JSON con JQuery01/01/1970
  • Data di ieri e di domani con PHPData di ieri e di domani con PHP01/01/1970
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2018 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: info legali / privacy / cookie