Usare i CSS per inserire pseudo elementi e decorazioni intorno ai titoli e al testo

Aggiornato il

Disegnavo questo sito quando ho deciso di fare un esperimento: trovare il modo più semplice per aggiungere immagini decorative (in questo caso delle “stelline”) intorno ai titoli principali di ogni pagina (<h1>). (Fig. 1)

Titolo h1con decorazioni

Fig. 1: “Life” è un titolo <h1> decorato con 6 stelle laterali

Volendo utilizzare solo i CSS, soluzioni che prevedessero l’utilizzo di tag <img> all’interno del codice HTML erano escluse a priori. Un modo comodo ma poco efficace consisteva nel mantenere la larghezza degli <h1> costante in tutte le pagine del sito, usando la proprietà CSS background-image per aggiungere un’immagine di sfondo. Si presentavano però i seguenti problemi:

  • Alcune pagine avevano titoli più lunghi di altri: la width degli <h1> cioè non poteva rimanere costante
  • Per questioni grafiche, volevo che la distanza tra le stelline e i bordi di tutti i titoli rimanesse la stessa (Fig. 2)
Distanza titolo dagli pseudo elementi

Fig. 2: La distanza tra le stelle e i bordi del titolo

L’ispirazione mi è venuta dopo la lettura di un post di Chris Coyer in cui spiegava come risolvere un problema abbastanza simile. Ecco l’HTML di partenza:



<h1>Titolo della pagina</h1>


Allineo centralmente <h1> con i fogli di stile:



h1 {

    text-align: center;
}


<h1> è un tag di tipo block e occupa quindi tutta la larghezza del suo contenitore (Fig. 3).

Ingombro del titolo h1

Fig. 3: Ingombro di <h1>

Aggiungo all’interno di <h1> un tag “neutro” di tipo inline: <span>.



<h1><span>Titolo della pagina</span></h1>


Essendo inline, la larghezza di <span> coincide con l’ingombro del testo. (Fig. 4)

Span dentro h1

Fig. 4: Ingombro di <span>

Le tre stelle sono dentro ad un’immagine trasparente salvata in formato png (immagine che sarà quindi ripetuta a destra e a sinistra di ogni titolo). In Photoshop si presenta così:

Stelle

Fig. 5: Il png con le tre stelline

La soluzione consiste nell’utilizzare gli pseudo elementi :before (prima) e :after (dopo) per incorporare le stelline, “ancorandoli” al tag <span>. Ecco come inserire l’immagine all’interno dei due pseudo elementi:



h1 {

    text-align: center;
}

h1 span:before, h1 span:after {

    content: url("immagini/stelle.png");
}


Pseudo elementi decorativi

Fig. 6: Le stelline vengono inserite prima e dopo <span>

Ho in pratica “attaccato” alla parte iniziale (:before) e finale (:after) del tag <span> l’immagine con le 3 stelle.

Come vedi però la loro posizione è sbagliata! Posso correggerla utilizzando il posizionamento assoluto sui due pseudo elementi. Un oggetto posizionato in modo assoluto ha bisogno di un contenitore di riferimento: e questo è proprio <span>, al quale assegno quindi posizionamento relativo.



h1 {

    text-align: center;
}

h1 span {

    position: relative;
}

h1 span:before, h1 span:after {

    content: url("immagini/stelle.png");
    position: absolute;
}

h1 span:before {

    right: 100%;
    margin-right: 50px;
}
h1 span:after {

    left: 100%;
    margin-left: 50px;
}


Il risultato finale è questo:

Pseudo elementi posizionati correttamente

Fig. 7: Gli pseudo elementi di <span> (le stelle) posizionati in modo corretto

Come indicato nel CSS, gli pseudo elementi saranno sempre 50px a destra e 50px a sinistra di <h1>, indipendentemente da quanto questo sia lungo o quante parole o spazi abbia al suo interno. Inoltre, il markup HTML non è stato “sporcato” da tag non necessari alla struttura.

C’è soltanto una piccola nota negativa: non tutti i browser supportano gli pseudo elementi :before e :after. Un modo per sopperire a tale mancanza è l’incorporamento della libreria Selectivizr, che serve per emulare i più recenti selettori anche nei browser più obsoleti.

Ancora meglio: disegnare le stelle con il CSS

Pensandoci bene, potevo fare ancora meglio e disegnare le stelle con il solo ausilio dei CSS! E’ una soluzione che richiede un uso un po’ più massiccio e complicato dei fogli di stile, ma il vantaggio è la completa indipendenza da immagini con conseguente miglioramento della performance del sito.

Riferimenti

di Mattia Frigeri

COMMENTI

  • Ancora meglio era usare un simbolo UTF-8 a forma di stella: è un carattere come se fosse testo. Es: il triangolo ha codice 9662 ▾ — stella 9733 –> ★

  • Di niente, solo non sono sicuro che i codici che ho elencato funzionino ugualmente su CSS come in HTML, forse bisogna usare un altro codice. Però il vantaggio è quello di poter usare la loro colorazione come se fossero testo.
    Come trovare le immagini adatte quando ci servono? Segnalo questo sito in cui ho ricercato “star”, ma si può ricercare ad esempio “triangle” o altre parole a seconda del bisogno: http://amp-what.com/unicode/search/star

  • Ultimo aggiornamento (scusa…): il codice dato dal sito funziona benissimo nei CSS ma se si usa UTF-8 (standard), per ottenere il codice giusto bisgogna cliccare sulla “U” a fianco della casella di ricerca (che appunto restituisce il codice in Utf8).

    Esempio di contenuto contenente un triangolo seguito da una stella:
    content: “\269d \25bc”;

    Che dovrebbe dare:
    ⚝ ▼

    • Che dire… grazie mille di tutte queste delucidazioni e consigli, di sicuro hai donato valore aggiunto all’articolo. Sei anche stato molto chiaro, complimenti!