A Slice of Heaven

🗓 published on
📚 reading length ~850 words
🏷 tagged under ,
🔗 shorturl repc.co/a4Xp1

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.

    Check out this Pen!

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.

Edit: 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.

    Check out this Pen!
Edit: 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.

    Check out this Pen!

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.

    Check out this Pen!

Jazzy CSS Checkbox Revisited

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

    Check out this Pen!

And the revisited version:

    Check out this Pen!

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.

Can I Use css-sel2? Data on support for the css-sel2 feature across the major browsers from caniuse.com.

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!

Zoomy Anchor Thing Infinite Square