A Slice of Heaven

This article, part of the writing collection, was published on .

We know that webpages are composed of text and boxes. Lots and lots of boxes. But with the power and might of CSS3 we can do some fancy stuff that never used to be possible.

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

Hover the slice to see how this one works.

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.

updated_text: There is a Chrome bug with border-radius and overflow not masking child elements property when modified with a transform. Hopefully this is fixed soon, but in the meantime, I’ve added a border-radius and an associated transform on the :before and :after elements.

Zoomy Anchor Thing

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

updated_text: This pen was featured on CodePen’s front page, netting me some sweet internet points! Achievement Unlocked.

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.

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

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.

Jazzy CSS Checkbox Revisited

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

And the revisited version:

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.

Desktop support:

  • Chrome: 4
  • Edge: 12
  • Firefox: 2
  • Opera: 9
  • Safari: 3.1

Mobile support:

  • Android Browser: 2.1
  • Chrome (Android): 105
  • Firefox (Android): 104
  • Safari (iOS): 3.2
  • Samsung Internet: 4

Browser support data for css-sel2 comes from caniuse.com and is up-to-date as of .

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

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!