Home » Code Snippets

Visual overview of the different transition timing functions in CSS3

This is just a quick post to show you the basic timing functions being used in transition effects and how they are different from each other. For visualization purposes, I added an alternating animation loop of 1 second for each function. You can find the HTML…

Read More »

How to see changes to js files immediately in WordPress

This is similar to my other tip but this one is for javascript files. This modifies the ver parameter to output the current time as the version to trick your browser into thinking it is loading a fresh copy.

Elmer BalbinWeb developer from Bacolod,…

Read More »

Scrolling performance issue with background-size and the quick fix

The homepage of my site is currently a grid of my most recent articles. The images are set as background images to each div with a CSS property of background-size: cover. The problem is this causes some frame rate loss when I start scrolling, due…

Read More »

How to see changes to style.css immediately in WordPress

Browser and server cache can be really annoying especially if you constantly make changes to your site through the CSS stylesheet. To work around this, you just need to replace the style.css call in the functions.php file of the theme with this code.

This…

Read More »

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 »

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.

Elmer BalbinWeb developer from Bacolod, Google Local Guide, and casual DotA 2 player. about me https://elmerbalb.in

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 Elmer BalbinWeb developer from Bacolod, Google Local Guide, and casual DotA 2 player. about me…

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 »

Get great deals on hotel rooms from all over the world BOOK NOW