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
Portfolio Work

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

#FrontEnd #TwitterBootstrap #WordPress

Categories
Front-End Development Work

Fullscreen_8_4_13_6_54_PM

#working on a  #frontEnd development project using #less, #git, #CreativeCloud and of course #SublimeText

Categories
Front-End Development Work

Useful CSS3 LESS Mixins