DEV Community

Rupak Dey
Rupak Dey

Posted on • Updated on

5 CSS Tricks Nobody Tells You!

1. Center Anything

Using Flexbox, Align Items & Justify Content

.center {
   display: flex;
   align-items: center;
   justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

4. Add Shadow To Transparent Image

No more box shadows

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

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;
}
Enter fullscreen mode Exit fullscreen mode



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!

Top comments (12)

Collapse
 
mrdanielschwarz profile image
Daniel Schwarz • Edited

Note: .center should apply to the parent of the element you want to align.

Also, there's a shorter way:

.outer { display: flex; }
.inner { margin: auto; }
Enter fullscreen mode Exit fullscreen mode

Buy Me A Coffee if I helped 🤗

Collapse
 
deyrupak profile image
Rupak Dey

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

Collapse
 
mrdanielschwarz profile image
Daniel Schwarz

Happy to help!

Thread Thread
 
mrdanielschwarz profile image
Daniel Schwarz

Oh, here's another way...

.outer { display: flex; }
.inner { align-self: center; }
Enter fullscreen mode Exit fullscreen mode

align-self can overwrite align-items too.

.outer { display: flex; align-items: start; }
.inner { align-self: center; /* overwrites align-items */ }
Enter fullscreen mode Exit fullscreen mode
Collapse
 
pustelto profile image
Tomas Pustelnik • Edited

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;
Enter fullscreen mode Exit fullscreen mode
Collapse
 
deyrupak profile image
Rupak Dey

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

Collapse
 
zaxwebs profile image
Zack Webster

Learned about the custom cursor here, thank you!

Collapse
 
deyrupak profile image
Rupak Dey

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

Collapse
 
noobsdev profile image
Om_P

Good one!

Collapse
 
deyrupak profile image
Rupak Dey

Thank You!

Collapse
 
kaykaycodes profile image
Shanakay Hall

Wooo thanks!

Collapse
 
deyrupak profile image
Rupak Dey

You're welcome :D