loading...
Cover image for 3 Cool CSS Tricks to Impress Your Friends at Parties

3 Cool CSS Tricks to Impress Your Friends at Parties

vtrpldn profile image Vitor Paladini ・Updated on ・3 min read

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!

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 πŸ˜„

Discussion

pic
Editor guide
Collapse
robertotonino profile image
Roberto Tonino

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

Collapse
bherrero profile image
Borja Herrero

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

Collapse
madza profile image
Madza

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

Collapse
rootz491 profile image
Karan Sharma

Nice. I'll definitely try that.

Collapse
phantas0s profile image
Matthieu Cneude

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

Collapse
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.

Collapse
phantas0s profile image
Matthieu Cneude

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

Collapse
aminarria profile image
Amin Arria

That 3rd trick 🀯

Collapse
hoshiholiday profile image
Hoshi Holiday

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

Collapse
vtrpldn profile image
Vitor Paladini Author

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

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

Collapse
hoshiholiday profile image
Hoshi Holiday

definitely!!! :)

Collapse
prkr32 profile image
prkr32

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!

Collapse
vtrpldn profile image
Vitor Paladini Author

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

Collapse
prkr32 profile image
prkr32

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.

Collapse
prkr32 profile image
prkr32

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!

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

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

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

Collapse
ms314006 profile image
Clark

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

Collapse
neomodus86 profile image
Collapse
jspiderhand profile image
Justin Stout

Great article! Looking forward to reading more!

Collapse
kaisermann profile image
Christian Kaisermann

"Wait, no one does that..."

but... they should....

Collapse
1isten profile image
STEN

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

Thanks! That rocksπŸš€

Collapse
sominemo profile image
Sominemo

These are old tricks, but still nice