From the blog

Material Design Input Fields CSS3

Mimicking the effect of Material Design input fields using CSS. When focused, placeholder text will offset a bit to the top and act as a label. Only difference is that the label disappears when you start typing, which it shouldn’t. This is because I used…

Read More »

CSS3 ‘Whoosh’ and ‘Whiw’ hover button effects

I don’t really know what to call them so I just named them after what I thought the effects would sound like, if CSS had audio. The hover idea came to me yesterday and I thought that it would be nice to try out using…

Read More »

February 2017 Update

Made a sitewide domain change from cssjunkie.com to elmerbalb.in. I bought the latter yesterday so I figured it would be better to use it for this blog than just letting it watch paint dry at GoDaddy 🙂 All urls from the previous domain will now…

Read More »

RUFUS – Developing my first talking AI

Meet RUFUS I’ve always been interested with the concept of AI. The computer’s ability to respond and learn based from the patterns of your responses. Back in the day, there was SimSimi. What was interesting about it was it stored other people’s feedback and then…

Read More »

Switching domains? Here’s the SQL query for WordPress!

Just update and run the query in phpmyadmin or whatever SQL client that you are using for the database of your site.

Read More »

Color slide effect on hover using CSS

A nice and simple hover effect where the background color shifts from right to left on hover. This is achieved by animating the ‘background-position’ property and increasing the width of the background using ‘background-size’. HTML

CSS

Output Icons made by Madebyoliver from www.flaticon.com…

Read More »

Collapsed DIV borders using CSS3 box-shadow

This is a neat little trick I’ve been using some time now and I hope this will be of help to others too, especially to young developers. Suppose you have 3 divs that are stacking on top of each other and you want to give…

Read More »

Hover Button ‘Fly-up’ Effect with CSS

An interesting button hover effect seldom used but not hard to create. This uses CSS3 so this won’t work on old browsers that don’t support it. HTML

CSS

Output

Read More »

It’s called the ‘Dab’!

Image By Gokudabbing (Own work) [CC BY-SA 4.0], via Wikimedia Commons You see me rollin’…and dabbin’ Well this is embarrassing but it actually took me some time to finally figure out what this was called. You’ve already probably seen this on memes, vines, or someone’s…

Read More »

Border Magnetize-Like Effect using CSS3 and jQuery

A simple effect on borders I had time to whip up today. Forgive the dirty code (newb here!). Calculates the mouse position from the center of the circle. This is my play on the mousemove event and CSS3 transition property. Feel free to copy the…

Read More »