{"id":17373,"date":"2017-05-29T11:07:34","date_gmt":"2017-05-29T01:07:34","guid":{"rendered":"https:\/\/codemyui.com\/?p=17373"},"modified":"2018-05-16T16:43:35","modified_gmt":"2018-05-16T06:43:35","slug":"add-8-bit-snow-website","status":"publish","type":"post","link":"https:\/\/codemyui.com\/add-8-bit-snow-website\/","title":{"rendered":"Add  8-bit Snow to Your Website"},"content":{"rendered":"<p>We have seen snippets to add snow w to your <a href=\"https:\/\/codemyui.com\/falling-snowflake-background-animation-pure-css\/\">website<\/a> or to <a href=\"https:\/\/codemyui.com\/falling-snow-email\/\">emails<\/a>, but what if you want a add <a href=\"https:\/\/codemyui.com\/tag\/retro\/\">retro 8-bit themed<\/a> snowflakes to your web page? Well, that is where this snippet by <a href=\"https:\/\/twitter.com\/eightarmshq\" target=\"_blank\" rel=\"noopener\">Eight Arms<\/a> comes in. <\/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\/564428561904459bb1a6f501dd408da8\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<h2>8-bit Snow Snippet<\/h2>\n<p class='codepen'  data-height='495' data-theme-id='0' data-slug-hash='PbPQyd' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen 8bit Snow by eightarmshq (@EightArmsHQ) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>We have seen snippets to add snow w to your website or to emails, but what if you want a add retro 8-bit themed snowflakes to your web page? Well, that is where this snippet by Eight Arms comes in.<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/add-8-bit-snow-website\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":17378,"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":[15607,38934147,1445],"class_list":["post-17373","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-christmas","tag-hero-section","tag-retro","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/05\/add-8-bit-snow-to-your-website.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4564,"url":"https:\/\/codemyui.com\/falling-snowflake-background-animation-pure-css\/","url_meta":{"origin":17373,"position":0},"title":"Falling Snowflake Background Animation in Pure CSS","author":"Hima Vincent","date":"November 25, 2016","format":false,"excerpt":"This is a great animation that you can add on your website during Christmas time. In this animation, you can see falling snowflake to your website with a slight wind effect to it time to time. Designed by Nicky Christensen. If you are having trouble with the pen, try the\u2026","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Pure CSS Snow Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/pure-css-snow-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/pure-css-snow-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/pure-css-snow-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/pure-css-snow-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":29017,"url":"https:\/\/codemyui.com\/christmas-button-with-some-snow-on-top\/","url_meta":{"origin":17373,"position":1},"title":"Christmas Button with some Snow on Top","author":"Saijo George","date":"December 10, 2019","format":false,"excerpt":"How about a Xmas themed button for you website with a few patches of snow on the top? It will be perfect for this holiday season. This fancy button in was designed by vijender on Codepen. If you are having trouble with the pen, try the archived copy on GitHub\u2026","rel":"","context":"In \"button\"","block_context":{"text":"button","link":"https:\/\/codemyui.com\/tag\/button\/"},"img":{"alt_text":"Christmas Button With Some Snow On Top","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Christmas-Button-With-Some-Snow-On-Top.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Christmas-Button-With-Some-Snow-On-Top.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Christmas-Button-With-Some-Snow-On-Top.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/12\/Christmas-Button-With-Some-Snow-On-Top.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3981,"url":"https:\/\/codemyui.com\/customizable-sparkle-text-animation\/","url_meta":{"origin":17373,"position":2},"title":"Customizable Sparkle Text Animation","author":"Hima Vincent","date":"November 9, 2016","format":false,"excerpt":"In this snippet, you get a text animation along with a snowy background. You can customize the text to add your own message and it comes up as a sparkly text and there is falling snow in the background that moves little towards the right from time to time giving\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Customizable Sparkle Text Animation","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/customisable-sparkle-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/customisable-sparkle-text-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/customisable-sparkle-text-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/customisable-sparkle-text-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":30435,"url":"https:\/\/codemyui.com\/multiple-book-listing-page-layout\/","url_meta":{"origin":17373,"position":3},"title":"Multiple Book Listing Page Layout","author":"Hima Vincent","date":"June 10, 2021","format":false,"excerpt":"Code by: NVC If you are having trouble with the pen, try the archived copy on GitHub. Multiple Book Listing Page Snippet","rel":"","context":"In \"book inspired\"","block_context":{"text":"book inspired","link":"https:\/\/codemyui.com\/tag\/css-flip-book\/"},"img":{"alt_text":"Multiple Book Listing Page Layout","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Multiple-Book-Listing-Page-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Multiple-Book-Listing-Page-Layout.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Multiple-Book-Listing-Page-Layout.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2021\/06\/Multiple-Book-Listing-Page-Layout.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":28419,"url":"https:\/\/codemyui.com\/comic-book-inspired-dotted-background-text-with-a-dark-shadow-background\/","url_meta":{"origin":17373,"position":4},"title":"Comic book inspired dotted background text with a dark shadow background","author":"Saijo George","date":"October 8, 2019","format":false,"excerpt":"Comic books have a unique style when it comes to text and with this SVG snippet by Gabriele Corti. You can add a really retro comic book inspired dotted background text with a dark shadow background to your webpages. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"comic book\"","block_context":{"text":"comic book","link":"https:\/\/codemyui.com\/tag\/comic-book\/"},"img":{"alt_text":"Comic book inspired dotted background text with a dark shadow background","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Comic-book-inspired-dotted-background-text-with-a-dark-shadow-background.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Comic-book-inspired-dotted-background-text-with-a-dark-shadow-background.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Comic-book-inspired-dotted-background-text-with-a-dark-shadow-background.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/10\/Comic-book-inspired-dotted-background-text-with-a-dark-shadow-background.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25238,"url":"https:\/\/codemyui.com\/snowfall-background-animation-using-canvas\/","url_meta":{"origin":17373,"position":5},"title":"Snowfall background animation using canvas","author":"Saijo George","date":"December 18, 2017","format":false,"excerpt":"A Christmas themed snippet designed by Hektor Wallin, where you have a snowfall animation in a canvas element. If you are having trouble with the pen, try the archived copy on GitHub Snowfall Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/snow-fall-background-animation-using-canvas.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\/snow-fall-background-animation-using-canvas.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/snow-fall-background-animation-using-canvas.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/snow-fall-background-animation-using-canvas.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\/17373","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=17373"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17373\/revisions"}],"predecessor-version":[{"id":25803,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/17373\/revisions\/25803"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/17378"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=17373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=17373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=17373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}