Usare gli slants

Gli slants sono un' idea sui fogli di stile non troppo recente,
decisamente geniale e purtroppo poco usata per svariati motivi che spiegheremo in
seguito. L' idea alla base degli slants è quella di giocare con lo spessore dei bordi
di elementi vuoti, attribuindogli misure significative e consentendo che questi bordi
"collassino" tra di loro generando figure geometriche.
Il primo a scoprire questo comportamento dei bordi è stato Tantek Çelik nel suo
studio sui poligoni regolari
all' inizio del 2001. L' idea è stata poi ripresa da Eric Meyer in
Slantastic Demo e infine
Lasse Reichstein Nielsen ha presentato un articolo che approfondiva la creazione e l' uso degli slants:
Information on Border Slants nel febbraio 2003.
Un' applicazione veramente notevole dell' uso dei css per il design utilizzando bordi e slants si può
trovare qui: CSS House di Chris Hester.
In questo articolo vedremo come è possibile usare praticamente gli slants, realizzando un piccolo
newsbox fatto a scatola tridimensionale.

Primi passi con gli slants

In questo paragrafo vedremo brevemente come creare con html e css gli slants. Iniziamo a vedere il codice
html. Se vogliamo uno slant che sia un elemento inline il modo migliore per farlo è uno span. Ecco il
codice html necessario:

<span class="slant" id="slant1"><!-- --></span>

Il codice html è piuttosto semplice. Ho attribuito una classe di nome slant che racchiude
le proprietà necessarie a tutti gli slants, e un id unico per poter attribuire caratteristiche specifiche
all' esempio. C'è una nota importante da considerare: per far si che gli
slants vengano visualizzati bene anche su Internet Explorer è necessario inserire nello span un commento vuoto.
Ora vediamo il css necessario:

span.slant{
    display: block;
    line-height: 0; width: 0; height: 0;
    border-style: solid
    }

span#slant1{
    border-width: 50px;
    border-color: #f00 #ff0 #0f0 #00f;
    }

La classe slant ci verrà utile negli esempi introduttivi e racchiude le proprietà
minimali e necessarie a tutti gli slants: uno slant di qualsiasi tipo ha dimensioni nulle e
bordo solido. Per attribuire dimensioni nulle è necessario dichiarare lo span display:block
oppure posizionarlo assolutamente o dichiararlo float.
Le proprietà specifiche sullo spessore e il colore dei bordi vengono dichiarate
nell' id per mia comodità negli esempi, ma eventualmente si possono dichiarare inline o attraverso
una seconda classe da attribuire allo span, oppure ancora accorparle in una classe specifica per ogni slant:
l' effetto sarebbe lo stesso, dipende solo dalle scelte implementative di chi codifica in questo caso.
Ricordo che per gli shortands border-width
e border-color è possibile specificare da uno a quattro valori. Se viene specificato un solo valore, sarà il valore attribuito alla proprietà
dei quattro bordi. Se i valori sono due, il primo riguarda i bordi verticali e il secondo quelli orizzontali.
Se i valori sonbo tre, il primo valore specifica la proprietà del bordo superiore, il secondo i bordi orizzontali e il
terzo riguarda il bordo inferiore. Se i valori sono quattro, questi devono essere nell' ordine: top right bottom left.
Per ricordarmelo, all' inizio dello studio dei css pensavo alla lancetta delle ore di un orologio che parte da mezzogiorno e fa un giro
completo.

Chiusa questa piccola parentesi, vediamo il risultato del nostro primo esempio:

In questo caso abbiamo attribuito quattro colori diversi e spessore pari a 50 pixels a tutti e quattro i bordi.
Giocando e sperimentando con i colori e lo spessore dei quattro bordi possiamo ottenere diverse figure geometriche,
tutte composte sostanzialmente da triangoli.

Vediamo velocemente un secondo esempio prima di addentrarci nel vivo dell' articolo. Ecco l' html:

<span class="slant" id="slant2"><!-- --></span>

Ed ecco il css dell' id (la definizione della classe slant resta uguale all' esempio precedente):

span#slant2{
    border-width: 80px 40px 0;
    border-color: #FFC800 #102488
    }

Ecco il risultato, che per alcuni potrà sembrare un simbolo conosciuto:

Sembra un' immagine vero? In realtà è stato realizzato solo con html e css. Straordinario. Per altri esempi, rimando
la lettura ai tre articoli indicati in apertura.

Boxed Corners

Riguardando gli slants, l' altro giorno ho pensato ad un alternativa ai rounded corners
(angoli arrotondati) di cui si è tanto parlato e che senza dubbio sono un buon modo di presentare sezioni di
pagine internet, e in particolare newsbox o parti in evidenza. Per conoscere o approfondire
i rounded corners vi rimando all' articolo Angoli arrotondati con i CSS di Cesare Lamanna.
In questo articolo presenterò invece i boxed corners. L' idea base è un div con due bordi piuttosto spessi,
questo il css che fa uso della variante condensata del Simplified Box Model Hack di cui potete trovare
i dettagli sul mio articolo Capire il Box Model.

div.newsbox{
    position: relative;
    width: 140px; width: 200px; width: 140px;
    border-style: solid;
    border-width: 30px 30px 0 0;
    border-color: #0078D8 #004C88 ;
    padding: 15px;
    background-color: #4090D8;
    text-align: center
    }

Ecco il risultato con un po' di testo:

Da questo inizio sarà chiara la mia intenzione: usare gli slants per coprire l' angolo in alto a sinistra
e l' angolo in basso a destra così da avere un perfetto box tridimensionale. E' questo il motivo
per cui ho dichiarato position:relative il div con classe newsbox, così da poter posizionare assolutamente
elementi al suo interno.

Arrichiamo l' html

A questo punto possiamo procedere con un esempio reale. Un newsbox, o una qualsiasi sezione ben definita,
dovrebbe avere un titolo e del testo. In questo caso useremo quindi un <h3> e un <p>.
Dovremo preoccuparci di inserire due span vuoti per realizzare con gli slants i due angoli coprenti.
Invece che realizzare due classi o due id apposta, potemo sfruttare l' uso di un selettore discendente e inserire nel
titolo e nel paragrafo uno span vuoto solo con classe slant. Ecco l' html definitivo:

<div class="newsbox">
    <h3><span class="slant"><!-- --></span>The box</h3>
    <p><span class="slant"><!-- --></span>Finalmente abbiamo
    realizzato il nostro box tridimensionale. I due slants vengono
    posizionati assolutamente rispetto al div con classe newsbox, dato che
    è il loro parente più stretto posizionato.</p>
</div>

Come si può notare, ho inserito i due span vuoti nell' html. Questi sono in effetti un extra
non strutturale, cioè un' aggiunta di contenuto nullo per agevolare la presentazione.
Gli appassionati di markup semantico e minimale potranno storcere il naso, ed è forse questo il motivo per cui gli slants
non sono molto diffusi. Ma c'è da dire che uno span con contenuto nullo non ha nessun effetto collaterale
nemmeno in una pagina html senza relativo foglio di stile.

Le regole del foglio di stile

Procediamo ora con lo scrivere le regole necessarie ai due slants:

span.slant{
    display: block;
    line-height: 0; width: 0; height: 0;
    border-style: solid
    }

div.newsbox h3 span.slant{
    position: absolute;
    top: -30px; left:0;
    border-width: 15px;
    border-color: #FFF #0078D8 #0078D8 #FFF
    }

div.newsbox p span.slant{
    position: absolute;
    bottom: 0; right:-30px;
    border-width: 15px;
    border-color: #004C88 #FFF #FFF #004C88
    }

Ed ecco il risultato:

Supporto dei Boxed Corners

Gli esempi di questo articolo sono stati testati con Internet Explorer 5.5, Internet Explorer 6,
Opera 7 e Mozilla 1.4, un ventaglio di browsers sufficiente a coprire una percentuale molto significativa
dei browsers attualmente usati dagli utenti di internet.

Nota: Internet Explorer 5.5 per qualche motivo misterioso dà uno scarto di un pixel in
verticale e/o in orizzontale in alcuni casi sullo slant nell' angolo in basso a sinistra. Il mio consiglio
è di testare i vostri lavori sul maggior numero di browsers possibili e, in particolare, se vorrete usare
questa tecnica o comunque una tecnica basata sugli slants posizionati, di controllare il rendimento anche
su Internet Explorer 5.5.

L' esempio finale: un "Boxed Box" fluido

Abbiamo visto l' esempio finito, però questo aveva dimensioni esplicite in pixel. C'è da dire che Internet Explorer
5.5 ha problemi a posizionare i due slants se la larghezza del box non è specificata, quantomeno in percentuale. E così,
per un rendering di dimensioni uguali su tutti i browsers, ho pensato di usare l' hack di Tantek (anche qui rimando al mio
Capire il Box Model) in maniera un po' particolare:
per i browsers che interpretano correttamente il box model la dimensione non viene specificata, ma solo i margini tali da
avere la dimensione che include padding e border pari a quella di IE5.5. Ecco l' esempio fluido con testo ridimensionabile.

In conclusione di articolo, ci tenevo ad aggiungere che le possibilità di creazione di effetti con gli slants sono
moltissime, per esempio ci consentono facilmente di realizzare uno o più angoli tagliati, di fare box a forma
romboidale, esagonale o irregolare... si tratta solo di una questione di fantasia. Buon divertimento!