Thread by @Prathkum

5 cool things you can do with CSS 🎨

THREAD 🧵

1️⃣ Typewriter effect using CSS only

- You can create cool typing effect using steps() function of animation-timing-function

Displays an animation iteration along n stops along the transition, displaying each stop for equal lengths of time

{ 2 / 10 }

The code is pretty simple. Check it out here 👇🏻

codepen.io/prathamkumar/p…

{ 3 / 10 }

2️⃣ Feature Testing

- The @ supports CSS at-rule lets you specify declarations that depend on a browser's support for one or more specific CSS features

{ 4 / 10 }

3️⃣ Tooltip

You probably notice that when you hover over something, an additional piece of information corresponding to that element pops up. This is called Tooltip

{ 5 / 10 }

Hence tooltips guide your visitors to take action and hence provides extra layer of guidance without any difficulties

- You can create tootip using CSS. It pretty easy

https://twitter.com/Prathkum/status/1369556723988652032?s=20

{ 6 / 10 }

4️⃣ Image carousel using 2 lines of CSS

- A carousel is a set of rotating banners, or a slideshow. It allows you to display as many slides as you want.

Creating images carousel was consider as a tedious task in previous time but not now

{ 7 / 10 }

Now you can create image carousel without using JavaScript as well

Moreover this smooth scroll as well😉

🔗 codepen.io/prathamkumar/p…

{ 8 / 10 }

5️⃣ Select elements like a pro😎

- Have you heard about :is pseudo-class. It takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list

For example, (next tweet)

{ 9 / 10 }

Instead of doing this ❌

.container h1,
.container h2,
.container h3 {
color: red;
}

Do this ✅

.container :is(h1, h2, h3) {
color: red;
}

{ 10 / 10 }