Home » CSS

Direction Aware Tiles Pure CSS – How it works

Before I start let me first tell you that this will not work on IE. You need to use a different browser (like Chrome or an updated version of Firefox or Safari) and be on a large screen, preferrably one with a cursor. After my…

Read More »

Material Design Card Flip Pure CSS – Direction Aware

Growing more and more attached with Material Design, here’s a card flip effect which reacts to which direction your mouse is in when you hover. This concept can be applied to blog excerpts, image galleries, or to show your contact information. To compile the SCSS…

Read More »

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 »

Self-Caricature SVG Animation

Time to push things up a bit. I decided to do a sketch of a picture of myself and animate it. It’s more complicated than my previous work since there are a lot more paths involved. But I’m happy with how it turned out ๐Ÿ™‚…

Read More »

Personal Logo SVG Animation

After avoiding it for some time for the very reason that I am not good with graphic design, I decided to tackle SVG animation. And for my very first output, I chose to play with my personal logo for this. Surprisingly, it wasn’t as hard…

Read More »

Android Clock CSS – ReactJS

This is a redesign of my previous work but this time recreated it with ReactJS. Note that the clock does not reflect the current time. HTML

CSS

JS (Babel)

Elmer BalbinWeb developer from Bacolod, Google Local Guide, and casual DotA 2 player….

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 »

Daily CSS Challenge – 14 – Cheesecake

Creating images with code. This is my 14th entry for the Daily CSS Images Challenge. Topic for the day is “Cheesecake”! Flat and simple design ๐Ÿ™‚ April 11, 2017 – Pen featured in CodePen.io homepage ๐Ÿ™‚ HTML

CSS

Elmer BalbinWeb developer from Bacolod,…

Read More »

Daily CSS Challenge – 13 – Taco (animated)

Creating images with code. This is my 13th entry for the Daily CSS Images Challenge. Topic for the day is “Taco”! April 6, 2017 – Pen featured in CodePen.io homepage ๐Ÿ™‚ April 7, 2017 – Pen featured in Weekly Showcase! HTML

CSS

Elmer…

Read More »

Daily CSS Challenge – 12 – Dripping Hamburger (animated)

Creating images with code. This is my 12th entry for the Daily CSS Images Challenge. Topic for the day is “Hamburger”. Mmm… sweet, sweet burger. March 31, 2017 – Pen featured in Weekly Showcase! HTML

CSS

Elmer BalbinWeb developer from Bacolod, Google Local…

Read More »

Daily CSS Challenge – 11 – Pizza

Creating images with code. This is my 11th entry for the Daily CSS Images Challenge. Topic for the day is “Pizza”. Who doesn’t like pizza, am I right? March 29, 2017 – Pen featured in CodePen.io homepage ๐Ÿ™‚ HTML

CSS

Elmer BalbinWeb developer…

Read More »

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