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!