How to antialias with css

How to antialiased corner with css

Oggi vediamo come ottenere un effetto Antialias su una div senza usare JS, CSS3 o immagini che sostituiscano gli angoli della div. Tutto in semplice CSS 2.1.
Si tratta di una semplice tecnica che sfrutta i bordei e i colori delle div, senza passare per editor grafici, codice javascript o CSS3 (purtroppo CSS3 non è ancora uno standard pienamente supportato dai browser più diffusi, quando lo sarà semplificherà la vita ad webdesigner!).
Ma vediamo subito in cosa consiste precisamente questa tecnica.
Anti-aliased corners without images, javascript or CSS3.
Anti-aliased corners without images, javascript or CSS3.

CSS

.def{display:block}
.def *{
display:block;
height:1px;
overflow:hidden;
background:#FFFFFF}
.def1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid #6d6d6d;
border-right:1px solid #6d6d6d;
background:#bfbfbf}
.def2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid #191919;
border-right:1px solid #191919;
background:#cecece}
.def3{
margin-left:1px;
margin-right:1px;
border-left:1px solid #cecece;
border-right:1px solid #cecece;}
.def4{
border-left:1px solid #6d6d6d;
border-right:1px solid #6d6d6d}
.def5{
border-left:1px solid #bfbfbf;
border-right:1px solid #bfbfbf}
.deffg{
background:#FFFFFF;
text-align: center;
color: #000000;
}
.main{
width:500px;
height:300px;
margin-top:200px;
margin-left:200px;
}

HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”it” xml:lang=”it”>
<head>
<title>How to Anti-aliased corners without images, javascript or CSS3 – WebAir.ir </title>

<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />

</head>
<body bgcolor=”#000000″>
<div class=”main”>
<b class=”def”>
<b class=”def1″><b></b></b>
<b class=”def2″><b></b></b>
<b class=”def3″></b>
<b class=”def4″></b>
<b class=”def5″></b></b>

<div class=”deffg”>
<!– text –>
antialiased corners without images, javascript or CSS3. WebAir.it
</div>

<b class=”def”>
<b class=”def5″></b>
<b class=”def4″></b>
<b class=”def3″></b>
<b class=”def2″><b></b></b>
<b class=”def1″><b></b></b></b>
</div>

</body>
</html>

Osservando il codice del CSS noterete che partendo dal nero come colore di background andiamo a salire leggermente con la gradazione del colore, andando verso gradazioni di grigio che si avvicinano al nero, questo i permette di ottenere un effetto antialias migliore.

La classe def si occupa di gestire le sottoclassi richiamate dall’HTML (notate il selettore universale * ).

Nell’HTML la div def ingloba 5 “sottoclassi”, def1, def2, def3, def4, def5, le quali differiscono per la larghezza che occupano: a proposito della larghezza: non è specificato l’attributo width, ovvero, niente larghezza predefinita, quello che è importante è che si gioca sui border-left e border-right e su margin-left e margin-right.Le suddette sottoclassi, ereditano dalla classe def l’altezza (heigth) paria 1 px e anche questo ci permette di agire sul risultato finale migliorandolo ulteriormente.

Provate ad aumentare l’height e noterete di come peggiora il risultato.

La classe def precede il paragrafo centrale ed è ripetuta dopo dopo di questo, ma questa volta con le sottoclassi in ordine invertite rispetto alla prima volta in cui sono state usate, ovvero da def5 fino ad arrivare a def1.

Adesso potrete divertirvi a personalizzare le vostre div, magari affinando ulteriormente questa tecnica!