Quando scriviamo codice, dobbiamo sempre chiederci se stiamo utilizzando la soluzione migliore possibile per implementare una specifica parte di layout.
Spesso nei layout capita di dover inserire delle icone prima o dopo un link o un titolo, come nel caso di questo bottone.
Fino a qualche tempo fa il codice html lo scrivevo in questo modo, inserendo un’immagine prima del testo del link
Continua a leggere
dando poi gli opportuni stili per posizionare gli elementi.
Prova ora a pensare di avere 20 testi con icone in una pagina web. Questo comporta 20 richieste http per le varie immagini.
La soluzione migliore in questi casi è usare la tecnica dello sprite dove si va a creare un’immagine unica con tutte le icone e tramite css e la proprietà background-position andare a prendere la porzione di immagine che serve.
Poi per posizionare le immagini a sinistra o a destra del testo si utilizzano i pseudo selettori CSS :before e :after.
Il codice HTML quindi diventa:
Continua a leggere
Per mettere l’icona a sinistra della scritta dovrai usare :before:
a:before {
content: ""; /* testo che si vuole inserire prima */
display:block;
background: url(sprite.png) no-repeat left top;/*prendo porzione dello sprite in alto a sinistra */
float:left;
width:16px;
height:10px;
margin-right:5px;
line-height:10px;
}
In questo modo l’immagine viene inserita come sfondo, prima del link.
Lo stesso vale se l’icona la vuoi mettere dopo il link, utilizzando :after.
Conoscevi questi pseudo-selettori? Li utilizzi?
Foto credits
30 maggio 2013 at 12:13
Bell ‘articolo, mi ero sempre chiesto effettivamente a cosa servissero questi pseudo selettori,io vedo che vengono usati spesso anche per animazione css3, ma devo ancora capire come utilizzarli bene
27 giugno 2014 at 04:37
e-cigarette battery HTML CSS – Utilizzare al meglio :before e :after | Fedeweb