Ente accreditato Regione Veneto n.4271

Pseudo elementi: alcuni spunti per il loro utilizzo

Pubblicato da Paola Franco // 4 Febbraio 2020 // 34 visualizzazioni

All’interno di un progetto HTML/CSS che si rispetti non possono mancare gli pseudo-elementi, elementi difficili da comprendere per chi è alle prime armi, ma strumenti utilissimi per creare interessanti soluzioni grafiche per rendere le nostre pagine più interessanti e graficamente accattivanti.

Ecco quali sono gli pseudo elementi che il W3C ci mette a disposizione:

::first-line – Si applica solo agli elementi di blocco e ci permette di personalizzare la prima riga di un paragrafo indipendentemente dalla sua lunghezza.

::first-letter – Identifica e formatta la prima lettera di un elemento testo.

::selection – Personalizza l’aspetto di un testo quando questo viene evidenziato dall’utente.

Ma i più importanti e interessanti sono gli pseudo-elementi before e after che ci permettono di inserire le nostre personalizzazioni prima o dopo un qualsiasi elemento in HTML. L’ambito in cui sono più usati e che tutti i programmatori conoscono è la gestione della classe clearfix usata per ripristinare il flusso del codice prima o dopo una serie di elementi in float, ma questo non è l’unico utilizzo che possiamo ipotizzare, vediamone di seguito alcuni di interessanti.

 

Creazione di un elemento divisore obliquo tra 2 div

Con questo esempio voglio mostrarvi come creare un elemento che faccia da divisore tra 2 section del nostro sito.

 

L’HTML è molto semplice, 2 div vuoti uno dopo l’altro:

Mentre nel CSS si tratta di creare uno pseudo elemento dopo (after) il primo div che disegna un bordo obliquo largo quanto tutta la nostra viewport.

 

Animazione di un pulsante in hover

In questo secondo esempio invece vediamo come creare un effetto di hover ad un nostro pulsante, vogliamo che al passaggio del mouse il nostro pulsante inverta i colori tra sfondo e testo con un effetto da sinistra verso destra. Lascio a voi il semplicissimo HTML, un link in classe btn e vediamo direttamente il CSS:

 

 

Da riga 113 a 127 è semplice formattazione CSS per il nostro bottone, sfondo, colore e dimensioni. Mentre da riga 129 costruiamo il nostro pseudo-elemento, un box vuoto di dimensioni width: 0 e height: 100% che all’hover diventa largo il 100% del suo elemento padre con un’animazione di 0.3s.

 

Nella prossima pillola vedremo come formattare una checkbox utilizzando gli pseudo-elementi per renderla esteticamente gradevole e in linea con la nostra grafica, nel frattempo scopri come utilizzare in molti altri modi questi strumenti nel corso di Web Design 2.0

Topic: , ,

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Send this to a friend