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>
).
<h1>
decorato con 6 stelle lateraliVolendo 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:
width
degli <h1>
cioè non poteva rimanere costanteL’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. <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. <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ì:
png
con le tre stellineLa 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");
}
<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:
<span>
(le stelle) posizionati in modo correttoCome 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.
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.
Questo blog è curato e aggiornato per pura passione e amore degli argomenti. Se tuttavia ritieni che per te sia stato di qualche valore, puoi mettermi 5 stelline su Google, o valutare di assumermi per realizzare il tuo nuovo e fantastico sito web, oppure offrirmi una birra, un caffè o una Ferrari.
Basta cliccare qui sotto ↓
Contattami o iscriviti alla mia (pazzesca) newsletter
© 2023 Mattia Frigeri
Ricordami di aggiornare l’anno il primo di gennaio ;)
Privacy Policy – Cookie Policy – Aggiorna preferenze
P.I. 02542140344 – C.F. frgmtt81a24g337z