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.
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.
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.
Modal Container without JavaScript
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.
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!
Responses
- Reactions:
-
- Replies:
-