Hover.css – A collection of CSS3-powered hover effects • Hacker News Board

Hover.css – A collection of CSS3-powered hover effects

#1

Post by ianlunn » Tue, Jan 07, 2014, 4:50 PM UTC

Hover.css – A collection of CSS3-powered hover effects
ianlunn.github.io

Re: Hover.css – A collection of CSS3-powered hover effects

#2

Post by epmatsw » Tue, Jan 07, 2014, 5:54 PM UTC

Using a color besides grey on white would be nice. The lack of contrast makes some of the effects really difficult to see, especially the Speech Bubble ones.

Re: Hover.css – A collection of CSS3-powered hover effects

#3

Post by taf2 » Tue, Jan 07, 2014, 6:27 PM UTC

Is this just animate.css (https://daneden.me/animate/) rebranded?

Re: Hover.css – A collection of CSS3-powered hover effects

#4

Post by gopher1 » Tue, Jan 07, 2014, 6:41 PM UTC

Unfortunately, hover effects are becoming less important to me because of how awkward they are on touch devices.

Re: Hover.css – A collection of CSS3-powered hover effects

#5

Post by elwell » Tue, Jan 07, 2014, 6:50 PM UTC

The page curl doesn't look good enough to me, at least with those colors.

Re: Hover.css – A collection of CSS3-powered hover effects

#6

Post by minimaxir » Tue, Jan 07, 2014, 6:52 PM UTC

gopher1 wrote: post #4

Unfortunately, hover effects are becoming less important to me because of how awkward they are on touch devices.

Worst case, you can disable CSS animations on mobile devices via media queries.

Re: Hover.css – A collection of CSS3-powered hover effects

#7

Post by jrochkind1 » Tue, Jan 07, 2014, 8:40 PM UTC

Those are really nicely done effects, and I could see finding a use for some of the effects -- but not triggered on hover, I've pretty much given up on anything triggered on hover, because of need to support touch.

Re: Hover.css – A collection of CSS3-powered hover effects

#8

Post by Taurenking » Tue, Jan 07, 2014, 8:50 PM UTC

taf2 wrote: post #3

Is this just animate.css ( https://daneden.me/animate/ ) rebranded?

Yep thought so. Even though some effects are quite different

Re: Hover.css – A collection of CSS3-powered hover effects

#9

Post by bzelip » Tue, Jan 07, 2014, 10:03 PM UTC

My work monitors are crappy, rendering speech bubbles invisible. I'll look forward to checking this out on my own machine though. Checked out your personal site from here, nice work on Sequence.js! (http://ianlunn.co.uk/articles/sequence-js-launch/)

Re: Hover.css – A collection of CSS3-powered hover effects

#10

Post by dredmorbius » Tue, Jan 07, 2014, 10:12 PM UTC

jrochkind1 wrote: post #7

Those are really nicely done effects, and I could see finding a use for some of the effects -- but not triggered on hover, I've pretty much given up on anything triggered on hover, because of need to support touch.

There's still a lot of desktop systems out there. And anything you trigger on hover can be triggered on other pseudo selectors (active, selected).

I've found hover effects to be really useful on a client-side basis -- I do a lot of restyling of websites to improve readability and usability. One modification I've made is an asymmetrically timed resizing of edit dialogs in the case of Diaspora. One second after entry, the dialog expands in size and gets a subtle border. The border will fade after 20s, indicating that the dialog will shrink shortly, the dialog itself after 30s.

This gives a responsive but not jittery design with a bit of hysteresis and signaling.

Others are the emphasis given to tabs and other controls on this subreddit: http://www.reddit.com/r/dredmorbius (hover over the post and comment controls), or submit button.

Excessive animation can be annoying, but with the right touch, it's a nice usability enhancement.