Design Inspirations Front-End Development Work

Interactive Pure-CSS Hamburger menu icon

I recently came across a site with a nifty hamburger icon which transforms into an X icon when the menu is shown or it’s active. The transformation also includes a transition. So it’s not a simple background image change.

It really interests me so I recreate it in a codepen:

See the Pen interactive hamburger menu icon by Leo Gono (@leogono) on CodePen.0

As you might have notice, here what happens, the top bar transforms 45 degree, the middle bar disappears, and lastly, the bottom bar transforms -45 degree.

The code is pure CSS so it’s very lightweight. It utilizes ‘transform’ and ‘transition’ css properties. You can add prefixes for browser support.

Front-End Development Work

Adobe Illustrator CC for web designers | Adobe Inspire Magazine

Adobe Illustrator CC for web designers | Adobe Inspire Magazine.

Front-End Development

Rem Font Sizing mixin


The main element

Some articles explaining how and where to use the main element.

Front-End Development

SASS vs Less

Sass vs. LESS

I’m currently using Less more often but will try to transfer to Sass.