June 4th: Cells, Cycles, and Colors
#CodePenChallenge: dt and dd Roundup
If there's one thing that defines the CodePen community, it's willingness to step up to a challenge! Check out some of our favorite Pens from the last week of the May HTML Buddies challenge: dt and dd.Sponsored:
Delightful realtime apps with Channels
Powerful features, 40+ SDKs supported, 150+ tutorials available and the support you need. Generous free plan. Get started today.
Getting Started With CSS Layout
Learn the basics of modern CSS layouts in this tutorial post full of helpful embeds from Rachel Andrew for Smashing Magazine.
Mirror's Edge Game Menu
Berrak Nil kicks off a personal challenge to recreate video game menus for the web with the title screen for Mirror's Edge.
Sass Color Scheme Generator
Stumped for a color palette? Generate nine random palettes with Giana's SCSS-based Pen.Sponsored:
Understand your users behaviour
See how your users and visitors are really using your website.
Daily UI #006 User Profile
Kelly Chen shares a fun user profile concept in this Pen designed for the Daily UI challenge.
Pure CSS Tic Tac Toe w/ SVG
Jhey uses a clever checkbox hack to create a playable game of tic-tac-toe with CSS!
Aspect Ratio Cells with CSS Grid Layout
Michelle Barker shares how she built a grid layout with an aspect ratio defined on each grid cell itself so they always maintain that ratio, even if they're empty.
Playing with SVG displacement filter
Get a feel for how SVG displacement can change and distort an image in this interactive Pen from Sota Hatakeyama.
CodePen Radio #176: Technical Debt
Marie talks with Alex about technical debt and what that meant for CodePen in the past, and how CodePen is working to minimize our technical debt in the future.
Jon Kantner creates another stunning work of CSS art with this startlingly realistic Apple keyboard. Hit the caps lock key for a little surprise!
Pixie's Moon Cycle
Cathbailh experimented with css-doodle to create this gorgeous Pen that's just bursting with flower power.
Kitties! (hover images)
Ana Tudor demonstrates the possibilities of clip-path in this big cat showcase. Check out the YouTube link in the description to see how it was done, step-by-step!