This week, the CodePen community puzzles their way through an escape room, brings some Three.js hot dogs to the cookout, and cracks up at some classic dad jokes.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Dither / Dissolve CSS Gradients

"Mixing noise with CSS gradients helps to remove banding, but results in an overall grainy texture. By overlaying gradients and applying masks the dithering can be controlled to affect the areas where colours blend only" from David J. Aldred.

Build Scalable Feeds, Activity Streams & Chat

Stream’s simple, powerful APIs are used by some of the largest and most popular apps for feeds and chat. Save months of development headache and focus on what makes your app unique.

CSS Outline

Ananya Neogi shares a showcase of fun things you can do with CSS outline. Think about the pixel-art possibilities of outline-style: dashed.

#CodePenChallenge: Dad Jokes

We made a lot of dad jokes, and the groans were heard 'round the world during week two of the July 2019 APIs challenge. Check out the cheeky Pens from the challenge, including Adam Kuhn's "Fwd: Hilarity". Thanks to our sponsor, getstream.io

Space Oddity App

Lee Martin's celebration of the 50th anniversary of David Bowie's "Space Oddity" got its start right here on CodePen! Snap a pic of the moon and you'll hear a new mix of the tune.

CodePen Radio 229: Vulnerability

Cassidy and Marie are talking vulnerability: at work, in software, and IN work ON software. What does vulnerability in work look like? And how putting yourself out there can be a great way to help you grow.

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

Background Focal Point

Christophor Wilson demonstrates how to set the CSS background image's focal point with Vue.js.

Escape Room!

Find and solve all the puzzles to escape from the room in this incredibly fun Pen from the members of Kristopher Van Sant's #PassThePen community.

[CSS Grid] Swiss-Style Typography Poster 06

Henry Desroches continues an exploration of Swiss style in CSS grid with "a [mostly] CSS implementation of Jacqueline Casey's stunning poster for MIT!"

Planet Picker

The Keyframers tour the solar system with transition between number values, text animation and a circular SVG navigation! Check out the video link in the description to play back the livestream.

Three.js - Scroll for Hot Dogs

You can learn a lot from doing goofy things! hellogareth decided to give Three.js a shot, and cooked up this hot dog scroller.

Zdog - NES Shroom

Just a lil Mario Mushroom from ilithya, with drag to rotate interaction from Zdog.

CSS Open Store Animation

marianab shares a charming loading animation concept for building an online store.

This week, the CodePen community shows how pixels are seeds, catches an endless wave, and creates some wacky sliders with Verly.js.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Color Mix in Vanilla CSS

"Thought you couldn't apply color functions in vanilla CSS? THINK AGAIN!" Una Kravets demonstrates mixing colors in CSS with calc() and CSS Variables.

The only CI/CD tool you will ever need.

100+ predefined actions and integrations in a clear & telling UI. Build, test & deploy in seconds. Try Buddy for FREE!

Verly Range Slider

These delightfully dangly range sliders demonstrate Verly.js. From Anurag Hazra.

Simple Fire Animation

A little bit of pixelated fire from Tibixx. Pop open the dat.gui controls to play with fire.

Receipt with 3D Fold Effect

Krisztina Vajda shares a receipt concept with a fun fold-out effect.

Powerful, easy-to-configure form backend

Go from zero to submission ready without writing a single line of server side code. Your first endpoint is free.

Hard Work

"I'm often asked how to become a good animator. Nobody ever likes the answer...." from animator extraordinaire Chris Gannon.

Searching Rod

"Inspired by the popular Gameboy title and a very cute icon found on Dribbble, create a form allowing to filter fish according to their name" from Gabriele Corti.

CodePenChallenge: Star Wars API

Our July API challenge blasted off with Star Wars! Check out the Pens from week one, including Ryan Mulligan's "Star Wars Opening Crawls". Sponsored by Stream.

CodePen Radio #228: 2019 Trends

We're half way through 2019! Marie and Cassidy are here to talk about what's trending on CodePen so far and take a glimpse at the future for the rest of the year.

Pure CSS Katy

An amazingly-detailed CSS portrait from Malaika Ishtiaq.

Stock imagery Thanos Simulator

Jamie Coulter demonstrates how Thanos would use the Web Audio API in this interactive Pen.

Pixels Are Seeds, Images Are Forests

Stephane Buellet shares a " journey through pixels, video, canvas and SVG export" in this tutorial post with a bunch of truly stunning Pens.

Only CSS: Infinite Wave

An emoji surfer gets an endless summer in this beautiful Pen from Yusuke Nakaya.

This week, the CodePen community explores a mysterious galaxy with Three.js, plays Space Invaders, and reminisces about the Sierra classic "Quest for Glory II".

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Quest For Glory II Disks

James Holmes pays tribute to "the classic designs of the 80's and 90's Sierra On-Line adventure game releases" with this nostalgic CSS illustration.

Save 25% on Tickets to Web Unleashed 2019 - The Front-End Developer Event

Brought to you by the team at FITC, join hundreds of your peers at Web Unleashed for 2 days and nights of unparalleled talks, tech and networking opportunities. Get up-to-date on the skills needed to excel in your career, and elevate your personal and professional development. Save 25% on your pass with code CODEPEN. September, 13-14, 2019 in Toronto, Canada

3D Drag Out Menu with Guitar

Jamie Coulter brings a stunning design from Minh Pham's Dribbble shot to the front-end in this jaw-dropping Pen.

[threejs_postprocessing] Galaxy

masuwa's gorgeous Pen gives us a glimpse of a mysterious galaxy.

Codeland Conference -- July 22 in NYC

Codeland conference is a celebration of the wonderful things we can do with code. It's designed for programmers and people learning to code. Ticket includes access to talks, workshops, breakfast, lunch, dinner, and a ticket to the afterparty. Use promocode CodePenCodeland2019 for 20% off.

Grid Experiment No. 8

Jules Forrest recreates the type specimen for Augustea, a typeface by Aldo Novarese in this striking example of the layout possibilities of CSS Grid.

#CodePenChallenge: Dessert

The final week of the June 2019 Food Fight Challenge was sweet! Check out the Pens from the "Dessert" prompt, including Diogo Goncalves' "Donut Glasses".

Moonlight Strummin'

Just the happiest moon you ever did see, strummin' through the trees w/ GSAP + Draggable & velocity detection. From Adam Kuhn.

CodePen Radio #227: Tidying Up

It's time to clean all the things! Cassidy and Marie talk about how CodePen is cleaning up code, internal docs, and external docs. How does your team do spring cleaning?

The Cat God

Chen Xin animates Wang KongKong's gorgeous Dribbble shot of a traditional Chinese theatrical mask in this purrrfectly lovely Pen.

Space Shooter Game

This fully-playable and fully-fun Space Invaders kind of game is a "first attempt at some basic game development in JavaScript" from Andrew Rubin.

React Text Highlighter

"A simple text highlighter implemented using React. In this pen I tried to focus on simplicity and performance, so I avoided solutions that involved manual manipulation of the DOM outside of React" from Yoav Kadosh.

Skewed Stretchy Menu

"A playful stretchy skewed menu, built by clipping paths and SVG pairs of icons to select clothing categories" from Mikael Ainalem.

Scene.js Panda Eating Bamboo Animation

Daybrush demonstrates the possibilities of their Scene.js library with this adorable bamboo-munching panda animation.

This week, the CodePen community experiments with reflections in GLSL, shows off layout variations with CSS grid, plays with a bizarre color illusion.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

CSS Grid: Card Variations

Olivia Ng shares variations on the same HTML card with CSS grid. And for a little more variety, click the color buttons to try out different color themes.

WooCommerce

WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.

#CodePenChallenge: Fruits and Veggies

For the third week of the Pens June 2019 Food Fight challenge, we played with fruits and veggies! Check out the Pens from the challenge, including Diogo Goncalves' "Veggielisa".

Captain Dashboard

Bob Main invites you to "become the captain of the web and explore the galaxy with 'Warp Drive' at your command! Swap between night and day mode. Control your speed! Hit the breaks! View the 'light racers'... and so much more!"

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

Chuck Close'ish Self Portrait

Ricky Eckhardt emulates Chuck Close's iconic paint "pixel" style to produce a striking SCSS self-portrait.

CSS Masonry with Flexbox, :nth-child(), and Order

Tobias Ahlin demonstrates how to avoid the common pitfalls of a masonry-style layout with flexbox in this detailed tutorial with lots of helpful Pens.

Blob Sign Painter

Need a blob with a sign for your custom Slack emoji? Katy DeCorah's got you covered! Type a word on the sign and download your blob in handy .png format, ready to pop into your Slack.

Simple Star Rating

Mert Cukuren translates Zheng's "Rate us 5 stars" Dribbble shot to the front-end in this delightful five-star Pen.

CodePen Radio #226: New Export

Stephen talks with Marie about how we updated and improved our exporting function on CodePen and talks about a possible future Pro feature that could come from the changes we made.

GLSL: Cube Environment Reflections

Liam Egan shares another GLSL marvel! Open up the dat.gui controls and play with the sliders to change the object, its lighting, and its environment.

CSS John Wick (Keanu Reeves) Portrait

John Wick is in your browser — hope you're ready! This CSS portrait from Malaika Ishtiaq is staring into your soul.

Interactive 60% Keyboard

James Holmes shares a super-realistic CSS rendering of a mechanical keyboard. Click those keys!

Ball Color Optical Illusion

Did you see that ball color illusion going around Reddit and Twitter? They're all the same shade of brown! Team CodePen's Cassidy Williams recreated it with SCSS in this mind-boggling Pen.

This week, the CodePen community plays with the `border-image-slice` CSS property, draws a silhouette portrait with `shape-outside`, and captures the experience of a roadtrip sunset with SVG animation and GSAP.

Plus, check out the latest job listings on the Job Board,

shape-outside -- Face

yuanchuan asked for coding prompts on Twitter and got shape-outside, and this beautiful silhouette was the result.

Join 3.5 Million Developers

DigitalOcean makes it easy to launch modern web applications in the cloud and scale up as you grow. Get started with a $50 credit.

Roadtrip Sunset

"Driving past mountains at sunset. SVG Animation using GSAP. Colors change when the sun goes down. This was day 10 and 11 of my journey to learn animation" from Alex Trost.

DailyUI#021 | Monitoring Dashboard

Julie Park shares a friendly dashboard concept with a soft blue and gray color palette for the Daily UI challenge.

#CodePenChallenge: Noodles

There were oodles of delicious noodle Pens for week three of the June 2019 Food Fight! Check out the Pens from the challenge, including Deren's tasty customizable ramen bowl.

Pure CSS Only Portrait - Isla

Ben Evans is back with a new stunning feat of CSS illustration magic. Pop it open on the most powerful device you have, this one pushes the browser to the brink!

CodePen Radio #225: Learning New Things

Cassidy and Marie talk about their journey to keep learning new things, while also not stressing about trying to keep up with all the things in web development.

The Circular Menu

Mikael Ainalem shares a menu that tastefully straddles the line between practical and playful, "using border-radius and clipping paths to create a circular fan like menu".

Eyeballs w/ Zdog

Did the new Zdog library catch your eye yet? You can see what all the fuss is about in this creepy-fun Pen from Neal Agarwal.

CSS-only Animated Lantern

7oot draws inspiration from Fede Cook's Dribbble shot to create a smoothly swaying animated lantern with CSS.

Inifinite Circles - CSS Doodle

Circles swap and interlock like puzzle pieces in this fascinating animation from Aragakey, built with css-doodle.

Periodic Table of Type CSS Grid

Lindsay Grizzard shares a bit of typographic history mixed with CSS grid. Hover over an element to learn more about an iconic typeface.

Codeland Conference -- July 22 in NYC

Codeland conference is a celebration of the wonderful things we can do with code. It's designed for programmers and people learning to code. Ticket includes access to talks, workshops, breakfast, lunch, dinner, and a ticket to the afterparty. Use promocode CodePenCodeland2019 for 20% off. Ticket prices go up June 22.

Border-image-slice Playground

The `border-image-slice` property is a tricky one, but this interactive tool from Pogany can help you learn how it works. Use the slider to change the `border_image_width`, then drag the red points to change the `border-image-slice` value and watch how the border changes.

This week, the CodePen community gets into the `groove` of the `border` property, guides you through the mysterious world of hex to RGB, and celebrates Apple's "grate" design.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Hex2RGB | An Animated Guide to Hex Codes

Explore an animated guide to what hex codes are, and how to convert them to RGB in this beautiful tutorial within a Pen from Josh Kennedy.

Start your website builder business

Ucraft introduced its White Label solution to allow freelancers, agencies, domain & hosting providers start a website builder business.

Cherry Blossoms

Relax for a moment with this lovely stand of fractal cherry blossom trees, from Brian Montana.

Habitable Planet Generator with zDog

Searching for a habitable planet? Sure, we all are. Now you can generate your own in this Pen from Bob Main.

CodePen Radio #224: Community Roundup

Cassidy and Marie share some of the fun things CodePen community members are doing around the web including newsletters, Pass the Pen, JSConfEU, and Zdog.

Drag-n-drop sticky, with no JS!

Well here's a cool CSS party trick from Scott Kellum! Grab the pin on the note to move it around the corkboard, and then see if you can figure out how it was done without JS before you peek at the code.

#CodePenChallenge: Sandwiches

This month's Challenge theme is Food Fight, and we kicked it off with sandwiches! Check out the Pens from week one, including Ryan Mulligan's pugilistic patty "Burger Boxer".

Pure CSS Apple Mac Pro

Filip Vitas has a "grate" take on the new Mac Pro design in this CSS illustration.

Groovy CSS Spinner

PullJosh shows the fun you can have when you get into the `groove` value of `border` in this hypnotic Pen.

Nintendo 8-bit style Pwd-generator

Generate a powerful password in the cutest possible way in this charming retro Pen from WeiChiaChang.

Strange Creature II: The Colony

Sean Free's phosphorescent creature looks like something you'd find in the deep sea. Hover over it and move your mouse to attract it and move it across the screen, or just let it float mysteriously.

matter.js Pinball Game

Angela Galliat's playable pinball game has just the right mix of fun and frustration. It's all about dropping the ball at the perfect time! What's your high score?

Poster generator - "Pixels are seeds, images are forests" - 0.2

"Create a dynamic and parametric color grid in canvas. You can use some input range to posterize and blur image source and to set grid size. Use unsplash.com images in "URL" input to customize it. And finally, export it in SVG" from Stephane Buellet.

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

This week, the CodePen community digs into CSS layouts and animation, creates a friendly new self-portrait avatar, and shreds on some air guitar with Tensorflow and Posenet.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Webcam Air Guitar

Are you ready to rock? Kevin Newcombe's air guitar uses "Tensorflow and Posenet to detect the position of your hands, and plays appropriate musical notes based on where your hands would be on a guitar".

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 Washington D.C., Chicago, Denver, or San Francisco… and set yourself Apart.

CSS Layouts and Animations

CodePen community superstar Christina Gorton takes you through the process of building a web UI with CSS grid, flexbox, and animations in Figma and CodePen in this comprehensive course on DesignCode.io.

#CodePenChallenge: Spaceships

For the final week of the May Space Challenge, we blasted off in our spaceships! Check out our collection of the Pens from the challenge, including Tucker Massad's "The Flying Robot".

Unusual HTML Tags Worth Knowing

Join Christopher Kade on a journey through some lesser-known and historic HTML tags in this informative post on dev.to, with lots of helpful embedded Pens.

Baobab Planet

Mertl renders the baobab tree planet from The Little Prince with JavaScript in this intricately-illustrated Pen.

ZDog Totoro

Adam Kuhn's adorable rotating Totoro is powered by Dave Desandro's fantastic new ZDog library.

CodePen Radio #223: Streaming

Cassidy and Marie are here to chat about livestreaming for developers. We get into how we've used live streaming to learn and share in the past and how CodePen is planning to use live streaming in the future on our new Twitch channel.

Day 9: Self Portrait (Interactive)

On day 9 of a personal CSS animation challenge, Dusty Button created this friendly new avatar. Hover over it for a sweet surprise!

CSS Animation Repeat Delay

From Carrie Scono: "While creating a few animations, I realized there was no good way to add a delay in between infinite loops of animations. I found a solution, but it's cumbersome to do by hand each time. So in the spirit of computer science, I automated it."

Agency Website POC

"A concept that was rejected by the client" — their loss is the CodePen community's gain! This proof of concept from Jamie Coulter is full of sweet details.

Gradient Toggles

"Toggles with gradients that are gradually animated away when disabling toggles" from Mikael Ainalem.

Tracked Session Schedule with CSS Grid v1

Mark Root-Wiley documents "an attempt to build a CSS grid schedule" in this Pen with a demo of the schedule and a writeup of the inspiration behind it and the challenges of the project.

React for Beginners

It's time to learn React.js. With a focus on simplicity and readability, this course will have you building real time applications and dynamic website components in no time!

This week, the CodePen community explores the mystery of a confusing toggle button, plays tic-tac-toe with a CSS AI (?!?!) and talks trash about a new feature that helps you recover deleted Pens.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Bulgy Radios

Click the radio buttons for an "overly elaborate radio animation" from Liam Johnston.

Shaping the Future of Video

API based products to help developers around the world solve the most complex video problems with cloud native software that runs anywhere.

HTML & CSS Unicorn

Alexandra Moore brings a bit of unicorn magic to the browser with this magical CSS illustration.

#CodePenChallenge: Planets

For week three of the Space challenge, we landed on planets in our solar system and in galaxies far, far away! Check out the Pens from the challenge, including jh3y's "Planet Explorer w/ React + GSAP".

CodePen Radio #222: Trash Can

Marie and Chris are talking trash this week about our newest feature — a restore option for deleted Pens! We get into the whys and hows of this frequently requested feature.

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 Washington D.C., Chicago, Denver, or San Francisco… and set yourself Apart.

On How I Approach Teaching CSS, CodePen Quizzes and Playing Cards

Get a look at how PeHaa Hetman uses CSS quizzes on CodePen and card games to help students learn the ins-and-outs of CSS specificity in this blog post with embeds of the quizzes and the game!

Colorpencils - CSS Doodle

Aragakey gets literal with css-doodle and some lovely colored pencil textures.

Microsoft Defrag (MSDOS) - Now on your browser!

There's something weirdly relaxing about defragging. Manz brings it to your browser in this charmingly retro Pen.

Break Out of Parent Element (Indented)

Jakob-e shares a guide to the "great escape" from a parent element to this interactive and informative Pen.

Cat-in-a-Box

"Feline" up for a surprise? Click on the cardboard box in Tiffany Choong's Pen and say hi to the fuzzy friend inside!

Malaika Ishtiaq on CodePen

Malaika Ishtiaq kicked off a series of CSS illustrations based on photos of old pieces of tech gear, including this retro computer.

CSS Tic-Tac-Toe... now with AI!

A fully playable tic-tac-toe game from Alvaro Montoro, with a surprising AI twist! "The computer will play randomly in Beginner mode, but in Advanced mode, it will load scenarios, and play to win. Special states have been added in order to create some 'artificial intelligence', so the machine can cover certain scenarios in 'Advanced mode'."

A Confusing Toggle Button

A toggle button with a bit of mystery to it, from Himalaya Singh. "Can you guess how the animation is working without reading the source code?"

This week, the CodePen community learns how to make an SVG pie chart, makes a presentation about CodePen from within a Pen, and dials some friends on a vintage big button phone.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Face Button

"Made a fun button with a face using GreenSock (GSAP) and vanilla JavaScript. If you hover or tap on it, you're going to startle it!" from Katherine Kato.

Automated Visual Testing

Percy’s visual testing platform makes it easy to review UI changes and catch visual bugs on every pull request. Get started for free.

Custom Accessible Vue Emoji Slider

A "fun custom emoji slider that maintains accessibility by using divs hidden to screen readers for the visual styling, with a regular range-type input over the top of the styled input (thanks to CSS grid) at opacity 0" from Josh Collinsworth.

#CodePenChallenge: Gravity

For week two of the May 2019 Space challenge we experimented with gravity! Check out the Pens from the gravity prompt, including Andrea Edstrom's tragicomic "Cow Drifting Away Into Outer Space".

SVG Displacement Filter

Mert Cukuren uses fractal noise and turbulence to create a stunning filter effect on images as you scroll through the page.

Netlify

Netlify makes web hosting eye-openingly easy. One way to do it is to just literally drag and drop a folder. Even better, connect a Git repo to a Netlify site and tell it what branch you want to watch, then any commits to that branch will automatically go live, even running your sites build as it does it.

CodePen Radio #221: Responsive Pen Editor

We've recently updated our Pen editor to be responsive and unified in the process. Cassidy, Klare, Stephen, and Marie are on to talk about the process of updating the Pen editor for 2019.

How to Create an SVG Pie Chart

In this "Code Along with Kasey" tutorial from Sparkbox, you'll learn how to create an SVG pie chart with a step-by-step video and embedded Pens.

Extraordinary Shading

"A pair of variable fonts with a distinct Art Deco flair. The main font has a weight axis, and the second is its shadow. The shadow has both weight and distance axes" from Jason Pamental.

Grumpy Cat

Jon Kantner pays tribute to the late, great Grumpy Cat in this animated CSS illustration (best viewed in Chrome).

Western Electric Big Button Phone

"A recreation of the Western Electric Big Button phone produced in the 1970's. Recreated using flexbox, grid, text shadows, and text strokes" from Alex Goff.

SVG Edges

Miriam Suzanne creates SVG edges with a scribbly, torn look in this suble but intriguing Pen.

Using a Pen as My Slides for a Presentation

Olivia Ng writes about using CodePen to create a slideshow presentation for a talk about CodePen in this fun and informative blog post.

Mr Andy Kaufman's Gone Wrestling

Steve Meredith pays tribute to comedian Andy Kaufman's famous wrestling stunt in this oddly endearing playable game.

This week, the CodePen community adds stylish hover transitions to the humble tab menu, styles monospace font like it was typed on a real typewriter, and creates rounded triangles with clip-path.

Plus, check out the latest job listings on our Jobs board, and RSVP to a Meetup near you!

Like Cycle

Don't text and walk, but do check out Chris Gannon's take on the cycle of like in this animated Pen full of Greensock magic.

New: DigitalOcean Marketplace

Deploy your favorite dev tools with 1-Click Apps.

Creating Rounded Triangles in CSS with clip-path

Sebastiano Guerriero shares a quick video tutorial and lots of helpful embedded Pens in this tutorial on CodyHouse.

CodePen Radio #220: Social Sharing

We've added a new sharing button to our pens on CodePen to Dev.to and Marie and Chris are here chatting about why and how CodePen decides to include social networks to share to from a Pen.

#CodePenChallenge: Stars

The CodePen community reached for the stars in the first week of May's Space challenge. Check out the Pens from the "Stars" prompt, including Anna the Scavenger's spectacular "Vue controlled Ziggy Stardust".

WooCommerce

WooCommerce is a flexible and powerful eCommerce open-source plugin for WordPress. There are 450+ plugins for it, enabling things like booking appointments, memberships, subscriptions, and tons more. We use WooCommerce at CodePen to sell t-shirts and hats, managing our inventory and handling fulfillment with a ShipStation plugin.

How to Create Joined Bulletpoint Lists with CSS, BBC News-style

Peter Cooper dug into BBC News' technique for creating a "timeline" list in this detailed tutorial post with a handy embedded Pen.

<base> element

Sarah Drasner shares the "base-ics" of the <base> element in this quick tutorial snippet.

Tabs - CSS + JS

A stylish tab navigation demo with fun hover transitions from Rafaela Lucas.

Bricks(dark) - CSS Doodle

Watch what happens when you click on the bricks in this beautiful css-doodle demonstration from aragakey.

Convert SVG Path to All-Relative or All-Absolute

In Lea Verou's Snap.svg-powered path converter you can "paste your path in a textarea and it both displays it and instantly converts it to all-relative and all-absolute paths".

New in Firefox 66: Animating CSS Grid

Animated CSS Grid just landed in Firefox! Facundo Corradini gets into the details in this post that also includes embedded Pens from Michelle Barker and Andrew Harvard.

Pure CSS Card Carousel

Adam Kuhn combines a little checkbox power with Smash Mouth in this rotating card carousel.

Old Typewriter Text Effect

"Text styled like it's been typed on an old typewriter. Monospace font with randomised opacity and text-shadow" from Chris Smith.