5 CSS Tricks Nobody Tells You!

1. Center Anything

Using Flexbox, Align Items & Justify Content

.center {
   display: flex;
   align-items: center;
   justify-content: center;
}

Edit :-

Note:- '.center' should be applied to the parent of the element to be aligned.
Another way to implement suggested by @mrdanielschwarz >> here

2. Smooth Scrolling

No JS. Only one HTML property

html {
   scroll-behavior: smooth;
}

3. Change Cursor To An Image

Whenever the mouse hovers over the particular division, the cursor will change to the specified image

.change__cursor {
   cursor: url('path/to/the/image.jpg'), auto;
}

4. Add Shadow To Transparent Image

No more box shadows

.drop-shadow {
   filter: drop-shadow(3px 6px 9px #636161);
}

5. Truncate Text

The below property helps you truncate the text to the specified number of lines

Edit:-

Appended the additional properties as suggested by @pustelto >> here

p {
   -webkit-box-orient: vertical; 
   -webkit-line-clamp: 4; 
   display: -webkit-box; 
   overflow: hidden;
}

Do try them!


Have knowledge of other tricks that can help reduce CSS coding time? Feel free to share in the comment section below!


Support me : Buy me a coffee!

Comments

[Tomas Pustelnik]

The line trunctation in your 5th tip won't work like this. You have to add few more properties, in order for it to work properly:

  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 4; 
  display: -webkit-box; 
  overflow: hidden;

[Rupak Dey]

Thank you!
I've added this in the edit.

[Zack Webster]

Learned about the custom cursor here, thank you!

[Rupak Dey]

That's great to know! Drop a follow for more :D

[Shana]

Wooo thanks!

[Rupak Dey]

You're welcome :D

[Om_P]

Good one!

[Rupak Dey]

Thank You!

[Rupak Dey]

Thank you!
I've added this in the edit.