February 24th: Claws, Cards, and Cats
Your clicks ripple through a floating sea of grid lines in this interactive Three.js Pen from Kevin Levron. Try dragging the grid, too!
#CodePenChallenge: Shape and Size
We worked with shape and size for week three of February 2020 Elements of Design challenge. Check out the Pens from the challenge, including jh3y's magical "Cursor Star Trails w/GSAP".
Time and Relative Dimension in Space
Cyd Stumpel takes you on a trip in a CSS TARDIS in this Doctor Who inspired Pen.Sponsored:
React for Beginners
It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!
Full Moon in Paris?
Paulina Hetman's beautiful nighttime scene includes a real moon phase calendar for 2020. Don't forget to say hello to the curious cat on the windowsill!
Pagination with Morphing Numbers
Page numbers transform from a dot to the number in this super-smooth pagination animation from Mikael Ainalem.
Pure CSS Claw Crane
Try your luck with this incredibly realistic "claw machine that is powered by CSS transitions, :active, high specificity, and a hidden checkbox" from Jon Kantner.
CodePen Radio #256: Browsing Updates
Klare, Stephen, and Marie talk about recent changes to browsing CodePen and how it makes everything faster and less likely to start a fire on your laptop.
Schools of Fish
Emoji fish swim through a sunlit sea in this tranquil Pen from Scott Weaver. Pop open the dat.gui controls up top to change the fish species and control the school size to create your perfect in-browser aquarium scene.Sponsored:
Smashing Conf SF 2020
Let’s rock’n’roll! For SmashingConf SF 2020, April 21–22, we’re bringing back two full days packed with front-end, UX and all that jazz! Live sessions on performance, accessibility, interface design, copywriting, designing for emotion, debugging and fancy CSS/JS techniques — and a few surprises along the way.
One-div-8Bit Playing Card
Simone Giannangeli recreates a playing card design by Michael B. Myers Jr. in a single div with a little help from CSS box-shadow.
Kasper De Bruyne shares a fun 404 page concept, perfect for when your visitors are lost in space!
halvves shares a neumorphic radio button concept with a bit of a bubble wrap vibe.
Luciano Felix sets the browser ablaze with a "canvas generative flame made with trigonometry functions".