Categories
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.

Categories
Front-End Development Work

Adobe Illustrator CC for web designers | Adobe Inspire Magazine

Adobe Illustrator CC for web designers | Adobe Inspire Magazine.

Categories
Front-End Development

Rem Font Sizing mixin

Categories
Work

The main element

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

http://www.w3.org/TR/2013/NOTE-html-main-element-20130528/

http://html5doctor.com/the-main-element/

Categories
Front-End Development

SASS vs Less

Sass vs. LESS

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