{"id":1164,"date":"2010-06-13T19:30:55","date_gmt":"2010-06-13T18:30:55","guid":{"rendered":"http:\/\/www.desmm.com\/?p=1164"},"modified":"2013-12-16T16:38:56","modified_gmt":"2013-12-16T16:38:56","slug":"angoli-arrotondati-con-css","status":"publish","type":"post","link":"https:\/\/www.desmm.com\/blog\/angoli-arrotondati-con-css-1164.html","title":{"rendered":"Angoli arrotondati con CSS"},"content":{"rendered":"

Esistono diversi modi per ottenere una box html con angoli stondati (rounded corner) in CSS . Dall’utilizzo di immagini, che raffigurano gli angoli stondati, che poi vengono posizionate agli angoli dell’elemento desiderato, fino all’utilizzo del -moz-border-radius<\/a>, purtroppo quest’ultimo visibile solo su browser Mozilla (Firefox).\"\"
\nSecondo me, il pi\u00f9 interessante sistema per realizzare angoli tondi<\/strong> \u00e8 quello messo in pratica da Alessandro Fulciniti<\/a>. Grazie ad una serie di elementi viene ricostruita la smussatura degli angoli mantenendo validit\u00e0 XHTML e CSS e cross-browsing.<\/p>\n

Angoli arrotondati con CSS senza immagini<\/h2>\n

Preparate il vostro “foglio” html pulito e immettete questo codice nello spazio dedicato al CSS:<\/p>\n

b.rtop, b.rbottom{display: block; background: #FFF}\nb.rtop b, b.rbottom b{display: block; height: 1px;\noverflow: hidden; background: #76C2FA}\nb.r1{margin: 0 5px}\nb.r2{margin: 0 3px}\nb.r3{margin: 0 2px}\nb.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}<\/pre>\n
Questo invece \u00e8 il codice HTML. Come potrete notare vengono creati una serie di elementi che andranno a comporre il bordo arrotondato.<\/p>\n
<div>\n  <b\u00a0class=\"rtop\">\n     <b\u00a0class=\"r1\"><\/b>\n     <b\u00a0class=\"r2\"><\/b>\n     <b\u00a0class=\"r3\"><\/b>\n     <b\u00a0class=\"r4\"><\/b>\n  <\/b>\n  <!--\u00a0qui\u00a0il\u00a0contenuto\u00a0effettivo\u00a0--><\/em>\n  <b\u00a0class=\"rbottom\">\n     <b\u00a0class=\"r4\"><\/b>\n     <b\u00a0class=\"r3\"><\/b>\n     <b\u00a0class=\"r2\"><\/b>\n     <b\u00a0class=\"r1\"><\/b>\n   <\/b>\n<div><\/pre>\n
Questo sistema non esclude la possibilit\u00e0 di creare un bordo dal colore alternativo di un pixel di contorno al box arrotondato.
\nSe vogliamo trovare il pelo nell’uovo questo sistema non permette di ottenere un valido antialias sulle smussature degli angoli, ed il sistema \u00e8 un po macchinoso se ripetuto spesso.<\/p>\n
Nifty Corners: Angoli arrotondati senza immagini CSS + JS<\/h2>\n
Per ovviare al problema dell’antialias Alessandro Fulciniti<\/em> ha creato tramite un piccolo Javascript un sistema che semplifica molto l’operazione. In questa pagina<\/a> potrete trovare diversi esempi di utilizzo e le specifiche.<\/p>\n
Alternative per creare angoli arrotondati ai box<\/h2>\n
Come gi\u00e0 ho scritto in apertura dell’articolo, esistono molti modi per creare gli angoli arrotondati ad un DIV. Qui sotto vi elenco una serie di link che potrebbe tornarvi utile nel caso stiate cercando alternative.<\/p>\n
Link esempi e guide<\/h3>\n