info@nebulosaweb.com

Effetto 3D agli angoli senza immagini, con CSS

angolo

Negli ultimi tempi, grazie all’evoluzione dei vari browser è possibile ammirare nei template vari effetti che un tempo erano realizzabili solo con l’ausilio di immagini che però finivano per appesantire le pagine.

E’ da un pò che si notano su vari siti (esempio Google+) angoli degli headers (o un qualsiasi elemento adibito a tale scopo) con effetto 3D che dà l’idea della profondità. A primo acchito pensavo si trattasse di immaggini ma analizzando col mio fido FireBug ho notato con piacere che era tutto realizzato con il CSS.

Di seguito spiegherò come realizzare tale effetto su un h2.

<div id="content">
    <h2>Titolo</h2>
    <div class="angolosx"></div>
    <div class="angolodx"></div>
</div>

Nel codice sopra riportato potete notare un div principale che fa da contenitore, il classico content che racchiude il contenuto della parte centrale di un sito. Al suo interno vi è l’h2 e poi sotto di lui due div che grazie al CSS qui di seguito diventeranno i suoi angoli.

#content{
    width:500px;
    border: 1px solid #000;
}

#content h2{
    border: 1px solid #000;
    margin: 0 -10px;
}

.angolosx{
    border-left: 10px solid transparent;
    border-top: 8px solid #DDDDDD;
    float: left;
    height: 0;
    margin-left: -10px;
    width: 0;
}

.angolodx{
    border-right: 10px solid transparent;
    border-top: 8px solid #DDDDDD;
    float: right;
    height: 0;
    margin-right: -10px;
    width: 0;
}

Prima di tutto bisogna dare un contorno e una larghezza al content, in questo caso 500px ma ovviamente è relativa al template. In secondo si da un contorno all’h2 e -10px al margin destro e sinistro in modo da far fuoriuscire lateralmente l’h2 dal content.
L’effetto angolo non è altro che il risultato di due border di colori diversi che si “scontrano”. Come potete notare agli angoli viene settata a 0 altezza e larghezza e poi vengono impostati border-top e border-left/right, questo fa sì che a video venga restituito il triangolino che poi tramite float e margin andremo a posizionare al giusto posto.
Cambiando la larghezza dei border è possibile modificare l’altezza e la larghezza del triangolino.

Questa tecnica è compatibile con tutti i browser più utilizzati in circolazione, compreso l’obsoleto IE6 anche se in quest’ultimo caso l’attributo transparent al border dell’angolo dovrà essere sostituito col colore di sfondo.

Autore: Fabio Di Stasio

Web Designer Freelance specializzato in sviluppo web, realizzazione di template responsive, creazione di temi e plugin WordPress e purista degli standard W3C.