A Slice of Heaven

I’ve been making quite a few pens over on CodePen lately, mostly exploring what can be achieved with only CSS where in the past we would have to look to JavaScript or bloating our user’s pipes with image requests—which is a whole other universe nowadays.

All of the examples are interactive, so make sure you hover or click where necessary; although, they are best suited for a tablet or desktop, so if you’re viewing on mobile, they may not work as intended.

Psychedelic Slice Permalink ¶

Hover the slice to see how this one works.

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

In this Pen, I’m taking advantage of border-radius and overflow on an element affecting its children—in this case pseudo elements—to create a one-third slice of a circle without images and a transparent background.

Zoomy Anchor Thing Permalink ¶

This pen was inspired by an neat effect I saw on Square.

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

Modal Container without JavaScript Permalink ¶

This pen was inspired by Chris Coyier’s blog post on CodePen explaining how they handle users who have turned off JavaScript and won’t be able to use CodePen properly, as the website relies on JavaScript to display Pens.

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

One of the often underused but powerful utilities available in HTML is the relationship between an input element and its label element—you can even use multiple labels to control your input field. This allows you a JavaScript-free toggle, which you can use to show/hide elements, toggle styles, and more.

Slip-n-slide Modal Permalink ¶

This was an effect I’ve seen used across the web before that I’d wanted to try building for myself but never got around to it. It’s a bit jittery, so if you can figure out how to make this one jank-free, let me know in the comments. It uses the same concept as the Modal Container without JavaScript to show and hide the modal content.

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

Jazzy CSS Checkbox Revisited Permalink ¶

This is a pen which I overhauled a bit since I first wrote about it in Persistent Shadows:

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

And the revisited version:

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

Input fields have always been a point of pain for front end developers. Using this method we get around having to worry about styling them and rely on the sibling selectors (+ and ~, see more on Can I Use) to modify the styles applied to the input’s associated label element based on the :checked state of the input.

Big thanks goes to Dan Simmons for helping me improve this even further by adding keyboard support for the hidden input field.

Over to you Permalink ¶

Interested in these sorts of projects? Check out A Single Div, a CSS drawing experiment to see what’s possible with a single div, by Lynn Fisher.

Let me know in the comments if you have any examples or cool pens of your own!