These are some CSS effects I’ve made. Maybe they can inspire you.

The quality of these gifs is very low. I’ll look into how that can be improved.

Tab focus

This has two elements — a background block, which grows from the bottom on mouseover and recedes when the mouse leaves, and an underline, which grows from the center on mouseover and shrinks when the mouse leaves, but also stays when the tab is active.

Icon jiggle

I don’t think enough icons jiggle on mouseover. They all should.

Login dropdown

Login pages are for handling problems; otherwise, no one wants to visit a login page.

Authorization flash

There are two kinds of warning flashes here; the login reminder flashes if a user tries to join a game without being logged in, while the “full” text flashes if a user is logged in but tries to join a full game.

Day/night switch

This is a fairly common type of day/night switch implementation, but I still made it, and it still looks cool.

I think I’ll keep digging up examples from past projects, and make another one of these posts.

Weakly Pseudonymous Software Engineer