The latest articles on DEV Community by CSS Weekly (@cssweekly). https://dev.to/cssweekly https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F786428%2Fb844485f-33a0-4ffd-a031-f9fe039e416f.jpg https://dev.to/cssweekly en CSS Weekly Wed, 05 Jan 2022 14:18:38 +0000 https://dev.to/cssweekly/mindbending-christmas-art-created-with-css-javascript-280d https://dev.to/cssweekly/mindbending-christmas-art-created-with-css-javascript-280d <p>Holidays might be behind us, but that doesn't mean that we can't re‑experience some of that wonderful holiday spirit with CSS and JavaScript.</p> <h2> CSS Swinging Christmas Tree </h2> <p>Author: <a href="https://twitter.com/Osorpenke" rel="noopener noreferrer">Zed Dash</a><br> Technique: CSS</p> <p><iframe height="600" src="https://codepen.io/z-/embed/xxbrEbL?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> CSS (Cascading Style Snow-Globe) </h2> <p>Author: <a href="https://www.alvaromontoro.com/" rel="noopener noreferrer">Alvaro Montoro</a> / <a class="mentioned-user" href="https://dev.to/alvaromontoro">@alvaromontoro</a> <br> Technique: CSS</p> <p><iframe height="600" src="https://codepen.io/alvaromontoro/embed/jOGLeJV?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Snow Globe With CSS Animation Using even/odd Selectors </h2> <p>Author: <a href="https://monica.dev/" rel="noopener noreferrer">Monica Powell</a><br> Technique: CSS &amp; SVG</p> <p><iframe height="600" src="https://codepen.io/M0nica/embed/poWRqMd?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> The Hidden Gifts </h2> <p>Author: <a href="https://elsemeow.glitch.me/" rel="noopener noreferrer">Maxim Belov</a> / <a class="mentioned-user" href="https://dev.to/maximbelyakov">@maximbelyakov</a> <br> Technique: CSS &amp; JavaScript</p> <p><iframe height="600" src="https://codepen.io/elsemeow/embed/mdrrZPe?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Holidays Are Coming - 3D CSS Truck 🎅🎄 </h2> <p>Author: <a href="https://jhey.dev/" rel="noopener noreferrer">Jhey Tompkins</a> / <a class="mentioned-user" href="https://dev.to/jh3y">@jh3y</a> <br> Technique: CSS &amp; JavaScript</p> <p><iframe height="600" src="https://codepen.io/jh3y/embed/MWjyoLY?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Merry Chris-Morph! </h2> <p>Author: <a href="https://gannon.tv/" rel="noopener noreferrer">Chris Gannon</a><br> Technique: JavaScript (GSAP)</p> <p><iframe height="600" src="https://codepen.io/chrisgannon/embed/rNGwWdd?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Wavy Snowman </h2> <p>Author: <a href="https://pokecoder.hashnode.dev/" rel="noopener noreferrer">Ale Thomas</a><br> Technique: CSS</p> <p><iframe height="600" src="https://codepen.io/pokecoder/embed/abLLwQM?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Sleeping Santa </h2> <p>Author: Chhavi Khandelwal / <a class="mentioned-user" href="https://dev.to/chhavikhandelwal">@chhavikhandelwal</a> <br> Technique: CSS</p> <p><iframe height="600" src="https://codepen.io/ChhaviKhandelwal/embed/VwMYLVa?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Santa Was Here </h2> <p>Author: Paulina Hetman<br> Technique: CSS</p> <p><iframe height="600" src="https://codepen.io/pehaa/embed/OJxgKbE?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <p>Have you found or created some fascinating Christmas art using CSS or JavaScript? Please share it in the comments below!</p> <p><a href="https://zoranjambor.com" rel="noopener noreferrer">Zoran Jambor</a></p> <p>Join 33,000+ developers &amp; designers and <a href="https://css-weekly.com?utm_source=Dev.to&amp;utm_campaign=Christmas&amp;utm_medium=web" rel="noopener noreferrer">subscribe to CSS Weekly</a> to receive the latest news related to CSS directly into your inbox.</p> css codepen cssart