CSS tips you won't see in most tutorials.
🧵
1. Smooth scrolling
Smooth scrolling with zero JavaScript, with just one line of CSS.
2. When you work with transparent images you can use the `drop-shadow()` filter function to create a shadow on the image's content, instead of `box-shadow` property which creates a rectangular shadow behind an element's entire box:
filter: drop-shadow(2px 4px 8px #585858);
3. Typing Effect
Did you know that you can create a typing effect with zero JavaScript?
Check this demo to see it in action, and to check the code:
codepen.io/denic/pen/GRoO…
4. Center anything
Easily center anything, horizontally and vertically, with 3 lines of CSS:
5. Cursors
Did you know that you can use your own image, or even emoji as a cursor?
6. Truncate text
Truncate text with plain CSS.
7. `caret-color`
You can change the color of the text input cursor.
8. CSS Scroll Snap
You can use the CSS Scroll Snap feature to create well-controlled scroll experiences:
9. The `::selection` CSS pseudo-element
The `::selection` CSS pseudo-element applies styles to the part of a document that has been highlighted by the user (such as clicking and dragging the mouse across text).
10. Anything resizable
Did you know that you can make any element resizable, just like `<textarea>`?
11. CSS modals
You can use the `:target` pseudo-class to create modals with zero JavaScript.
12. Dynamic Tooltips
Create dynamic CSS-only tooltips, using the `attr()` CSS function.
If you liked this thread, maybe you'd love to bookmark it as a post.
P.S. You can find a few more tips there.
markodenic.com/css-tips/
If you're learning CSS, be sure to follow me and never miss tips like this.
Share this Scrolly Tale with your friends.
A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.