Samples of my custom CSS

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

grainy

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

look at those artifacts

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

oh and now this one’s very big

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.