GitHub<\/a><\/p>\n\nSee the Pen Pure CSS Christmas Lights by Toby (@tobyj) on CodePen.<\/p>\n\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\nRead More<\/a>","protected":false},"author":2,"featured_media":3945,"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,14608],"class_list":["post-3942","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-christmas","tag-list","col-sm-6"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-lights-in-pure-css.gif?fit=880%2C440&ssl=1","jetpack-related-posts":[{"id":4842,"url":"https:\/\/codemyui.com\/laughing-santa-claus-in-pure-css\/","url_meta":{"origin":3942,"position":0},"title":"Laughing Santa Claus in Pure CSS","author":"Hima Vincent","date":"December 18, 2016","format":false,"excerpt":"Using this Pure CSS snippet you can show a giggling Santa Claus in your Christmas web pages and emails. It was designed by Alireza Sheikholmolouki. If you are having trouble with the pen, try the archived copy on GitHub Giggling Santa Claus Snippet","rel":"","context":"In \"animation\"","block_context":{"text":"animation","link":"https:\/\/codemyui.com\/tag\/animation\/"},"img":{"alt_text":"Laughing Santa Claus in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-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\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/laughing-santa-claus-in-pure-css.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":3942,"position":1},"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":5000,"url":"https:\/\/codemyui.com\/responsive-multicoloured-xmas-fairy-lights\/","url_meta":{"origin":3942,"position":2},"title":"Responsive Multicoloured X’mas Fairy Lights","author":"Hima Vincent","date":"December 28, 2016","format":false,"excerpt":"This is a pure CSS responsive multicoloured x'mas fairy lights designed by Chris Doble. The number of arches for the lights increase and decrease with the size of the browser window. If you are having trouble with the pen, try the archived copy on GitHub X'mas Fairy Lights Snippet","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Responsive Multicoloured X'mas Fairy Lights","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/responsive-multicoloured-xmas-fairy-lights.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\/responsive-multicoloured-xmas-fairy-lights.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/responsive-multicoloured-xmas-fairy-lights.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/12\/responsive-multicoloured-xmas-fairy-lights.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":3942,"position":3},"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":3963,"url":"https:\/\/codemyui.com\/christmas-background-pure-css\/","url_meta":{"origin":3942,"position":4},"title":"Christmas Background in Pure CSS","author":"Hima Vincent","date":"November 9, 2016","format":false,"excerpt":"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\u2026","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"Christmas Background in Pure CSS","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2016\/11\/christmas-background-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-background-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-background-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-background-in-pure-css.gif?fit=880%2C440&ssl=1&resize=700%2C500 2x"},"classes":[]},{"id":25235,"url":"https:\/\/codemyui.com\/pure-css-flat-santa-icon\/","url_meta":{"origin":3942,"position":5},"title":"Pure CSS Flat Santa Icon","author":"Saijo George","date":"November 24, 2017","format":false,"excerpt":"Here is a Pure CSS flat Santa icon designed by Ali Khalilifar. This will look good on you Christmas themed webpage. If you are having trouble with the pen, try the archived copy on GitHub Flat Santa Icon Snippet","rel":"","context":"In \"christmas\"","block_context":{"text":"christmas","link":"https:\/\/codemyui.com\/tag\/christmas\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-flat-santa-icon.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-flat-santa-icon.gif?fit=880%2C440&ssl=1&resize=350%2C250 1x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-flat-santa-icon.gif?fit=880%2C440&ssl=1&resize=525%2C375 1.5x, https:\/\/i0.wp.com\/codemyui.com\/wp-content\/uploads\/2017\/11\/pure-css-flat-santa-icon.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\/3942","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=3942"}],"version-history":[{"count":1,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3942\/revisions"}],"predecessor-version":[{"id":25998,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/posts\/3942\/revisions\/25998"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media\/3945"}],"wp:attachment":[{"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/media?parent=3942"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/categories?post=3942"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codemyui.com\/wp-json\/wp\/v2\/tags?post=3942"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}