Angoli arrotondati con CSS senza immagini

Preparate il vostro “foglio” html pulito e immettete questo codice nello spazio dedicato al CSS:

b.rtop, b.rbottom{display: block; background: #FFF}
b.rtop b, b.rbottom b{display: block; height: 1px;
overflow: hidden; background: #76C2FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px; height: 2px}

Questo invece è il codice HTML. Come potrete notare vengono creati una serie di elementi che andranno a comporre il bordo arrotondato.

<div>
  <b class="rtop">
     <b class="r1"></b>
     <b class="r2"></b>
     <b class="r3"></b>
     <b class="r4"></b>
  </b>
  <!-- qui il contenuto effettivo -->
  <b class="rbottom">
     <b class="r4"></b>
     <b class="r3"></b>
     <b class="r2"></b>
     <b class="r1"></b>
   </b>
<div>

Questo sistema non esclude la possibilità di creare un bordo dal colore alternativo di un pixel di contorno al box arrotondato.
Se vogliamo trovare il pelo nell’uovo questo sistema non permette di ottenere un valido antialias sulle smussature degli angoli, ed il sistema è un po macchinoso se ripetuto spesso.

Nifty Corners: Angoli arrotondati senza immagini CSS + JS

Per ovviare al problema dell’antialias Alessandro Fulciniti ha creato tramite un piccolo Javascript un sistema che semplifica molto l’operazione. In questa pagina potrete trovare diversi esempi di utilizzo e le specifiche.

Alternative per creare angoli arrotondati ai box

Come già 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.

Link esempi e guide

• Box liquido con angoli arrotondati
• Box liquido con angoli arrotondati (2)
• ThrashBox
• Even More Rounded Corners With CSS
• DomCorners
• Rounded corners in CSS
• Transparent custom corners and borders, version 2
• CSS Teaser Box
• News List
• CSS Liquid Round Corners
• Simple Box by tedd
• CSS and round corners: Making accessible menu tabs
• CSS and round corners: Borders with curves
• Mountaintop Corners
• Rounded corners javascript
• Resizable box with freely stylable corners and surface
• Smart Round Corners
• Lean and Clean CSS boxes
• Rounded borders without images
• Rounded corners in CSS
• Curvy corners

Link a generatori di angoli smussati

• roundedcornr
• spiffycorners
• spanky corner
• spiffybox

La soluzione offerta da Google

Google font directory, offre tramite Google Font API, una libreria di font interessanti utili ad essere inclusi nel proprio sito web.

I vantaggi per chi utilizza Google font directory

• Il grande vantaggio è che è visibile perfettamente su tutti i browser e sistemi operativi (anche sul maledetto IE6).
• Da non sottovalutare il fatto che essendo il font depositato direttamente sui server di Google, può facilmente accadere che nel momento che un visitatore richiederà di vedere una vostra pagina, abbia già in cache (del browser) il font e quindi non è richiesto un ulteriore download.
• Da non sottovalutare che essendo font sotto licenza open source l’utilizzo è gratuito.
• Non è necessario l’uso del font-face.

Tutorial: tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/

Vi può essere utile questa soluzione?

Guardate esempio del l’hack CSS.

Il codice Hack css per tutti i browser

/*//// GIANTISLAND LLC CSS HACK*/

#test1 {
font-weight:bold;
font-size:14px;
color:orange;
voice-family:"\"}\"";
voice-family:inherit;
color:grey;\
color:black;
[color:black;
color:yellow;]
}
/*end*/
/*\*/
html*#test1 {
[color:red;
color:blue;
]color:purple;
}/*end*/
.dummyend[id]{clear:both;}

/*\*/
* html #test1 {
color:green;
}
/*end*/

[#test1 {
[color:red;
color:blue;
]color:purple;

Legenda Hack CSS

Se vedi nero, usi un browser basato su Mozila (Firefox).
Se vedi rosso, usi una vecchia versione Mozilla (< version 1.01) (Firefox).
Se vedi giallo, usi Google Chrome (2.01+), Opera, o Safari (4.0+).
Se vedi blu, usi Google Chrome (1.0 – 2.01), o Safari (1 – 3).
Se vedi grigio, usi Internet Explorer 8.
Se vedi lilla, usi Internet Explorer 7.
Se vedi verde, usi Internet Explorer 6.
Se vedi arancione, usi Internet Explorer 5.

Demo hack CSS

Verificate voi stessi con i browser che avete installato sul vostro sistema: esempio del l’hack CSS.