DEV Community

loading...

5 CSS Tricks Nobody Tells You!

Rupak Dey
Web Dev | React | Python
・1 min read

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!

Discussion (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 Author

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 Author

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 Author

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 Author

Thank You!

Collapse
kaykaycodes profile image
Shanakay Hall

Wooo thanks!

Collapse
deyrupak profile image
Rupak Dey Author

You're welcome :D