{"id":25932,"date":"2016-03-08T10:00:40","date_gmt":"2016-03-08T08:00:40","guid":{"rendered":"https:\/\/mamchenkov.net\/wordpress\/?p=25932"},"modified":"2016-03-08T10:00:40","modified_gmt":"2016-03-08T08:00:40","slug":"css-hamburgers","status":"publish","type":"post","link":"https:\/\/mamchenkov.net\/wordpress\/2016\/03\/08\/css-hamburgers\/","title":{"rendered":"CSS Hamburgers"},"content":{"rendered":"\n

After spending years and years in close proximity to web and user interface design, I’m still amazed sometimes at a variety of ways to solve even the simplest of problems. \u00a0The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed navigation menu. \u00a0It looks like this:<\/p>\n

\"hamburger\"<\/a><\/p>\n

Now, when you click on that, something happens. \u00a0The menu expands or collapses, usually. \u00a0But what you don’t often notice is a tiny bit of animation that is applied to the icon itself. \u00a0Here is a collection<\/a> of such animations. \u00a0There are 14 different effects, both in 2D and 3D. \u00a0Wow!<\/p>\n

\"css<\/a><\/p>\n\n","protected":false},"excerpt":{"rendered":"\n

After spending years and years in close proximity to web and user interface design, I’m still amazed sometimes at a variety of ways to solve even the simplest of problems. \u00a0The growth of the web users on mobile devices has brought us the hamburger icon, which usually hides the collapsed navigation menu. \u00a0It looks like … Continue reading CSS Hamburgers<\/span><\/a><\/p>\n\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"CSS Hamburgers #WebDesign #WebDev #CSS #mobile","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_links_to":"","_links_to_target":""},"categories":[1,62,1334],"tags":[1517,1141,1157,1330],"keyring_services":[],"class_list":["post-25932","post","type-post","status-publish","format-standard","hentry","category-general","category-technology","category-web-work","tag-css","tag-mobile","tag-web-design","tag-web-development"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":15927,"url":"https:\/\/mamchenkov.net\/wordpress\/2011\/11\/22\/how-to-build-android-application-and-keep-your-sanity\/","url_meta":{"origin":25932,"position":0},"title":"How to build Android application and keep your sanity","author":"Leonid Mamchenkov","date":"November 22, 2011","format":false,"excerpt":"Today is is a big day and I am celebrating. I am celebrating together with my teammates the release of the ImpreStyle Color application for Android, version 1.0.0, demo. It took all four of us to working hard over a much longer period of time than anyone would be willing\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2011\/11\/collectionlist.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":29125,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/12\/20\/picking-the-right-api-paradigm\/","url_meta":{"origin":25932,"position":1},"title":"Picking the right API Paradigm","author":"Leonid Mamchenkov","date":"December 20, 2018","format":false,"excerpt":"There are not many people who I trust on the subject of API design like I do Phil Sturgeon. He has been a prominent speaker both online and at numerous conferences, covering a variety of problems, solutions, and approaches in the API design domain. In one of his recent blog\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/12\/dfd.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":16471,"url":"https:\/\/mamchenkov.net\/wordpress\/2012\/07\/13\/ultimate-guide-for-css-support-in-email-clients\/","url_meta":{"origin":25932,"position":2},"title":"Ultimate guide for CSS support in email clients","author":"Leonid Mamchenkov","date":"July 13, 2012","format":"link","excerpt":"Ultimate guide for CSS support in email clients Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client. We've put together this guide to save you\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":27365,"url":"https:\/\/mamchenkov.net\/wordpress\/2017\/02\/26\/modular-css-block-element-modifier\/","url_meta":{"origin":25932,"position":3},"title":"Modular CSS : Block, Element, Modifier","author":"Leonid Mamchenkov","date":"February 26, 2017","format":false,"excerpt":"I don't do a lot of front-end work these days, but I am genuinely interested in approaches that help build modular systems, especially when the subject is something as messy and as context-dependent as CSS. Recently, I came across the Block-Element-Modifier approach, aka BEM, which I find interesting. If you\u2019re\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":28444,"url":"https:\/\/mamchenkov.net\/wordpress\/2018\/03\/22\/lesser-known-css-quirks-advanced-tips\/","url_meta":{"origin":25932,"position":4},"title":"Lesser known CSS quirks & advanced tips","author":"Leonid Mamchenkov","date":"March 22, 2018","format":false,"excerpt":"\"Lesser known CSS quirks & advanced tips\" is a collection of some really weird CSS features and behaviors.\u00a0 These are good to know, as sometimes they can shed some light on strange results or help with implementation of a particular design feature, where no other options are applicable.","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/mamchenkov.net\/wordpress\/wp-content\/uploads\/2018\/03\/css-is-awesome-500x389.jpg?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":18839,"url":"https:\/\/mamchenkov.net\/wordpress\/2013\/11\/23\/wordpress-3-8-plans-responsive-redesign-of-admin-area\/","url_meta":{"origin":25932,"position":5},"title":"WordPress 3.8 plans responsive redesign of admin area","author":"Leonid Mamchenkov","date":"November 23, 2013","format":false,"excerpt":"WordPress 3.8 beta 1 has been announced a couple of days ago. \u00a0As always, lots of fixes and improvements are making their way to the new version. \u00a0But for me personally, the major change is the planned redesign of the admin area with responsive layout and support for mobile: The\u2026","rel":"","context":"In "All"","block_context":{"text":"All","link":"https:\/\/mamchenkov.net\/wordpress\/category\/general\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/25932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/comments?post=25932"}],"version-history":[{"count":0,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/posts\/25932\/revisions"}],"wp:attachment":[{"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/media?parent=25932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/categories?post=25932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/tags?post=25932"},{"taxonomy":"keyring_services","embeddable":true,"href":"https:\/\/mamchenkov.net\/wordpress\/wp-json\/wp\/v2\/keyring_services?post=25932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}