DEV Community

Cover image for 3 Cool CSS Tricks to Impress Your Friends at Parties
Vitor Paladini
Vitor Paladini

Posted on • Updated on • Originally published at

3 Cool CSS Tricks to Impress Your Friends at Parties

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?

  1. :checked pseudo-class selector targets our checkbox when it is checked, much like :hover would if a cursor was over it
  2. the + combinator targets the immediate element right after our checkbox
  3. 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!


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 (21)

robertotonino profile image
Roberto Tonino

2020 goal: get a date with a girl by showing her these tricks

bherrero profile image
Borja Herrero

Already updated my Tinder profile. Let's see how it goes 🀞

madza profile image

Protip #1: It's easier if you use Tailwind

rootz491 profile image
Karan Sharma

Nice. I'll definitely try that.

phantas0s profile image
Matthieu Cneude • Edited

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:

sharpseeer profile image
Aaron Throckmorton

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.

phantas0s profile image
Matthieu Cneude

Ooh. That's a good idea. Thanks for that.

hoshiholiday profile image
Hoshi Holiday

So cool!! Definitely looking forward to more of your articles!!

vtrpldn profile image
Vitor Paladini

Thanks, Hoshi! You have know idea how this feedback made me happy πŸ˜„πŸ˜„πŸ˜„

I plan on posting something new every Tuesday so stay tuned!

hoshiholiday profile image
Hoshi Holiday

definitely!!! :)

aminarria profile image
Amin Arria • Edited

That 3rd trick 🀯

prkr32 profile image

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!

vtrpldn profile image
Vitor Paladini • Edited

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:

prkr32 profile image

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.

prkr32 profile image
prkr32 • Edited

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!

hangindev profile image
Jason Leung πŸ§—β€β™‚οΈπŸ‘¨β€πŸ’»

Thanks for sharing! I use that responsive aspect ratio trick a lot.

Anyway, may I join that party? πŸ™‹β€β™‚οΈ

ms314006 profile image

Great article! Thanks for that!
I found out a small typo, the padding-bottom: %56.25; maybe is padding-bottom: 56.25%; right?

neomodus86 profile image


1isten profile image

when you use percentage on padding it is always relative to the parent width

Thanks! That rocksπŸš€

kaisermann profile image
Christian Kaisermann

"Wait, no one does that..."

but... they should....

Some comments may only be visible to logged-in visitors. Sign in to view all comments.