Flipping Carousels, CSS Transformers, and JavaScript Bubbles
This week's CodePen community highlights include a fun photo
carousel featuring the GSAP flip plugin from Elegant Seagulls, a
real CSS transformer from Jhey Tompkins, and a beginner-friendly
tutorial on creating cartoon-style bubbles with JavaScript from
franksLaboratory.
Plus, Gayane Gasparyan gives us a glimpse of the Vision Pro
future, and Carter Lovelace takes the "under construction" page to
another level.
Jhey Tompkins takes the transform property to the
max in this interactive illustration of Optimus
Prime of Transformers fame. Click the "Slow down?"
checkbox to watch it in slowmo. BYO transformation
sounds.
The community showed off a lot of range in the 2nd
week of the Choice UI #CodePenChallenge! Slide
through our collection of Pens from week two,
including Pens by Mads Stoumann, Shane Burns,
William Bardon, and Calleb.
In this fun YouTube roundup, Zoran Jambor at CSS
Weekly takes you on a video tour of 10 great
recent CodePen picks that really flex the
animation power of CSS.
Elegant Seagulls shares a pleasingly tactile photo
carousel showcasing GSAP's "flip" plugin. Drag the
carousel to spin, then click on any image and it
will flip out to full size.
Watch and learn as Julia Miocene begins a series
of four videos on making shapes that turn into CSS
art. You can follow along with the Pen as you
watch!
Chris Gannon shares a softly sleek design concept
for a dial with masterful control of light &
shadow that make it seem truly touchable. Turn the
dial to play with the setting range from cool
green to warm red.
Cartoony bubbles automatically follow a predefined
path until you click and drag through them in this
bubbly demo from franksLaboratory. Watch how it
was made in a step-by-step tutorial on YouTube.
The tech hiring landscape is extremely
competitive. Stay ahead of the curve with 600+
hands-on courses covering the industry's top
skills: Machine Learning, System Design, APIs,
Data Science, Cloud Computing, and more. Trusted
by 2 million developers. Start your free trial
today!
"Improvisation always ends with rotating things"
Mustafa Enes' exploration of CSS trigonometric
functions yields this colorful spiral with a
psychedelic, film-like filter. Play with the
slider to go from seashell spiral to pinwheel, or
just sit back and watch it go.
Square regiments of dots drift and merge together
to form patterned bands in this engaging Three.js
animation from Tom Hinton.
Chris' Corner
A collection of web design and development news and
thoughts from CodePen's own Chris Coyier.
I came across Alexey Ardov's work the other day. Looks
like the color bug hit him pretty hard. I first saw this
playground:
It’s awfully cool. I like seeing color palettes
presented in the context of UI like that. Sometimes it’s
hard to picture how it all might come together if colors
are looked at too abstractly. It doesn’t exactly have an
export tool, but a bunch of CSS custom properties are
barfed out into a style attribute on the
<body> if you were so inclined to use
them for something.
Of course I thought: HSL is nicely used here, but what
about the HDR color formats?! Seems like a good
opportunity to set up P3 colors and non-P3 color
fallbacks. I don’t think this fact is lost on Alexey, as
they have lots more color experiments they have built.
For example, this visualizer for looking at color
models, which then it looks like got an upgrade to
visualize more models (and gamuts)
I like looking at those things as they are a reminder of
just how designed these color spaces are and how deep
the rabbit hole can go. Before you know it, you’re
designing extremely sophisticated accessible color
palette generation tools.
Looking at these one-off single-purpose websites always
puts me in the mood to share more. Aren’t you lucky that
I save links to new ones that I see just for times like
this.
Temani Afif’s pattern site has some pretty sophisticated
backgrounds that are done just with CSS backgrounds.
Reminds me of Lea Verou's take on this from years ago. A
grand tradition of CSS wizards.
Need a neat little animated toggle for Light Mode/Dark
Mode? This site has a whole bunch of them:
Wasn’t much to pluck one over to a Pen, in case you need
a reference there. I saw a little controversy on this as
one of the usage options is as a
<div>, which of course is not an
interactive element. I’m not sure that’s fair, as you
might use this as a visual adornment next to an
interactive button, for example. And the React exports
use <button> nicely.
I’m sorry I can’t explain it, but sometimes you have to
update intended text to have a bunch of extra special
ASCII characters that better represent a file tree.
In the rectangular world of web design, sometimes just
what you need is something... not rectangular
The site provides SVG, HTML, and CSS for you to copy
out, which, I’m sure you’re aware, plunking over to
CodePen to play with is a snap. Gosh, isn’t CodePen
useful? You should go PRO.
Codepen Pro
Just tuck this into the ol' brain bank: CodePen hosted assets, a
PRO feature, serve those assets with full CORS permissions. If
they didn't, you'd be fighting against cross-origin browser
policies when you, for example, may want to fetch them in
JavaScript. We just want to make that painless for you.
You can adjust your email preferences any time, or instantly opt
out of emails of this kind. Need help with anything? Hit up
support.
.png)
Chris' Corner
