Hover.css - Libreria CSS3 con oltre 40 effetti di passaggio del mouse

Quando si affronta il problema di cercare di attirare l'attenzione degli utenti, ci sono molti modi per ottenerlo. Per i casi speciali, il passaggio del mouse è un ottimo modo per attirare l'attenzione su un collegamento o un pulsante. Normalmente, il passaggio del mouse funziona cambiando il colore dell'elemento o lo stato del gradiente quando gli utenti spostano i loro cursori su di esso. Ma con molte funzionalità in CSS3, molte cose possono anche essere personalizzate con l'effetto hover. Uno di loro sta applicando l'animazione. E Hover.css può farlo accadere facilmente.

Hover.css è una libreria CSS gratuita per applicare facilmente l'animazione usando l'effetto hover. Puoi applicare il passaggio del mouse nella chiamata a azioni, pulsanti, loghi, immagini e molto altro ancora. Questa libreria include oltre 40 effetti tra cui scegliere e sono classificati in base a quanto segue: trasformazioni 2D, transizioni dei bordi, transizioni di ombre e bagliori, fumetti e riccioli di pagina .

Iniziare con Hover

Per iniziare, è necessario scaricare Hover, quindi inserire il file hover.css nella cartella del progetto. Oppure, se preferisci, puoi usare hover-min.css, una versione più compatta, che è più piccola e più veloce da caricare. Infine, collega il file alla tua pagina web in questo modo:

 ..  .. 

Aggiunta al passaggio del mouse su un elemento

Per aggiungere un effetto hover nel tuo elemento, inserisci il nome dell'effetto nella classe element. Puoi vedere la demo live di tutti gli effetti disponibili nella pagina di destinazione di Hover. Assicurati di usare solo lettere minuscole e se c'è spazio nel mezzo, basta sostituirlo con un trattino.

Diciamo, ho il seguente markup del link:

Se lo stile è corretto, il collegamento viene visualizzato in questo modo:

Il collegamento è cambiato per sembrare un pulsante. Ma quando sposto il cursore su di esso, il pulsante non cambierà e rimarrà statico. Con uno degli effetti Hover, Hover Shadow, modifico il markup e aggiungo una classe in questo modo:

Ora il pulsante ha un effetto hover fresco che galleggia con un'ombra al di sotto di esso proprio come la seguente demo GIF.

Qualche hacker e personalizzazione

Se apri hover.css con un editor, scoprirai che ogni effetto ha alcune proprietà predefinite. Queste proprietà danno all'elemento il risultato più desiderato sia per la visualizzazione che per l'aspetto. Di seguito sono riportate le proprietà predefinite, vai avanti e personalizzale per soddisfare le tue esigenze:

• display : necessario affinché un effetto funzioni.
• transform : utilizzato per trasformazioni CSS3 per migliorare le prestazioni su dispositivi mobili e tablet
• box-shadow : crea un'ombra di riquadro trasparente che causa bordi più sfumati degli elementi trasformati di CSS3 su mobile / tablet

Pensiero finale

Hover è un'altra best practice per l'implementazione CSS3. Tuttavia, poiché la maggior parte degli effetti come transizioni, trasformazioni e animazioni sta utilizzando nuove funzionalità CSS3, dovrai eseguire un lavoro aggiuntivo sui vecchi browser che non supportano queste funzionalità per assicurarti che l'effetto di passaggio del mouse stia funzionando correttamente.

A Look Into: Internet Explorer 11 DevTools

Gli strumenti di sviluppo nel browser di Internet Explorer (IE DevTools) mancavano da tempo di molte funzionalità critiche per il debug, rendendolo quasi inutile. Ciò include l'impossibilità di ispezionare elementi in diversi stati come :hover :active :hover :focus e :visited - almeno non in modo intuitivo. P

(Consigli tecnici e di design)

Come rimuovere tutte le foto spazzatura in WhatsApp automaticamente

Il metodo di WhatsApp per scaricare le foto sul telefono può rivelarsi un problema se non si ha l'abitudine di pulire regolarmente il telefono. È possibile scegliere di eliminare l'intera cartella multimediale di WhatsApp per eliminare tutte le foto, ma potrebbero esserci anche alcune foto importanti all'interno della cartella .S

(Consigli tecnici e di design)