This week: Floating, Dancing, and Animating
Bullet Journal/Sketch Style Elements
"Recently made a website that uses the "sketch style" because I was dead adamant to not use flat design. These are some of the elements + more that I never got to use" from Olivia Ng.Sponsored:
Data Modeling in Apache Cassandra™
A five-step approach to creating the right data model—from mapping workflows, to practicing query-first design thinking.
#Codevember - 4 - Big
Janet Mendez creates an animated CSS illustration of mountains looming over a valley in this Pen for the #Codevember day 4 prompt "Big".
Shapes in a Grid
Move your mouse around Sergiu Lucutar's vibrant canvas to make the shapes shift and grow.
Let's Create a Floating Label Input with HTML and CSS Only
Adrian Bece demonstrates how to create a form that "visually combines an input label and the input itself into a single element" in this tutorial post on Dev.to.Sponsored:
Best in Class Video Infrastructure in One API Request
Add scalable live and on-demand video to any app, using any web framework. Mux Video uses machine learning to host, encode, and deliver video more efficiently and at higher quality.
CodePen Radio #243: Breaking Stuff
Chris and Marie are on to talk about when stuff breaks at CodePen. We chat about how things break, how we handle communication while things are broken, and what we learn about our product (and ourselves) when something isn't working like it should.
November's #CodePenChallenge theme is Board Games! For week one, the CodePen community played Monopoly. Check out the Pens from the Monopoly challenge, including twelve13's 3D utility cards. Thanks getflywheel.com for sponsoring!
Dancing with CSS
Have you seen Kyle Shook's Text to Life animations dancing their way through CodePen? Kyle has a post on how the animations were created, complete with embeds of each of these lively Pens.
Paw Clap Button
Aaron Iker rebounds an original Dribbble shot by David Huynh in this pawsome Pen.
CodeMeNatalie: October’s CodePen Challenges
CodeMeNatalie made a Pen for every week of October's Opposite challenge! Read all about the month-long coding journey into css-doodle and SVG in Natalie's blog post with embeds of each of the Pens.
Sprite Sheet Animation Tutorial with HTML and CSS
Drew Conley shares a YouTube walkthrough of how to implement a sprite sheet animation in HTML, CSS, and JS based games. Check out the video description for a link to the Pen.
Steam Spooky House
Dave DeSandro shares a Zdog animation you may recognize from Steam's Halloween 2019 sale page! "I didn’t make a game, but I can say my work made the front page of Steam. Surreal."
Link Fill on Hover
"Link hover effects that fill a link with an underline or line-through using CSS transitions and the clip-path property" from Katherine Kato. Hover over each of the links in the paragraph to animate the text-decoration styles.