A really cool CSS trick to make your JavaScript friends jealous

Again, no JS…

Was that a trick or what? GIF credits: GIPHY

It’s kind of ON and OFF cycle these days for me as a web developer. Sometimes I go crazy about CSS, the next time I find myself drooling over JavaScript libraries. Now, JS is a really powerful scripting language for web, you can’t have slightest of doubts in that, you have to accept that. Like I said, it’s like for a few days I drool over JS and in the exact day I find myself watching a tutorial over the internet of CSS showing off skills which JS can (surely) do. It’s like you don’t have to use scripts every time when you want that exact feature with a style sheet or when you absolutely love styling your web page and are addicted to that… Let’s see what we have today for our styling fellas!

What will I make?

This:

Tricked you…eh?

Not this:

The trickster likes that too! GIF credits: GIPHY

What just happened here❔

I know you’ve guessed it already. We just did a CSS trick taking some of its common properties and boom! Yes, at some point you might’ve a thought that, “this was achievable by JS quite easily” or you might say, “this is such a low-level trick” but trust me, it’s high time our friend say to us that it can only be achieved via JS! Prove him/her wrong! CSS is as beautiful and powerful as JS. (just a random thought…)

Lemme explain you what actually happened in the GIF. As soon as I gave an input to the placeholder, a kind-of message box greeted me with “Great! You did it.” And then as soon as all the contents of the placeholder were empty, the box vanished. The same thing has already been done with the help of JS a thousand times before but how many of you did this with pure CSS? For JS, you might’ve used alert(), prompt(), added some if-else conditions to check for the contents in the placeholder or you might’ve used jQuery too. So what takes it to make the same stuff via CSS? Let’s explore!

What will I need? 🛠️

• H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
• Your already wonderful HTML and CSS skills.
• A text editor (I’ll be using VS Code just because for my last tutorial on animations with AnimeJS, I used…well…the new Live Share feature is too great to digest in one go. [Have you got a hint what will I share next with you?])

Shall we, trick?

Show off to your friends just like that! GIF credits: GIPHY

Do the baby steps yourself. Let’s keep this tutorial short and simple. In your index.html make sure you have these to make the perfect backbone we need:

• Start with a <h1> and <p> so that it doesn’t look deserted and write something catchy. After all, you need to make your buddy envious when he/she uses this!
• Take an <input placeholder> and write another awesome sentence in it.
• Make a <div> with a class of msg with a final greeting text.

Take a look here:

Now, coming to our CSS. Let’s do these step-by-step:

1. Do some styling with that msg. By that I assume you’ve added relevant padding, margins, background-color and width.
2. To show the msgonly when something is typed on, we use the :not()pseudo-class. The :not() class will select any element which is not in a paragraph or an element that do not match a list of selectors which you provide to it. Therefore we use the body, add the :not() pseudo-class and inside we add the selectors for it. First goes in the :placeholder-shown (it selects any element with an active placeholder). Therefore we say input:not(:placeholder-shown)+.msg. This means do the stuff inside the brackets with the msg and the placeholder selected. We set the opacity to 1 so that the greeting msg shows up.
3. Also, by default when the page loads we don’t want to show that msg, to fix this we set the initial opacity value to 0.
4. To make that fade effect on the msg adjust the transition opacity to a specific value with an ease-out effect.

Here’s the CSS:

Done. Are they jealous? 😝

Where to next? 🤔

Head over to Hot tips CSS website from where this concept of making things appear and disappear was taken from. All credits goes to Mattia Astorino for such an awesome work. Next, you can find other ways for your friends to love you even more by doing the vice-versa. This time they’ll show you a new JS trick and you have to be little bit jealous. What say? 👊

Well jokes aside, you can take a look of some of the new CSS 3 selectors that paved the way for us or you can memorize some of the commonly used.

Awesome New CSS3 Selectors | Perishable Press

The 30 CSS Selectors You Must Memorize

> Originally published at Codeburst.io.

Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!