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.

5 motivi per cui non installo i plugin WordPress

... beh, non tutti i plugin WordPress, solo quelli cattivi. Come ogni altro strumento là fuori, ci sono alcuni plugin che funzionano per te, ad esempio per creare moduli di contatto o per aiutarti a creare un sito di e-Commerce su WordPress - e ci sono quelli che non lo fanno.Alcuni plug-in non sono necessari, altre volte è assolutamente necessario evitare di installarli.

(Consigli tecnici e di design)

15 giochi divertenti per il progettista annoiato

Trovi difficile trovare una scusa per prendersi una pausa dalle tue mansioni di progettazione? Se è così, questi giochi di design diabolicamente avvincenti sono per te. Ognuno è l'ideale per giocare durante la pausa caffè, non importa quanto sia breve. E se qualcuno ti chiede, puoi dire loro che questi giochi aiutano a perfezionare il tuo istinto di progettazione e ad affinare le tue abilità . Sul

(Consigli tecnici e di design)