CSS3 ha introdotto innumerevoli possibilità per i progettisti di UX, e la cosa migliore di loro è che le parti più interessanti sono davvero semplici da implementare.
Solo un paio di righe di codice ti daranno un fantastico effetto di transizione che ecciterà i tuoi utenti, aumenterà il coinvolgimento e, infine, se usato correttamente, aumenterà le tue conversioni. Inoltre, questi effetti sono accelerati dall'hardware e un miglioramento progressivo che puoi utilizzare al momento.
Ecco 8 effetti davvero semplici che aggiungeranno vita all'interfaccia utente e sorrideranno ai volti degli utenti.
Tutti questi effetti (barra uno) sono controllati con la proprietà di transizione. Quindi possiamo vedere questi effetti funzionanti, installeremo un div in una pagina HTML:
Fatto ciò, imposta la sua larghezza e altezza (quindi ha dimensioni), il suo colore di sfondo (così possiamo vederlo) e la sua proprietà di transizione.
La proprietà di transizione ha tre valori: le proprietà per la transizione (nel nostro caso tutte) la velocità della transizione (nel nostro caso 0,3 secondi) e un terzo valore che consente di modificare il modo in cui vengono calcolate l'accelerazione e la decelerazione, ma noi Rimaniamo con il default lasciando questo vuoto.
Ora tutto ciò che dobbiamo fare è modificare le proprietà e animeranno per noi ...
Se vuoi seguirti, puoi scarica qui i file demo.
Far sbiadire le cose è una richiesta abbastanza comune da parte dei clienti. È un ottimo modo per enfatizzare la funzionalità o attirare l'attenzione su un invito all'azione.
Gli effetti di dissolvenza sono codificati in due passaggi: in primo luogo, si imposta lo stato iniziale; successivamente, si imposta la modifica, ad esempio su hover:
.fade{opacity:0.5;}.fade:hover{opacity:1;}(Assicurati di impostare la classe del tuo div su "fade" per vedere come funziona.)
Per far crescere un elemento, dovevi usare la sua larghezza e altezza, o il suo riempimento. Ma ora possiamo usare la trasformazione di CSS3 per ingrandire.
Imposta la classe del tuo div per "crescere" e quindi aggiungi questo codice al tuo blocco di stile:
.grow:hover{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);transform: scale(1.3);}Le trasformazioni CSS hanno un numero di usi diversi e uno dei migliori è trasformare la rotazione di un elemento. Dai al tuo div la classe "ruota" e aggiungi quanto segue al tuo CSS:
.rotate:hover{-webkit-transform: rotateZ(-30deg);-ms-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}Le ombre 3D sono state disapprovate per circa un anno, perché non erano viste come compatibili con il design piatto, il che ovviamente non ha senso, funzionano in modo fantastico per dare un feedback agli utenti sulle loro interazioni e lavorare con interfacce 3D piatte o false .
Questo effetto si ottiene aggiungendo un'ombra di riquadro e quindi spostando l'elemento sull'asse x utilizzando le proprietà di trasformazione e traduzione in modo che appaia fuori dallo schermo.
Dai al tuo div il "threed" della classe e poi aggiungi il seguente codice al tuo CSS:
.threed:hover{box-shadow:1px 1px #53a7ea,2px 2px #53a7ea,3px 3px #53a7ea;-webkit-transform: translateX(-3px);transform: translateX(-3px);}Uno degli stili di pulsante più caldi in questo momento è il pulsante fantasma; un pulsante senza sfondo e un bordo pesante. Ovviamente possiamo aggiungere semplicemente un bordo ad un elemento, ma questo cambierà la posizione dell'elemento. Potremmo risolvere questo problema usando il dimensionamento della scatola, ma una soluzione molto più semplice è la transizione in un bordo usando un'ombra di riquadri di riquadri.
Dai al tuo div il "bordo" di classe e aggiungi il seguente CSS ai tuoi stili:
.border:hover{box-shadow: inset 0 0 0 25px #53a7ea;}