Top 10 CSS One Liners That Will Blow Your Mind

the funniest thing is I discovered "gap" by myself. I didn't want to use margin on my flex items, and I just thought of "gap", wrote it down and it worked 🤣🤣🤣

0:45 1. Vertical Text 1:23 2. Gap 2:07 3. Flip an Image 2:36 4. Smooth Scrolling 3:25 5. Scroll Snapping 5:54 6. Resize Everything 6:50 7. Truncate 7:44 8. Text Gradients 8:55 9. Object Fit 10:32 10. Pointer Events

1. Vertical Text => writing-mode 2. Flex-Gap => gap 3. Flip an image => transform: scaleX(-1) 4. Smooth Scrolling => scroll-behaviour: smooth 5. Scroll Snapping => scroll-snap-type: x mandatory; scroll-snap-align: center; 6. Resize Everything => resize: both | vertical | horizontal; 7. Truncate => --webkit-line-clamp: 1; 8. Text Gradients => --webkit-background-clip, --webkit-text-fill-color 9. Fix image stretching issue => object-fit;

"Boom, you are in the UK, bitch 😂!" You won't hear that on many other coding channels and I love it.

At the end of the video if you're just trying to stop the user from selecting the text (and seeing the text cursor), then "user-select: none" would be more appropriate than "pointer-events". Using "pointer-events" would be more for stopping a user from clicking an input, like a button or a text field, etc. The "pointer-events" property also has the side-effect of preventing the inspection click (Shortcut: "ctrl+shift+c") from opening in the dev-tools console (at least on Chrome) which if you're developing a website can get a bit annoying. I also saw in another comment that "pointer-events: none" also prevents hover effects, right click context menus, etc. Something slightly unrelated but still important that I wanted to share is: Do not use "pointer-events: none" instead of the "disabled" attribute on an input. This is because while it does prevent mouse/tap events, it doesn't affect keyboard navigation So if you're building a website with accessibility in mind it's important to consider that people can focus in on the input with their keyboards.

Let me know your fave css tricks that people might not know!

Love these! I've used a good few of these but the other ones are new to me. Thanks for these!!

As a tip for text gradients (No. 8), order matters in your rule: set the background first, then clip. Or don't use the 'background' shortcut (gradients are set with background-image).

Man, Ed been long time watching back your course videos..... Good to see the excitement and cool work of yours continuing consistently

This video is AMAZING. So many cool tricks! I think I need more of these kind of videos.

Great content man, you explain everything in a way thats easily understood and show plenty of visuals. My go to source for all things coding related!

You just saved me from having to write out some JS to handle object fade in transitions. I've always had to observe animationend or transitionend events in order to manipulate the display: none style. I've been doing this for quite some time now. Thank you so much!

These were awesome Ed! As a full-stack dev on some legacy systems I usually loathe dealing in the CSS but these proved to me that not everything has to be difficult. I just need to keep learning.

You made my day!! Learned so much productive today!! Thank you so much man

Hello dev Ed! I really enjoyed your react portfolio website course with TailwindCSS. I'm almost done with mine and I'm so glad I found your videos

love the new video quality man!!!

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

Great stuff! Thanks for making this!

Super cool video - please do more of these!

Loved all of these!