{"id":30354,"date":"2021-06-09T23:21:47","date_gmt":"2021-06-09T13:21:47","guid":{"rendered":"https:\/\/codemyui.com\/?p=30354"},"modified":"2021-06-09T23:21:52","modified_gmt":"2021-06-09T13:21:52","slug":"various-modern-neumorphic-elements-design","status":"publish","type":"post","link":"https:\/\/codemyui.com\/various-modern-neumorphic-elements-design\/","title":{"rendered":"Various Modern Neumorphic Elements Design"},"content":{"rendered":"\n

Code by<\/strong>: Maria M. Mu\u00f1oz<\/a><\/p>\n\n\n\n

If you are having trouble with the pen, try the archived copy on GitHub<\/a>.<\/p>\n\n\n\n

Neumorphic Elements Design Snippet<\/h2>\n\n\n

\nSee the Pen Neumorphic Elements by Maria M. Mu\u00f1oz (@myacode) on CodePen.<\/p>\n\n\n\n\n

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

Code by: Maria M. Mu\u00f1oz If you are having trouble with the pen, try the archived copy on GitHub. Neumorphic Elements Design Snippet<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":30422,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","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},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[608602392,239174062,94913,177948406,124955,313764,5303403,16926259,11731763,4920130,10970854],"class_list":["post-30354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-neumorphic-design","tag-accordion-tabs","tag-button","tag-card-ui","tag-clock","tag-hotspot","tag-radio-button","tag-range-slider","tag-search-field","tag-text-field","tag-toggle-switch","has-post-video","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Various-Modern-Neumorphic-Elements-Design.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":29412,"url":"https:\/\/codemyui.com\/neumorphic-design-inspired-radio-buttons\/","url_meta":{"origin":30354,"position":0},"title":"Neumorphic Design Inspired Radio Buttons","author":"Saijo George","date":"February 7, 2020","format":false,"excerpt":"Here is another neumorphic design inspired CSS only radio button snippet that you can use in your web projects. If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Radio Button Snippet","rel":"","context":"In \"radio button\"","block_context":{"text":"radio button","link":"https:\/\/codemyui.com\/tag\/radio-button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Design-Inspired-Radio-Buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Design-Inspired-Radio-Buttons.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Design-Inspired-Radio-Buttons.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Design-Inspired-Radio-Buttons.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29425,"url":"https:\/\/codemyui.com\/neumorphic-button-click-hover-and-clicked-design\/","url_meta":{"origin":30354,"position":1},"title":"Neumorphic Button Click Hover and Clicked Design","author":"Saijo George","date":"February 7, 2020","format":false,"excerpt":"Loving the neumorphism trend in web design? You will love these various states for buttons in pure CSS: hover, click and clicked. If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Button Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Button-Click-Hover-and-Clicked-Design.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Button-Click-Hover-and-Clicked-Design.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Button-Click-Hover-and-Clicked-Design.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Button-Click-Hover-and-Clicked-Design.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29627,"url":"https:\/\/codemyui.com\/labyrinth-style-balancing-ball-neumorphic-toggle\/","url_meta":{"origin":30354,"position":2},"title":"Labyrinth Style Balancing Ball Neumorphic Toggle","author":"Saijo George","date":"April 20, 2020","format":false,"excerpt":"Code by: Adam Kuhn from Codepen If you are having trouble with the pen, try the archived copy on GitHub Balancing Ball Neumorphic Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Labyrinth Style Balancing Ball Neumorphic Toggle","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Labyrinth-Style-Balancing-Ball-Neumorphic-Toggle.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29418,"url":"https:\/\/codemyui.com\/pure-css-neumorphic-design-toggle-switch\/","url_meta":{"origin":30354,"position":3},"title":"Pure CSS Neumorphic Design Toggle Switch","author":"Saijo George","date":"February 7, 2020","format":false,"excerpt":"Here is another neumorphic design inspired input field design for you, this time it's a toggle switch with a nice micro interaction when you click on it. If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Toggle Snippet","rel":"","context":"In \"toggle switch\"","block_context":{"text":"toggle switch","link":"https:\/\/codemyui.com\/tag\/toggle-switch\/"},"img":{"alt_text":"Pure CSS Neumorphic Design Toggle Switch","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Pure-CSS-Neumorphic-Design-Toggle-Switch.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29706,"url":"https:\/\/codemyui.com\/neumorphic-inspired-search-bar\/","url_meta":{"origin":30354,"position":4},"title":"Neumorphic Inspired Search Bar","author":"Saijo George","date":"April 22, 2020","format":false,"excerpt":"Code by: Tran Dinh Trung from Codepen If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Search Field Snippet","rel":"","context":"In \"neumorphic design\"","block_context":{"text":"neumorphic design","link":"https:\/\/codemyui.com\/tag\/neumorphic-design\/"},"img":{"alt_text":"Neumorphic Inspired Search Bar","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Neumorphic-Inspired-Search-Bar.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Neumorphic-Inspired-Search-Bar.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Neumorphic-Inspired-Search-Bar.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/04\/Neumorphic-Inspired-Search-Bar.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29489,"url":"https:\/\/codemyui.com\/neumorphic-text-effect\/","url_meta":{"origin":30354,"position":5},"title":"Neumorphic Text Effect","author":"Saijo George","date":"February 17, 2020","format":false,"excerpt":"If you are a fan of the Neumorphic design trend then you will love this text effect by Adam Kuhn. It's a simple neumorphic design inspired text effect. If you are having trouble with the pen, try the archived copy on GitHub Neumorphic Text Snippet","rel":"","context":"In \"neumorphic design\"","block_context":{"text":"neumorphic design","link":"https:\/\/codemyui.com\/tag\/neumorphic-design\/"},"img":{"alt_text":"Neumorphic Text Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Text-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Text-Effect.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Text-Effect.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/02\/Neumorphic-Text-Effect.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/30354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/comments?post=30354"}],"version-history":[{"count":4,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/30354\/revisions"}],"predecessor-version":[{"id":30423,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/30354\/revisions\/30423"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/30422"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=30354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=30354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=30354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}