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!
Pseudo-element overlay
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.
Next trick!
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
This one is a rather popular trick for when you need to add some basic functionality but can't or don't want to mess with JavaScript. And it uses so many different details of CSS and HTML that it becomes an actually beautiful hack.
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"
Final words
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!
Thanks
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 😄
Oldest comments (21)
2020 goal: get a date with a girl by showing her these tricks
Protip #1: It's easier if you use Tailwind
Nice. I'll definitely try that.
Already updated my Tinder profile. Let's see how it goes 🤞
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!
definitely!!! :)
Thanks for sharing! I use that responsive aspect ratio trick a lot.
Anyway, may I join that party? 🙋♂️
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.
Nice!
"Wait, no one does that..."
but... they should....
Thanks! That rocks🚀
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!
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.
Great article! Thanks for that!
I found out a small typo, the
padding-bottom: %56.25;maybe ispadding-bottom: 56.25%;right?Some comments may only be visible to logged-in visitors. Sign in to view all comments.