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

Rem Font Sizing mixin

Categories
Front-End Development

Cross-Browser Inline-Block

Source: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/

Categories
Front-End Development

SASS vs Less

Sass vs. LESS

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

Categories
Portfolio Work

http://blog.duglemmerdetaldrig.dk/faldskaermsudspring-2/

#FrontEnd #TwitterBootstrap #WordPress