April 20th: Animals, Art, and Animation
Sarah Fossheim recreates the iconic 80s Macintosh computer with some slick gradient work in CSS.Sponsored:
Learn the Cloud from Anywhere
The top AWS, GCP, and Azure cloud courses to level up your skills. Learn from anywhere through our online platform.
CodePen Radio #264: Community Roundup
Chris & Marie chat about what's going on in the community in the spring of 2020. A friendly, artistic vibe and a strong community come together to make a tough season a little brighter, and some new features make it even more fun to connect on CodePen.
Flutter on CodePen
Flutter has landed on CodePen! Now you can experiment with Google's UI toolkit for mobile, web, & desktop apps in a Pen.
Device unlock takes a dystopian turn in this animated SVG Pen from Luke Lincoln.
Pill Styled Radio Buttons
"Custom radio button style using only CSS (SCSS) by taking advantage of sibling selectors and the :checked psuedo class" from Håvard Brynjulfsen.
#CodePenChallenge: Art Direct an Image
For week two of the Images challenge, we asked you to art direct an image for responsive layouts. Check out our Collection of Pens from the challenge, including Kotaro Morooka's "Responsive Pokedex".Sponsored:
Free book! Modern Development on the JAMstack
Netlify already sets the standard for developing on the JAMstack but now they’ve literally written the book on it. Pick up a free digital copy of Modern Development on the JAMstack and you’ll most certainly level up your ability to craft super-fast websites with tips and tricks from no other than Mathias Biilmann and Phil Hawksworth.
Bridging SVG use Element for Styling and Animation
"CSS custom properties act as a bridge for the SVG shadow DOM to change the styling and even add animation. I've used GSAP here but you could also use CSS animations." From Pete Barr.
Responsive CSS Grid - Books
Andy Barefoot is back with another glorious grid! Resize the Pen to watch the layout adapt, and hover the books for a little bit of extra magic.
Initiating the Hack
"Here's a pure CSS animation of Sombra from Overwatch! I enjoyed this project since I applied new illustration techniques using clip-path, and skew(). the more I worked on this animation, the more I realized that I learn so much more about CSS and it's potential through animation." From Tee Diang.
jh3y gives you all the Mondrian you could ever want in this infinite-scrolling Pen, built in CodePen's new Vue editor!
Pure CSS "Eye"
Julia Miocene translates a Dribbble shot by Gleb Kuznetsov to CSS in this eye-popping animated Pen.
Low Poly Sheepfold
A solitary sheep inhabits their own little floating island in this adorable Pen from Yiting Liu, created with Three.js.