Bando alle ciance, oggi andiamo al sodo. Voglio fare una premessa doverosa, esistono diversi effetti realizzabili con i CSS3 più accattivanti, complessi e con l’uso di keyframes. In questo articolo ho scelto di realizzare 5 esempi relativamente semplici, ma gradevoli, che possano andare incontro alle esigenze di clienti non sempre aperti a grandi stravolgimenti e possano essere facilmente implementati sugli output generati da un CMS.
Ovviamente non si farà uso di alcun JavaScript e sarà necessario utilizzare tutti i prefissi proprietari affinchè l’effetto sia correttamente visibile. Let’s go!
NB: Nell’esempio troverete l’utilizzo dei due punti singoli non doppi. La specifica corretta CSS3 richiede però l’uso dei doppi ma, per il solito explorer-motivo i doppi doppi-punti (perdonate il gioco di parole) non sono supportati. Ad ognuno quindi la scelta più idonea alle proprie esigenze.
Gli Effetti e i CSS3
Per realizzare tutti gli effetti, a parte un po’ di creatività di fatto abbiamo dovuto utilizzare le seguenti proprietà CSS:
- :before e :after / ::before e :: after -> Pseudo-selettori usati per creare un elemento di pagina prima o dopo l’elemento padre (ma all’interno). Negli esempi mostrati l’elemento padre è sempre il link con classe effect al quale abbiamo dato la proprietà inline-block per poterlo dichiarare relative ed agganciare all’interno l’elemento ::after o ::before.
- Le transizioni CSS3 -> Le transizioni necessarie a rendere progressivo il passaggio da uno stato all’altro, e da una proprietà CSS alla stessa variata.
- Le trasformazioni CSS3 -> Le trasformazioni (nel nostro caso scale() e rotateX()) per realizzare un effetto complesso di movimento/ridimensionamento dell’elemento link di partenza.
- La proprietà CSS content e l’attributo HTML5 data -> fondamentali per “copiare” il contenuto testuale del link ed incollarlo negli elementi after e before.
Per vedere nel dettaglio il funzionamento di ogni singolo esempio vi invito a vedere il codice sorgente della demo che è stata suddivisa in 7 punti per facilitarne la comprensione a tutti.
PS: se hai realizzato degli esperimenti creativi semplici, sulla base di quelli che hai visto, fai un fischio che li integro volentieri!
D.
