Tags: codepen

9

sparkline

Sunday, April 9th, 2017

CodePen - CSS Grid Template Builder

Here’s a handy interface if you want to get your head around named areas in CSS Grid, also known as doing layout with ASCII art.

Wednesday, March 22nd, 2017

CodePen Projects Is Here! - CodePen Blog

Incredibly impressive work from the CodePen team—you can now edit entire projects in your web browser …and then deploy them to a live site!

Friday, December 16th, 2016

Experiment: Using Picture Element and VW+VH units as a Lightbox

This is a clever technique by Dave—use viewport units to make a lightweight lightbox.

Wednesday, August 3rd, 2016

Horizontal lines around centered content

Here’s another clever CSS technique. It uses flexbox to add horizontal lines either side of centred content.

CSS only scroll indicator

This is witchcraft. I’ve been deconstructing the CSS to figure out how this works and it’s really clever.

(Hint: try commenting out some of the CSS and see what happens.)

Wednesday, May 18th, 2016

Responsive Product Comparison Table

Here’s a nice little pattern from Dave—showing data tables one column at a time on smaller screens.

Wednesday, April 13th, 2016

Interactive Form

I quite like this step-by-step interface for a form, all cleverly handled with the :focus pseudo-class. I’d want to refine some of the usability issues before using it in production, but the progressive disclosure is nice.

Tuesday, April 5th, 2016

Design Patterns on CodePen

Well, this is rather wonderful! A one-stop-shop for exploring UI patterns on CodePen …this is going to be time sink.

Wednesday, February 3rd, 2016

Jeremy Kard

You can do anything with CSS these days.