April 12th: Accessible Toggles, SVG Noise, and Photo Galleries
The Wonderful Wizard of Oz characters in CSS
Hover over the low-poly characters in Alvaro Montoro's Wizard of Oz gallery to see what they need most. And check out the YouTube link for a time lapse video of how the Pen was made!
Sarah Fossheim shares another flawless rendition of a piece of vintage gear with this HTML & CSS illustration of the Muson toy synth.Sponsored:
Build 💪 search into your site or app.
We maintain API clients for all important languages and give you awesome docs, tooling and support. Free plan for <10000 search requests.
Build a Fancy Hover Animation
"Hover or focus over each card to see the person’s job title slide in and the colour treatment change" in this photo gallery from Andy Bell for Picalilli. Check out the link in the Pen description for a full tutorial.
For week one of April's "Microinteractions" challenge, we started with a button click! Check out the Pens from the first week, including Ruben A Sanchez's travel confirmation button that transforms into a boat and sails away....Sponsored:
Connect your repository. Add your build settings. Deploy your website. Netlify is the fastest way to get a site live and supports any type of site with a Jamstack architecture. With static global CDN hosting, it is the fastest possible way to host.
Anna Lytical shares a stunning CSS recreation of Urban Decay's Naked 3 eyeshadow palette. There's a link to Anna's TikTok in the HTML comments where you can see how the palette was made!
A new, fresh SVG pattern is generated for you every time you visit this super-stylish Pen from Cassie Evans.
Kitty Giraudel shares a set of accessible toggles, complete with an in-depth tutorial on how the toggles were made and how to use them in your own projects.
Component Carousel: Bouncy Castle Form
Adam Kuhn shares "another ridiculous email capture" with a surprise finish. Adam built this for the delightful Frontend Horse Component Carousel stream! There's a link to the show in the Pen description.
News Section w/ Tailwind CSS
Mert Cukuren shares a tidy, responsive news site layout concept built with Tailwind.
Generative SVG Noise Pattern Maker
Build your own noisy SVG pattern in your favorite color with George Francis' interactive Pen. When you're happy with your creation, click the "Copy SVG" button and you'll have it on your clipboard.
Smoke Ring > Speedometer
Tom Miller shares the perfect speedometer for your smokin' fast interactions. Watch what happens when you get that speed up into the 200s!
Isometric Floating Layers (SVG)
"I've made a component that is completely configurable (size, color, position, text), and you can stack as many as you need together and create your own illustration. I'm using 3 elements internally to draw the layers and make them appear 3D, one for the shadow, one for the highlight, and one for the body." From Yoav Kadosh.