• Passa alla navigazione primaria
  • Passa al contenuto principale

Arch. Mattia Frigeri

Web Design Parma - Siti Internet Parma - Grafica Parma

  • Chi siamo
  • Portfolio
  • Articoli
    • Web
    • Grafica
    • WordPress
    • Libri
  • Corsi Web Design
  • Contatti

Web · Gennaio 11, 2014

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

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

  • Inserire linee orizzontali a fianco dei titoli (CSS Tricks)
  • Gli pseudo elementi (W3C)
  • La libreria Selectivizr
  • Il supporto dei browser per gli pesudo elementi :before e :after
  • Disegnare una stella con il CSS (CSS Tricks)

Archiviato in:Web Contrassegnato con: css, pseudo elementi, titolo

Post precedente: « WordPress: aggiungere un tag contenitore (wrapper) intorno alle immagini caricate nei post e nelle pagine
Post successivo: Inserire un video full screen come sfondo di un sito con il plugin jQuery tubular »

  • © 2008-2020 Studio Arch. Mattia Frigeri
  • Via Giuseppe Romita 4, 43123 Parma (PR)
  • Tel. 339/7547430 - Email: arch.mattiafrigeri@gmail.com
  • P.I. 02542140344
  • Privacy Policy - Cookie Policy