{"id":486,"date":"2009-05-08T20:36:38","date_gmt":"2009-05-08T18:36:38","guid":{"rendered":"http:\/\/www.flapane.com\/blog\/?p=486"},"modified":"2017-01-09T20:05:36","modified_gmt":"2017-01-09T19:05:36","slug":"angoli-arrotondati-sul-proprio-sito-con-css-in-5-minuti","status":"publish","type":"post","link":"https:\/\/www.flapane.com\/blog\/2009\/05\/angoli-arrotondati-sul-proprio-sito-con-css-in-5-minuti\/","title":{"rendered":"Angoli arrotondati sul proprio sito con CSS in 5 minuti"},"content":{"rendered":"

$\"CSS$ <\/p>\n

Nelle pagine web moderne, sopratutto se strutturate in maniera corretta utilizzando i fogli di stile CSS<\/em><\/strong>, si vedono sempre pi\u00f9 layout con i cos\u00ecdetti rounded corners<\/em><\/strong>, ovvero i box in cui appare il testo o i men\u00f9 del sito, hanno gli angoli arrotondati.<\/p>\n

Indubbiamente l’effetto \u00e8 molto pi\u00f9 gradevole rispetto al vecchio box rettangolare, non trovate? \ud83d\ude42<\/p>\n

Esistono vari metodi per generare queste finestre arrotondate, andiamone ad esaminare 3: un generatore automatico di codice, un tutorial che utilizza css\/xhtml, e uno che utilizza il nuovissimo CSS3, che \u00e8 il pi\u00f9 innovativo perch\u00e8 non utilizza le immagini agli angoli, ma il rendering avviene tramite CSS (n.b Il css3 \u00e8 supportato solo dai browser pi\u00f9 recenti!).<\/p>\n

Il generatore automatico, da cui \u00e8 tratta l’immagine mostrata qui sopra, \u00e8 raggiungibile a questo indirizzo<\/a>.<\/p>\n

E’probabilmente il metodo pi\u00f9 adatto per i principianti, in quanto bastera selezionare il colore di sfondo e il colore del box, premere ENVIAR e verr\u00e0 generata l’anteprima e il codice da incollare. Non bisogna dimenticare di copiare anche le 4 CORNER IMAGES, e copiarle sul proprio server.
\nOvviamente, per renderlo pi\u00f9 grande per accogliere una intera pagina web, bisogna agire sul css, modificando i parametri WIDTH e HEIGHT, magari impostandoli in pixel e non in percentuale.<\/p>\n

Il secondo metodo utilizza CSS ed XHTML, ed \u00e8 localizzato a questo indirizzo<\/a>.<\/p>\n

Anche in questo caso baster\u00e0 copiare il codice xhtml nella pagina, e il css nel foglio di stile, e di caricare sul proprio server l’UNICA immagine rappresentata da quel cerchietto grigio.
\nIl codice, infatti, spezza la circonferenza in 4 spicchi e crea i 4 angoli.<\/p>\n

L’ultimo metodo \u00e8 il pi\u00f9 avanzato, perch\u00e8 sfrutta le potenzialit\u00e0 del nuovo CSS3, messe a disposizione dai browser pi\u00f9 recenti come Firefox, Safari, ed Internet Explorer 8 (finalmente). E’possibile consultarlo a questo indirizzo<\/a>.<\/p>\n

Al solito, \u00e8 sufficiente copiare il codice html e css nei rispettivi posti, per sfruttare la propriet\u00e0 BORDER RADIUS del css, che generer\u00e0 degli angoli in tempo reale, senza sfruttare delle immagini esterne. Ovviamente IE7 ed altri browsers pi\u00f9 vecchi non supportano il css3, ma nell’articolo \u00e8 spiegato come usare una versione con le immagini esterne IN CASO venga rilevato un browser vecchio, in modo da non avere problemi di compatibilit\u00e0.<\/p>\n

Non preferisco altri metodi che creano gli angoli arrotondati come quelli in Java, avendo una naturale avversione per quest’ultimo \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"