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
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:
