{"id":3963,"date":"2016-11-09T19:55:47","date_gmt":"2016-11-09T09:55:47","guid":{"rendered":"http:\/\/codemyui.com\/?p=3963"},"modified":"2018-05-17T09:51:55","modified_gmt":"2018-05-16T23:51:55","slug":"christmas-background-pure-css","status":"publish","type":"post","link":"https:\/\/codemyui.com\/christmas-background-pure-css\/","title":{"rendered":"Christmas Background in Pure CSS"},"content":{"rendered":"<p>This is something that you can use as a background of your website. It will especially work great at <a href=\"https:\/\/codemyui.com\/category\/events\/christmas\/\">Christmas time<\/a>. In this code snippet, we use <a href=\"https:\/\/codemyui.com\/tag\/pure-css\/\">CSS<\/a> to create a tree, a snowman, a bauble and a snowflake. It is repeated over and over to have a nice background effect for the website. Designed by <a href=\"https:\/\/twitter.com\/dervondenbergen\" target=\"_blank\" rel=\"noopener\">Felix De Montis<\/a>.<\/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\/e099546d75ed7ed5fbf433b5031d2291\" target=\"_blank\" rel=\"noopener\">GitHub<\/a><\/p>\n<p class='codepen'  data-height='625' data-theme-id='0' data-slug-hash='IkpdJ' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2' data-preview='true'>\nSee the Pen wrapping paper by Felix De Montis (@dervondenbergen) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>This is something that you can use as a background of your website. It will especially work great at Christmas time. In this code snippet, we use CSS to create a tree, a snowman, a bauble and a snowflake. It is repeated over and over to have a nice background effect for the website. Designed&hellip;<\/p>\n<a class=\"read-more-link\" href=\" https:\/\/codemyui.com\/christmas-background-pure-css\/ \">Read More<\/a>","protected":false},"author":2,"featured_media":3966,"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,30305495],"class_list":["post-3963","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-christmas","tag-hero-section","tag-pure-css","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-in-pure-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":14007,"url":"https:\/\/codemyui.com\/likehate-toggle-switch\/","url_meta":{"origin":3963,"position":0},"title":"A Like\/Hate Toggle Switch","author":"Hima Vincent","date":"March 27, 2017","format":false,"excerpt":"A checkbox designed to look like a toggle switch that you can switch to like or hate mode, designed by Felix De Montis. If you are having trouble with the pen, try the archived copy on GitHub Toggle Switch Snippet","rel":"","context":"In \"check box\"","block_context":{"text":"check box","link":"https:\/\/codemyui.com\/tag\/check-box\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.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\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/03\/love-hate-toggle.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":4564,"url":"https:\/\/codemyui.com\/falling-snowflake-background-animation-pure-css\/","url_meta":{"origin":3963,"position":1},"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":4878,"url":"https:\/\/codemyui.com\/single-div-pure-css-christmas-tree\/","url_meta":{"origin":3963,"position":2},"title":"Single Div Pure CSS Christmas Tree","author":"Hima Vincent","date":"December 18, 2016","format":false,"excerpt":"This is a Christmas tree that you can use on your website. This animation is created in pure CSS. You can see a minimalist tree with a tree topper in a circular space with snow falling in the background. If you are having trouble with the pen, try the archived\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Single Div Pure CSS Christmas Tree","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/single-div-pure-css-christmas-tree.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25232,"url":"https:\/\/codemyui.com\/pure-css-3d-christmas-tree-animation\/","url_meta":{"origin":3963,"position":3},"title":"Pure CSS 3D Christmas Tree Animation","author":"Saijo George","date":"December 14, 2017","format":false,"excerpt":"You can use this pure CSS snippet to add a fancy christmas tree animation to you webpage, it was designed by Ana Travas. If you are having trouble with the pen, try the archived copy on GitHub CSS Christmas Tree 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\/pure-css-3d-christmas-tree-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\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-3d-christmas-tree-animation.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":3942,"url":"https:\/\/codemyui.com\/christmas-lights-pure-css\/","url_meta":{"origin":3963,"position":4},"title":"Christmas Lights in Pure CSS","author":"Hima Vincent","date":"November 8, 2016","format":false,"excerpt":"Everyone loves their Christmas lights during the festive season and with this snippet you can add one in pure CSS to your web pages. This was designed by Toby. With this snippet, you turn an unordered list into fairly lights that hangs from the top of the page. If you\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"christmas-lights-in-pure-css","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-lights-in-pure-css.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\/christmas-lights-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-lights-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-lights-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":27409,"url":"https:\/\/codemyui.com\/shooting-star-background-in-pure-css\/","url_meta":{"origin":3963,"position":5},"title":"Shooting Star Background in Pure CSS","author":"Saijo George","date":"June 9, 2019","format":false,"excerpt":"If you want to add a hero section with some fancy looking shooting stars in the background this snippet by Yusuke Nakaya is just what you need. If you are having trouble with the pen, try the archived copy on GitHub Shooting Star Background Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Shooting Star Background in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/06\/Shooting-Star-Background-in-Pure-CSS-1.gif?fit=880%2C440&ssl=1&resize=350%2C250","width":350,"height":250,"srcset":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/06\/Shooting-Star-Background-in-Pure-CSS-1.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/06\/Shooting-Star-Background-in-Pure-CSS-1.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2019\/06\/Shooting-Star-Background-in-Pure-CSS-1.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\/3963","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=3963"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3963\/revisions"}],"predecessor-version":[{"id":25997,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3963\/revisions\/25997"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/3966"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=3963"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=3963"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=3963"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}