April 8th: Sliders, Selectors, and Sunsets
How well do you know CSS selectors? Test you knowledge with Paulina Hetman's quiz, built with Vue.js.Sponsored:
An Event Apart
To design a better web experience, attend a better-designed web conference. An Event Apart is three days of design, code, and content taught by absolute masters—the people who shape our medium. Join us in Boston, Washington D.C., Chicago, Denver, or San Francisco and set yourself Apart. Make sure to use coupon code AEACP for $100 off!
"A simple exploration of creating a simple typeface using limited html elements and some styling" from Ryan McLaughlin.
Cool Uses of the ::before and ::after Pseudoelements
A look at some of the fun you can have with pseudoelements, with lots of helpful embedded Pen demos, from ZenDev.
Delete Confirmation Flow with Some ARIA
An accessible delete confirmation flow with "an implementation of both the ARIA alertdialog and feed roles" from Zoë Bijl.Sponsored:
Jetpack brings a whole range of features to your self-hosted WordPress site. From realtime backups that keep your site safe (and make it easy to move!) to improved search results. From related posts to social media integration - it's a no-brainer plugin for people serious about making their sites better.
For the first week of our April Algorithms challenge, the CodePen community explored mazes. Check out the Pens from week one of the challenge, including Ludmila Tretyakova's playable labyrinth game.
Vue.js Mad Libs
"A Vue.js application of the zaniest fill-in-the-blank game on the planet" from Ryan Mulligan.
Hover effect: Borders to Underlines
A pull quote's borders transform to underlines on hover in this fashion-forward Pen from Tigran Sargsyan.
Enforcing Accessibility Best Practices with Automatically-Generated IDs
Brad Frost demonstrates how to use the React library shortid to enforce IDs on form fields in this tutorial post with lot of helpful (and very nicely styled) prefill embeds.
Google Inbox Sunset - CSS Animation
Huw Llewellyn says goodbye to Google Inbox in this animated sunset, based on Cristina Sturm's CSS illustration of the "inbox zero" screen in the late, great Inbox.
TV Shows Slider
Ivan Grozdic's slick slider is action-packed with clever little details. Don't forget to check out the dark/light mode toggle!
CSS Animations: Popping Heads
Olivia Ng shares a "CSS experiment for heads popping up in your slides", based on Chen Hui Jing's "CSS variables for fun and no profit" post on Dev.To.
Pure CSS Emoji Carousel
A little bit of animated emoji merriment created with CSS and CSS properties by jh3y.