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.

Crea velocemente e velocemente le email reattive con MJML Framework

Progettare e programmare una newsletter richiede molto tempo. Puoi trovare molti consigli sul design, ma codificare la tua newsletter in un modello è la parte più difficile.È qui che entra in gioco il framework MJML . È uno dei migliori framework di posta elettronica gratuiti disponibili e si compila in puro HTML / CSS, che funziona per tutti i client di posta elettronica .Una

(Consigli tecnici e di design)

Come creare la campagna Newsletter Email perfetta [Infografica]

Alla ricerca di suggerimenti su come è possibile produrre la campagna o la newsletter perfetta, una che viene aperta, recapita il messaggio nel modo giusto e aumenta le possibilità di ottenere una risposta? Ecco un'infografica che può aiutare a rispondere a queste domande e molto altro ancora.Gu

(Consigli tecnici e di design)