A Slice of Heaven
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.
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.
In this Pen, I’m taking advantage of
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.
overflownot masking child elements property when modified with a
transform. Hopefully this is fixed soon, but in the meantime, I’ve added a
border-radiusand an associated
Zoomy Anchor Thing permalink¶
This pen was inspired by an neat effect I saw on Square.
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
Slip-n-slide Modal permalink¶
Jazzy CSS Checkbox Revisited permalink¶
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 (
~, see more on Can I Use) to modify the styles applied to the
label element based on the
:checked state of the
- Chrome: 4
- Edge: 12
- Firefox: 2
- Opera: 9
- Safari: 3.1
- 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
Over to you permalink¶
Let me know in the comments if you have any examples or cool pens of your own!