CodeNewbie Community 🌱

Cover image for 10 Cool CodePen Demos (December 2023)
Álvaro Montoro
Álvaro Montoro

Posted on • Originally published at alvaromontoro.Medium

10 Cool CodePen Demos (December 2023)

snow globe christmas tree

Amit Sheen live streamed the whole process on YouTube (you can still watch it on his channel) for everyone to see how to create this 3D-looking Christmas tree with HTML and CSS.


Pixelated Background

This is a neat trick by Wakana Y.K.: placing a low resolution version of the image on top, and expanding it to occupy the same size as the original makes the browser pixelate it. Then, a mask on hover (updating the position with JS) does the rest. Ingenious and effective.


Fireworks

We have showcased several of Yuan Chuan’s CSS Doodles in this newsletter. This animated one is one of my favorites. The colors, the shapes, and the movement are perfectly in sync. Making this demo magical.


Happy Holidays! 2023

Another Christmas tree and another demo by Wakana Y.K. This time the 3D is generated using ThreeJS and the tree is interactive in a different way: drag the mouse around the screen to spin the tree.


WCCChallenge : Obscure

What attracts me to this demo by Tom Hinton is how random and weird (in a good way) it looks (something relatively common in Tom’s artistic pieces. A combination of shaders and meshes in ThreeJS.


Dots & Ring Loader — CSS

This is a hypnotic loader created in HTML and CSS by Josetxu. An interesting combination of animations create this effect, with dots moving while changing size (and z-index).


Stacked Avatars with hover effect

This is a really interesting effect with single images. Temani Afif, crops the pictures as you hover over the siblings. Can you figure out how it works based on the interaction? (Hint: it involves masks and CSS variables.)


Wow Winter Blanket

Another demo with ThreeJS and shaders. This time by Anna Zenn Scavenger. It was part of a CodePen weekly challenge about opposites. Move the mouse over the blanket to see it move smoothly.


CSS scroll-driven animation timer

Another cool example of how to use CSS scroll-driven animations to show an animated timer/progress indicator. This demo is by Ryan Mulligan. And even the numbers are animated! No JS whatsoever.


Pure CSS — Courage the Cowardly Dog

Courage the Cowardly Dog was a TV show from Cartoon Network… and believe it or not, it has been over 20 years since the show. Nostalgia + CSS Art? It had to make the list. Plus it is a nice implementation by maxi83c. And it has animations!


Check the previous month demos on: https://dev.to/alvaromontoro/10-cool-codepen-demos-november-2023-jj

Top comments (23)

Collapse
 
seohirecc profile image
SEOhirecc

Arzt Pflegeheim: MyDocPlus bietet einen spezialisierten ärztlichen Service für Pflegeheime an Arzt Pflegeheim , um eine optimale Gesundheitsversorgung für Bewohner sicherzustellen. Unsere erfahrenen Ärzte bieten regelmäßige Besuche vor Ort an, um medizinische Betreuung und Beratung zu gewährleisten. Mit einem ganzheitlichen Ansatz und maßgeschneiderten Behandlungsplänen unterstützen wir die Gesundheit und das Wohlbefinden der Pflegeheimbewohner. Besuchen Sie unsere Website, um mehr zu erfahren.

Collapse
 
annaw3 profile image
john devis

The term "audio installation" can encompass a wide range of things, from simple sound systems in homes and businesses to complex, immersive art installations. To give you a better understanding, I'll break it down into a few different categories:

Collapse
 
annaw3 profile image
john devis

Chemistry: In chemistry, "solution control" can refer to techniques used to maintain specific properties of a solution, such as pH, temperature, or concentration. This is often done using buffers, temperature control devices, or controlled addition of reagents.
Software development: In software development, "solution control" can refer to a system for managing and tracking changes to source code. This allows developers to collaborate on projects and revert to previous versions if needed. Examples of popular solution control systems include Git and Subversion.

Collapse
 
jasonroysd profile image
jasonroysd

"Wink Mod APK" from ranksapk.com offers users a modified version of the Wink app, providing access to premium features for free wink mod apk. This modded version enhances user experience with unlocked functionalities, including ad-free browsing and exclusive content. Experience the full potential of Wink with this modified APK, offering enhanced usability and access to premium content without any subscription fees.

Collapse
 
jasonroysd profile image
jasonroysd

For top-tier car detailing near you, trust Dennis Auto Details. Our skilled team offers comprehensive interior and exterior detailing services customized to your vehicle's requirements car detailing near me. With meticulous attention to detail and premium-quality products, we guarantee your car will look its best. Count on Dennis Auto Details for professional results and unparalleled convenience. Schedule your appointment today for a flawless finish!

Collapse
 
jamesmichael876 profile image
james

CodePen is a fantastic platform for web developers, designers, and creatives to showcase their skills and experiment with cutting-edge technologies. Every month, talented individuals from around the world share their innovative projects on CodePen, pushing the boundaries of web development. In this article, we'll explore 10 cool CodePen demos that have caught our attention in Cornhole Board Dimensions. These demos showcase creative design, impressive animations, and the latest web development trends, providing inspiration for your next project.

Collapse
 
jasonroysd profile image
jasonroysd

Nasz skup aut w Krakowie to profesjonalna firma, która oferuje szybki i uczciwy skup samochodów. Zapewniamy dogodne warunki współpracy, atrakcyjne ceny oraz kompleksową obsługę. Oferujemy skup samochodów używanych, powypadkowych, oraz aut z różnymi rodzajami usterek Skup aut Kraków. Nasz zespół skupu aut w Krakowie gwarantuje szybką wycenę, bezpieczny przebieg transakcji i terminową wypłatę gotówki. Skup aut w Krakowie to doskonałe rozwiązanie dla osób pragnących sprzedać swój samochód sprawnie i bezproblemowo. Skontaktuj się z nami już dziś!

Collapse
 
jasonroysd profile image
jasonroysd

In Sydney, Exposed Wolf stands out as a premier videographer, offering exceptional services to bring your vision to life. to explore their portfolio showcasing expertise in crafting visually stunning videos video agency sydney. With a focus on capturing the essence of your story, Exposed Wolf employs cutting-edge techniques and creative innovation. Whether for corporate projects, events, or promotional content, their dedicated team ensures high-quality videography that resonates with your audience. Trust Exposed Wolf in Sydney to transform your ideas into captivating visual narratives, delivering impactful and memorable video experiences.

Collapse
 
jasonroysd profile image
jasonroysd

GClubVips01 เป็นเว็บไซต์ที่ให้บริการเกมคาสิโนที่ดีที่สุดแบบตรงจาก GClub ผ่านทางเว็บไซต์เดียว ด้วยภาษาไทยที่ใช้งานง่าย มีหลายเกมให้เลือกเล่น gclubเว็บตรง, รวดเร็ว, และปลอดภัย สมัครสมาชิกและเข้าเล่นได้ทันทีผ่านลิงก์

Collapse
 
jasonroysd profile image
jasonroysd

Tailored for aspiring professional drivers, this comprehensive platform provides D1 theory test practice materials, hazard perception tests, and mock exams. Whether you're aiming for a career as a minibus or small vehicle driver d1 theory test practice, Theory Test UK offers essential tools to enhance your knowledge and ensure success on test day. Navigate through the intricacies of the D1 theory test with targeted preparation, empowering you to drive confidently and safely in the professional passenger transportation sector.

Collapse
 
jasonroysd profile image
jasonroysd

UFABET เว็บตรงที่นำเสนอประสบการณ์การพนันออนไลน์ที่ยอดเยี่ยมที่สุด ที่ คุณสามารถเข้าสู่บรรยากาศการเดิมพันที่น่าตื่นเต้นและเลือกเล่นเกมหลากหลาย ได้แก่ ฟุตบอล, คาสิโน UFABET เว็บตรง, สล็อต และอื่น ๆ ที่ท้าทายทุกรส. มีโอกาสชนะรางวัลมากมาย ร่วมสนุกที่นี่กับราคาที่เหมาะสมและบริการที่ยอดเยี่ยม. UFABET เป็นที่รู้จักในวงการพนันออนไลน์ไทย, ให้คุณประสบการณ์พนันที่น่าจดจำและน่าตื่นเต้นทุกครั้งที่เข้ามา.

Collapse
 
jasonroysd profile image
jasonroysd

Bicarbonaat, ook bekend als natriumbicarbonaat, heeft diverse toepassingen in huishoudens en industrieën. Het assortiment van OnlineChemicalien.nl biedt eenvoudige toegang tot productinformatie en maakt het gemakkelijk om kwalitatief bicarbonaat aan te schaffen bicarbonaat kopen. Vertrouw op OnlineChemicalien.nl als betrouwbare bron voor chemische producten en ontdek de veelzijdigheid van bicarbonaat voor diverse toepassingen. Profiteer van de kwaliteit aangeboden door OnlineChemicalien.nl en ontdek de brede mogelijkheden van bicarbonaat in verschillende sectoren.

Collapse
 
jasonroysd profile image
jasonroysd

Specializing in both residential and commercial removals, they efficiently handle a variety of items, from furniture to construction debris. Serving locally, Haul-Away LLC ensures prompt and eco-friendly disposal, contributing to a cleaner environment Junk removal near me. Their professional team guarantees a hassle-free experience, addressing your specific needs. Whether decluttering your home or managing waste from a construction project, trust Haul-Away LLC for convenient and responsible junk removal. Visit their website to find the nearest solution for a clutter-free space in your area.

Collapse
 
jasonroysd profile image
jasonroysd

Unleash the power of a captivating online presence with affordable web design services in San Diego, available at . I specialize in delivering high-quality, budget-friendly websites that cater to your unique needs Affordable Web Design Services in San Diego. From sleek portfolios to responsive business platforms, my designs blend aesthetics with functionality. Elevate your brand without breaking the bank, ensuring a professional and engaging online experience. Collaborate with me to bring your digital vision to life at an affordable cost.

Collapse
 
seohirecc profile image
SEOhirecc

Collaborate with skilled Cosmetic Chemists through Skin and Hair Manufacturing Hub. Our platform connects you with top-tier chemists specializing in formulating premium skincare and haircare products Cosmetic chemist. From innovative formulations to expert guidance, our partners provide a comprehensive approach to bringing your beauty brand's vision to life. Whether crafting a new line or optimizing existing products, our Cosmetic Chemist services offer tailored solutions. Benefit from industry-leading expertise, cutting-edge formulations, and a commitment to excellence. Elevate your beauty products with the expertise of Cosmetic Chemists. Visit our website today to explore the possibilities and enhance your brand's formulations.