Wait, no one does that...
But the tricks are still great, I swear. So let's start with an intro:
My experience with CSS along all those years has been both rewarding and very frustrating at times. But one thing that helped me implement polished, elegant interfaces was collecting and most important, remembering to use some very specific tricks for very specific solutions.
I mean, I couldn't emphasize more the importance of understanding how CSS works and how essential it is to master the basics, but it is just so rewarding when you help someone struggling with CSS with a quick "oh, why don't you try this trick?".
And with that in mind, here are some of my favorite CSS party tricks. I hope that they serve you well on your front-end journey!
Overlays are a super useful solution that many designers use to handle hover states and improve legibility of text over image. And one super easy way to implement a flexible, predictable overlay is by using a pseudo-element.
As you might know, we can use pseudo-elements to extend the behavior of an element in manners that otherwise would only be possible by adding another element inside it.
And that can be, like, super cool. Check out the examples below, each one represents a common UI problem that a well implemented overlay can help.
Responsive aspect ratio
You may know the pain, making iframes, videos or embeds responsive is not as easy as it seems.
One thing that responsive CSS does great is making the width of an element respond to the browser's width, a simple
max-width: 100%; is pretty much all you need in order to make an element squish horizontally so it stops overflowing out of the screen.
But if you also need to make the height of said div react to the browser's width, the answer isn't as obvious. And this problem is particularly visible in the situation below:
This trick works because when you use percentage on
padding it is always relative to the parent width. So a
padding-bottom: 75%; would give you a 4:3 aspect ratio and a
padding-bottom: %56.25; gives you the classic 16:9 widescreen.
Neat! Next one please.
Quick, no JS, show on click
Here, have a look a the CSS and HTML tabs:
Why it works?
- :checked pseudo-class selector targets our checkbox when it is checked, much like :hover would if a cursor was over it
- the + combinator targets the immediate element right after our checkbox
- The label element, by using the attribute
for='', acts as an alternative way to check the checkbox. We use it so we add text and style the "button"
You know, it may depend a little on what kinds of (nerdy) parties you go to but these tricks may actually impress your friends!
But if they don't, I hope that they are useful and can make your work easier, so you are able to expend your energy on other stuff.
Comments and feedback are super welcome!
Cover photo by Drew Farwell on Unsplash
Hey, let's connect 👋
Follow me on Twitter and let me know you liked this article!
And if you really liked it, make sure to share it with your friends, that'll help me a lot 😄
Top comments (22)
2020 goal: get a date with a girl by showing her these tricks
Already updated my Tinder profile. Let's see how it goes 🤞
Protip #1: It's easier if you use Tailwind
Nice. I'll definitely try that.
Good tips! Thanks for that!
I wanted a show-on-click (third trick) for my blog, a while ago. My problem was: I wanted multiple show-on-click on one page.
The only solution I found was to give different ID for each hidden block / checkbox. Here's an example, in case somebody wanted to do the same thing: codepen.io/phantas0s/pen/dyGWLEb
If you nest the input element inside the label you don't need the for attribute anymore and the two are automatically linked. In theory, ymmv.
Ooh. That's a good idea. Thanks for that.
That 3rd trick 🤯
So cool!! Definitely looking forward to more of your articles!!
Thanks, Hoshi! You have know idea how this feedback made me happy 😄😄😄
I plan on posting something new every Tuesday so stay tuned!
Dumb question: I am trying to repeat the hidden/display divs with different clickable labels, but I can't get it to work properly. Every time you click any of the three labels, the first hidden div appears rather than the div associated with that label. I have tried changing the classes of the hidden divs to .example1, .example2, etc. and it still doesn't work properly. I think I need to change the label id or classes but I'm not sure how to do that...
Thanks so much for these tips! I have been looking for a simple way to display divs on click without JS for a while and this seems like a simple way!
Hey, that was a great question. You are almost right, instead of changing classes you'd need to change the id and the for attribute of each label. Here's an example: codepen.io/vtrpldn/pen/WNrZzvd
Wow, thanks so much! This works because the + example always opens the nearest .example, so we don't have to identify the different .examples by changing their class, right? Just weird to me that the id for the different checkboxes are now unique, but we don't have to change any of the CSS to reflect that uniqueness.
Dumb question: I am having a hard time repeating this for a few different hidden divs that display on click. Whenever I click any of the labels, only the first hidden div displays. Not quite sure how to fix it. I have tried making multiple .example classes (.example1, .example2, etc.) and that doesn't work either.
Thanks so much for this article though! I have been looking for an easy way to do trick number 3 without JS for a long time and this is a great find!
Thanks for sharing! I use that responsive aspect ratio trick a lot.
Anyway, may I join that party? 🙋♂️
Great article! Thanks for that!
I found out a small typo, the
padding-bottom: %56.25;maybe is
Thanks! That rocks🚀
"Wait, no one does that..."
but... they should....
Some comments may only be visible to logged-in visitors. Sign in to view all comments.