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.

10 suggerimenti per migliorare la fotografia dello smartphone

Il telefono con fotocamera ha cambiato la nozione di fotografia tradizionale, soprattutto perché è più facile portare in giro un telefono con fotocamera che si adatta alla tua tasca piuttosto che trascinarsi dietro la DSLR molto più ingombrante. Questo fenomeno ha generato un afflusso di app per la condivisione di foto e di fotoritocco e probabilmente ha contribuito a cambiare il modo in cui lavorano fotografi professionisti e fotoreporter.La

(Consigli tecnici e di design)

Come rimuovere gli App Story dalla tua Cronologia Facebook

Gli utenti di vecchia data di Facebook sono probabilmente consapevoli del fatto che alcune app, giochi e siti Web di terze parti sono integrati nel sito di social network, consentendo agli utenti di accedere a loro tramite i loro account .Anche se l'integrazione può rivelarsi utile, a volte potrebbe verificarsi l'effetto collaterale di lasciare che queste app di terze parti anneghino la tua Timeline con notifiche, che portano direttamente al feed delle notizie dei tuoi amici bombardato dagli aggiornamenti di stato.

(Consigli tecnici e di design)