March 11th: Hearts, Hats, and Heroes
Boris Šehovac recreates the classic Rubik's cube in this playable Pen that's just as fun (and frustrating) as the real thing!Sponsored:
Testing that Teams love on Web + Mobile
Today orgs are balancing between faster time to market & flawless UX. See the future of test automation QA & Dev's love with a Free Trial.
CSS Heart Shaped Bee
Watch JustYourAverageOnion draw a lovely bee with CSS in this time-lapse live coding session on YouTube.
#CodePenChallenge: Coding Heroes
The March 2019 challenge is all about paying tribute to our heroes. Check out the Pens from week one, where we paid tribute to our most admired people in the world of code, including Meiko Hori's "Three Virtues of a Programmer", in tribute to Larry Wall.Sponsored:
How Do Top Developers Deliver Video?
Download the Video Developer Report! Dive into the insights of video developers from Broadcasters, Integrators, Publishers, Telcos and more.
Sarah Higley shares a demonstration of a CSS-only grid with a fixed header and scrolling body, built with accessibility in mind.
shape-outside + vertical writing mode
Kristopher Van Sant makes waves with a combination of a shape-outside polygon and `vertical-rl` writing.
A reflective animation of a delicate bonsai tree, created with SVG filters and Greensock by Kamil Dyrek.
Creating this todo list was a todo in itself for Cassie Evans. It's a "to do list with plain JS to work out the hurdles before re-making with Vue.js", with stylish buttons borrowed from a Pen from Jesper Hills.
Johan Karlsson shares a lovely collection of his many hearts, inspired by a Coding Train challenge.
C3: Color Contrast Checker
"Interactive validator that gets two colors (in RGB or HEX), and calculates the contrast difference between the two, providing information about their accessibility based on WCAG 2.1 criteria" from Alvaro Montoro.
"Accessorize Mr.Kitty! Drew SVG using illustrator and used Green Socks' GSAP to animate draggable features" from Lady Jellington.
Visualizing Cover vs Contain
A quick lesson on the difference between `cover` and `contain` for `object-fit` and `background-size`, from Joey Hoer.
CSS Gradient Counter List
"An example of CSS counter with a fixed background gradient" from Mattia Astorino.