CSS  »  Articoli  »  Effetti con CSS 

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).

Figura 1. Titolo con triangoli

Figura 2. Lista con marcatori a forma di triangolo

Altri articoli

Altre guide

Altre newsletter