How to Antialiased Corner in CSS

How to Antialiased Corner in CSS

Posted by WebAir Srl, In Tutorial, Webdesign
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!