{"id":12924,"date":"2017-03-21T09:07:17","date_gmt":"2017-03-20T23:07:17","guid":{"rendered":"https:\/\/codemyui.com\/?p=12924"},"modified":"2018-05-16T16:58:49","modified_gmt":"2018-05-16T06:58:49","slug":"cross-off-checklist","status":"publish","type":"post","link":"https:\/\/codemyui.com\/cross-off-checklist\/","title":{"rendered":"Cross It Off Checklist"},"content":{"rendered":"<p>Looking to add a fancy <a href=\"https:\/\/codemyui.com\/tag\/to-do-list\/\">checklist\/to-do list<\/a> in your next web design project? This checklist with the ability to visually cross off items with a <a href=\"https:\/\/codemyui.com\/tag\/click-animation\/\">click,<\/a> designed by Alyssa Williams, might just be the thing for you. <\/p>\n<p><!--more--><\/p>\n<p>If you are having trouble with the pen, try the archived copy on <a href=\"https:\/\/gist.github.com\/CodeMyUI\/0fbbd51beab7d88373ea52b0d16cf3c3\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>Checklist Snippet<\/h2>\n<p class='codepen'  data-height='757' data-theme-id='0' data-slug-hash='jbWLmZ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen To-Do List by Alyssa (@alyssawilliams) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Looking to add a fancy checklist\/to-do list in your next web design project? This checklist with the ability to visually cross off items with a click, designed by Alyssa Williams, might just be the thing for you.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/cross-off-checklist\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":12940,"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":false,"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":[7644055,36516635,13170349,21858],"class_list":["post-12924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-check-box","tag-click-animation","tag-input-field","tag-to-do-list","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/to-do.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":26756,"url":"https:\/\/codemyui.com\/button-to-a-list-animation\/","url_meta":{"origin":12924,"position":0},"title":"Button to a List Animation","author":"Saijo George","date":"August 8, 2018","format":false,"excerpt":"This is a fancy list that appears as a button and on click, it transforms into a list and on a second click, the list is hidden again. It was designed by Colin Horn. If you are having trouble with the pen, try the archived copy on GitHub Button to\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Button to a List Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2018\/08\/Button-to-a-List-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29181,"url":"https:\/\/codemyui.com\/minimal-todo-list-design-snippet\/","url_meta":{"origin":12924,"position":1},"title":"Minimal ToDo List Design Snippet","author":"Saijo George","date":"January 9, 2020","format":false,"excerpt":"This is a very minimal design for a to-do list. You have a field where you can add more items to your list and when you click on the x next to an existing item in the list it's deleted from the list. If you are having trouble with the\u2026","rel":"","context":"In \"to do list\"","block_context":{"text":"to do list","link":"https:\/\/codemyui.com\/tag\/to-do-list\/"},"img":{"alt_text":"Minimal ToDo List Design Snippet","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Minimal-ToDo-List-Design-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Minimal-ToDo-List-Design-Snippet.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Minimal-ToDo-List-Design-Snippet.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Minimal-ToDo-List-Design-Snippet.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29230,"url":"https:\/\/codemyui.com\/directory-list-with-collapsible-nested-folders-and-files\/","url_meta":{"origin":12924,"position":2},"title":"Directory List With Collapsible Nested Folders and Files","author":"Saijo George","date":"January 13, 2020","format":false,"excerpt":"A simple but elegant directory list with files and folders designed by Alex Raven. You can click on the folders to open and close them. If you are having trouble with the pen, try the archived copy on GitHub Directory List Snippet","rel":"","context":"In \"file structure\"","block_context":{"text":"file structure","link":"https:\/\/codemyui.com\/tag\/file-structure\/"},"img":{"alt_text":"Directory List With Collapsible Nested Folders and Files","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Directory-List-With-Collapsible-Nested-Folders-and-Files.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Directory-List-With-Collapsible-Nested-Folders-and-Files.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Directory-List-With-Collapsible-Nested-Folders-and-Files.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2020\/01\/Directory-List-With-Collapsible-Nested-Folders-and-Files.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":13058,"url":"https:\/\/codemyui.com\/curtain-dropdown-list-effect\/","url_meta":{"origin":12924,"position":3},"title":"Curtain Dropdown List Effect","author":"Hima Vincent","date":"March 22, 2017","format":false,"excerpt":"A button which clicked on drops down a list that can act as a navigation menu. It was designed by John Choura Jr. If you are having trouble with the pen, try the archived copy on GitHub Curtain Dropdown Snippet","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Curtain Dropdown List Effect","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/open-close-drawer.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/open-close-drawer.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/open-close-drawer.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/open-close-drawer.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25558,"url":"https:\/\/codemyui.com\/strike-off-todo-list-animation\/","url_meta":{"origin":12924,"position":4},"title":"Strike Off ToDo List Animation","author":"Saijo George","date":"November 21, 2017","format":false,"excerpt":"I recently came across a beautiful to-do list strike off animation designed by Gal Shir and Shaw recreated that effect in CSS. When you click on the list item the square checkbox slides away and strikes off the text. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"Strike Off ToDo List Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/Strike-Off-ToDo-List-Animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27357,"url":"https:\/\/codemyui.com\/load-multiple-videos-from-an-unordered-list\/","url_meta":{"origin":12924,"position":5},"title":"Load Multiple Videos from an Unordered List","author":"Saijo George","date":"May 23, 2019","format":false,"excerpt":"With this snippet designed by Corey Roth you have an unordered list on the right and a video on the left. When you click on each item in the list it loads up a different video on the left-hand side. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"list\"","block_context":{"text":"list","link":"https:\/\/codemyui.com\/tag\/list\/"},"img":{"alt_text":"Load Multiple Videos from an Unordered List","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Load-Multiple-Videos-from-an-Unordered-List.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Load-Multiple-Videos-from-an-Unordered-List.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Load-Multiple-Videos-from-an-Unordered-List.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/05\/Load-Multiple-Videos-from-an-Unordered-List.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\/12924","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=12924"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/12924\/revisions"}],"predecessor-version":[{"id":25885,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/12924\/revisions\/25885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/12940"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=12924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=12924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=12924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}