Abbiamo imparato in uno degli ultimi articoli la semplice tecnica che ci consente di realizzare forme triangolari attraverso i CSS. Ora faremo un passo avanti e vedremo in che modo possiamo inserire i triangoli nel contesto di una pagina e/o di un layout. Passeremo, insomma, dalla teoria alla pratica in uno scenario d'uso reale.
Il contenuto generato
Se i triangoli non sono elementi strutturali con un ruolo semanticamente definito ma hanno una funzione puramente decorativa, è buona norma non definirli nel markup del nostro documento. Non faremo dunque ricorso a div o altri tag nel codice HTML. Sfrutteremo invece una funzionalità molto comoda dei CSS: il cosiddetto contenuto generato.
Si tratta della possibilità offerta dal linguaggio di creare dei contenuti (testuali o visuali) direttamente dal foglio di stile, senza che tali contenuti siano presenti nell'albero del documento. I contenuti così generati saranno resi a video dai browser in grado di supportare gli pseudo-elementi :before e :after, oltre alla principale proprietà ad essi associata, content.
La funzione di :before e :after è intuibile a partire dal nome. Con :before possiamo inserire del contenuto prima dell'elemento a cui è associato lo pseudo-elemento; con :after il contenuto sarà inserito dopo. Se per esempio volessimo inserire la parola 'Titolo' prima del testo di ogni elemento h1 useremo questo codice:
h1:before{
content: "Titolo";
}Per approfondire rimandiamo alla lezione sugli pseudo-elementi della guida CSS.
Posizione del contenuto generato
Oltre che l'inserimento di contenuti tramite :before e :after, i CSS consentono anche di intervenire sulla formattazione e sul posizionamento del contenuto generato. In pratica, alla stringa di testo 'Titolo' dell'esempio precedente possiamo applicare proprietà come display, margin, padding, position, etc. È questa possibilità che sfrutteremo per posizionare i triangoli nel layout del nostro esempio.
Abbiamo usato i triangoli in due contesti:
- per creare lo sfondo nero con le frecce per i titoli (figura 1);
- per creare un marcatore a forma di triangolo per le liste presenti nella barra laterale (figura 2).
Formattare i titoli
Per formattare come in figura 1 l'aspetto dei titoli h2, siamo partiti da questo codice:
h2 {
color: #F58529;
font-size: 140%;
padding: 10px 20px;
background-color: #000;
margin: 10px 20px;
position: relative;
}Due i punti da osservare. Per creare lo spazio da destinare ai triangoli sui due lati abbiamo dato un margine di 20px a sinistra e a destra. Abbiamo quindi assegnato position: relative perché useremo il posizionamento assoluto per i contenuti generati, ovvero per i triangoli.
La freccia sul lato sinistro del titolo la otteniamo inserendo un triangolo tramite lo pseudo-elemento :before:
h2:before {
content: "";
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
right: -20px;
top: 0px;
}La proprietà content va lasciata vuota perché non inseriamo come contenuto generato né una stringa di testo, né una risorsa esterna (come un'immagine), né un contatore, né delle virgolette. Quello che andremo a inserire sarà costituito, di fatto, dalla forma triangolare che otterremo con la tecnica dei bordi vista nell'articolo precedente:
width: 0;
height: 0;
line-height: 0;
border-left: 20px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;Generata la forma, posizioniamo il tutto:
position: absolute;
right: -20px;
top: 0px;La stessa operazione, invertendo la forma del triangolo e adeguando le coordinate per il posizionamento, compiamo per il lato destro del titolo, dove useremo lo pseudo-elemento :after:
h2:after {
content: "";
width: 0;
height: 0;
line-height: 0;
border-right: 20px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
left: -20px;
top: 0px;
}Creare un marcatore delle liste
Ancora più semplice il lavoro per creare il marcatore delle liste. Iniziamo eliminando il marcatore di default dai list-item e usando sugli stessi, per i motivi già visti, il posizionamento relativo:
#sidebar ul { margin: 10px 0; }
#sidebar li {
line-height:25px;
list-style: none;
padding-left: 15px;
position: relative;
}Per inserire il triangolo come marcatore sfruttiamo, ovviamente, lo pseudo-elemento :before e il posizionamento assoluto:
#sidebar li:before {
content: "";
width: 0;
height: 0;
line-height: 0;
border-left: 5px solid #F58529;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
position: absolute;
left: -3px;
top: 8px;
}Gli esempi sono disponibili per il download.
Conclusioni e approfondimenti
Il posizionamento del contenuto generato è una tecnica molto potente e versatile. Combinata con certe proprietà dei CSS3 consente di ottenere effetti visuali di sicuro impatto: ci torneremo in altri articoli. Per ora concludiamo con due link di approfondimento:
