September 2nd: Silver, Sofas, and Sun
Jon Kantner animates a still Dribble shot by Hust Wilson in this glamorous study of texture and shine in SCSS.Sponsored:
Save 40% Off Your Manning.com Order
Want to learn new skill? Manning Publications are offering an exclusive 40% off your entire order at manning.com. Click here to find out more!
Vue.js Bites: Fancy Flyout Selector
"A fun flyout interface that leverages the Vue.js transition system to create smooth animations that use cartoonish easings" from Daryn St. Pierre.
Splitting: Laser Write
Martin Pitt gets that searing 80s style just right in this laser-sharp demo. "By applying a filter blur followed by a high contrast on an element wrapping a thin clip-path animation we can give it the appearance of a bright glow without accidentally masking the glow filter itself in the same clip-path."
#CodePenChallenge: SVG Tree
We wrapped up August's "Fork This" challenge with a starter SVG tree. The CodePen community made it grow in all kinds of interesting ways. Check out our collection Pens from week four, including sylviajoy's "SVG Image Unveiled".
An Introduction to the Hover Pseudo-Class
Laurie Barth shares a beginner-friendly into on the `hover` pseudo-class in CSS in this tutorial post with lots of helpful embedded Pens.
CSS Washing Machine
A bit of fun CSS illustration by Arkellys. Clean clothes, clean code — that's a thing, right?
Calculating PI Using Raindrops
"Dividing the number of raindrops that hit the circle and the square and multiplying the result by 4 gives an approximation to PI. This approximation gets better with time." A mathematical marvel from Mustafa Enes, built with Zdog and Chart.js.
"Generative patterns based on 9 geometrical shapes" from ilithya. Click or tap to stop/play generating a new pattern.
Color This Sofa! – SVG + Blend Mode Trick
Kyle Wetton demonstrates a very handy trick for recoloring a .png image using SVG and CSS blend-modes.
Ryan Mulligan is "animating characters in verbs to represent their action". Leave a comment on the Pen if there's a word you'd like to see animated!
Did you know you can draw a heart shape with nothing but straight lines? Louis Hoebregts demonstrates! "By calculating the slope of the dots close by along the heart shape we can draw lines touching the heart."Sponsored:
Fullstack Advanced React & GraphQL