10 CSS Tricks You Need to Know

TLDRLearn 10 CSS tricks that will enhance your web development skills, including writing mode, gap, flip, smooth scrolling, scroll snap, resizing, linear gradients, object fit, truncating text, and pointer events.

Key insights

Use the writing mode property to flip text vertically or horizontally.

Create spacing between flex items using the gap property.

🔃Easily flip images horizontally or vertically using the transform property.

Enable smooth scrolling by adding scroll behavior: smooth to anchor tags.

👀Create a scroll snap effect for carousels or content browsing with scroll snap type.

Q&A

How do I vertically flip text in CSS?

You can vertically flip text by using the writing-mode: vertical property in CSS.

How do I create spacing between flex items?

You can create spacing between flex items by using the gap property in CSS.

Can I flip images horizontally or vertically using CSS?

Yes, you can use the transform property with scale(-1, 1) for horizontal flip or scale(1, -1) for vertical flip.

How can I enable smooth scrolling on my website?

You can enable smooth scrolling by adding scroll behavior: smooth to anchor tags in CSS.

How do I create a scroll snap effect for a carousel?

You can create a scroll snap effect for a carousel by using the scroll-snap-type property in CSS.

Timestamped Summary

00:23Use the writing mode property to flip text vertically or horizontally.

01:39Create spacing between flex items using the gap property.

02:34Easily flip images horizontally or vertically using the transform property.

03:51Enable smooth scrolling by adding scroll behavior: smooth to anchor tags.

05:19Create a scroll snap effect for carousels or content browsing with scroll snap type.