Glowing Text, Flying Messages, and a CSS Luxury Car

This week, the CodePen community crafts beautiful backlit text, takes flight with a customizable sky banner, and takes a ride in a slick CSS Audi A7.

Plus, Team CodePen says hello to our newest member, and we put the spotlight on the community's skills in our latest weekly challenge!

Handling videos? You need this video API

Deliver optimized videos in the right format, quality & size based on the user's device in real-time. Try the forever-free plan today!


Checkboxes and radio buttons with background image

Michelle Barker uses an SVG image to brighten up a checkbox and radio button set with a dash of pink.


Candy Stacker

pjkarlik builds a mesmerizing animated machine with "GLSL Fragment Shader in HTML/ WebGL Bootstrap in JS".


Air Message

Type your message in the box and a friendly cat will fly by with your message on a streamer in this adorable Pen from Masahito Leo Takeuchi.


CodePen Radio #333: Robert

Team CodePen welcomes Robert Kieffer! Our newest team member is on with Chris to chat about Robert’s history and how we’re lucky to have gotten someone with such deep expertise in the field.


Remove Elipsis & Reveal

Noah Raskin demonstrates to reveal line-clamp'ed text in a card layout with a little help from the showMore.js library.


#CodePenChallenge: Spotlights & Highlights

For the 2nd week of the September challenge, we focused up on Spotlights & Highlights. Check out our collection of Pens from week two, including Kit Jenson's TMNT showcase!


Growing Lines Hex

Dillo grows a garden of vines from "tessellation of hexagons" in this JavaScript animation. Check out the Pen's JS tab for detailed comments that get into how it was made.


Backlit Card

Amit Sheen builds a subtly animated colorful glow behind knocked-out text in this luminous CSS animation.


89.

You're gonna flip for this animation strip! It's #89 in an ongoing series of fascinating work from Three.js virtuoso ycw.


Audi A7

Ronnie Lee manufactures a strikingly realistic car with just plain old HTML & CSS.


Lake Reflection

Bence Szabo continues a series of #PetitePatterns with a tranquil lake scene in just 444 byes. Peek into the CSS panel for Bence's comment on how to create your own variant on the scene.


Spiky

prisoner849 forms a spiky orb with simplex noise and Three.js. You can drag the orb to examine the surface, but watch the spikes!


Jamstack Conf 2021

Online, Free, Oct 6–7, 2021. Join 20,000+ web developers to learn how it started, how it's going, and what's next!


Source: codepen.io

Glowing Text, Flying Messages, and a CSS Luxury Car