Cool CSS Tricks You Must Know

If you think CSS can only be used to ‘prettify’ a website, add some colors to a text or make cool animations, then you might have to rethink what all CSS is capable of. Learning some cool CSS tricks won’t hurt right? so are you ready to know the actual powers of CSS? Then this article where we will tell you all you need to know about some awesome tricks of CSS features. It focuses on explaining some hidden but valuable cool tricks you can do just with the Cascading Style Sheets (CSS).

Here are some cool CSS tricks for you.

1 :first-letter

The first-letter selector is used to specify the style of the first letter of an element, it only applies to block-level elements. We can use :first-letter to drop the first letter of the text.

<p> Time Magazine </p>

p:first-letter {
  font-size: 2rem;
  color: #1363DF;
}

Time Magazine

2 :where()

The :where() CSS pseudo-class function takes a selector list as its argument and selects any element that can be selected by one of the selectors in that list. When applying the same style to multiple elements, the CSS might look like this:

.card h1, .card h2, .card h3 {
  color: #ddd;
}

This is equivalent to the following

.card :where(h1, h2, h3) {
 color: #ddd;
}

The where() function accepts a selector list as its argument and will select all elements that can be selected by any rule in the selector list.

3 drop-shadow

Have you ever tried adding a box-shadow to a transparent image only for it to look like you have added a border? I think we’ve all been there. The solution to adding shadow effects for transparent images is to use drop-shadow.

4 steps()

steps() is a timing function that allows us to break an animation or transition into segments, rather than one continuous transition from one state to another. The function takes two parameters – the first specifies the positive number of steps we want our animation to take.

There’s a bit of math involved when using steps(), but it’s not too painful. We want the second hand to rotate 360 degrees through 60 steps and to complete the animation within 60 seconds.

5 cursor

The cursor CSS property sets the mouse cursor, if any, to show when the mouse pointer is over an element.

The cursor setting should inform users of the mouse operations that can be performed at the current location, including text selection, activating help or context menus, copying content, resizing tables, and so on.

Let’s take a look at how we can implement them on a simple div:

Go and try it out yourself There are many more…