Top 10 CSS One Liners That Will Blow Your Mind 

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

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 🤣🤣🤣

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.

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).

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.

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

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

object-fit: cover - that one and scroll snapping were new to me. Thank you!

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!

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

I love the last part with the gradient animation text im gonna have to steal that idea my friend great work

THAT SMOOTH SCROLLING ONE IS SO PERFECT.

The one about resizing a box helps me a lot! Thank you!

Instead of using pointer-events: none; to get rid of user selection, You can use user-select: none; ps: Thank You, for your Amazing work Ed.

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

Glad i found this video, thanks man! on my 13years of web development still there are tons of things that I never knew.

Thanks! The text gradient styling is super cool. I already found a use for it!

If it weren't this video I could spent so much time to solve a task. Thank you for sharing this content. Scroll snapping blow up my mind. It helped a lot.

In addition to the resize thing, you can set a min-width/min-height and a max-width/max-height to set boundries

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

Just started learning front-end on bootcamp and this video is so cool and makes me wanna use all these tricks

The object-fit property can also be used to shrink the image in its box, so that all of the image can be visible without aspect ratio distortion!

Nice compilation 👍 Also, Number 9: Object-fit can also be achieved with .box { background-image:url(car.png); background-size: cover; } Same as object fit, it covers the width and height of its parent element.

I always thought that HTML and CSS can only do so little and you can only STYLE things. Now that I'm learning CSS, OMFG!!!! I don't believe how much built-in functionality it has. I'm currently in the ResizeBoth trick and I'm BLOWN AWAY!!! Edit: OMG! The "pointers-event" was also something I was searching for!!!

you have been so useful during my html learning

wow, scroll behavior has got to be the best one liner, I remember having to write several lines of Javascript code to achieve that effect

Can't believe I didn't know about flex-gap! Very helpful and honestly would have saved me lots of frustration

Resize both can be used to open something. If u have a container position fixed with a lower z-index you can resize both a small div with and arrow and once you resize it you can see hidden text or something

I love how natural you are in your video you have my sub

There is no word better than AWESOME to describe this video. Thank you so much for sharing so amazing knowledge.

Thank you for this video and that very useful tips! From this list I know only gap and have learned using it as much as possible. liked and subscribed!

Hey Ed! What is the vs code theme you were using in this video?

That was lit 🔥

Very useful video. I stumbled upon this video and helped me solve an issue with text-truncation I was having.

these are really helpful. ill save this video for a time in need. thanks bro.

Man love the videos keep going ❤💪🏽

love the new video quality man!!!

wow that smooth scrolling is crazy simple, good job

I love your energy!

for the last fade animation you could get the same effect by using animation fill mode

with pointer-events: none you are suppressing all the events on that element. So the element exists there but no click events or mousemove events are triggered in Javascript. This makes it super handy when creating an overlay that covers the entire page, cuz the events can pass through when the overlay is inactive

Amazing ❤🎉

Great stuff! Thanks for making this!

This is really helpful Thanks Guy

Super cool video - please do more of these!

Good video mate as per! The only one I didn't know was Text Gradients. Only ever used as a background Image.

This is such a great resource. Cheers

Loved all of these!

I keep coming back to this video, awesome tips

loved it sir! Didn't know most of them !!!! Thanks a lot sir

Great one-liners! A blender design/developed integrated website would be awesome!

Nice tricks. Have used object fit, smooth scrolling, pointer events before. Thanks for that flipping text will be using next

Just to add on number 9: Object-fit is best used with object-position

Great video! Could I ask, what was the vscode extension you were using that showed all the parameters for the animation property (timing-function, etc)

My favorite one liner would be white-space: nowrap; It prevents text from wrapping to the container size, and is very useful with titles

This is so useful, thank you very much!

Truncate is awesome!! i was implementing it with react(js) before now i'll do it css Thanks Ed

Thumbsed-up bc you got me w the clickbait title and you telling me to deal w it w the zoom in made me cackle lolololol

Awesome video. Thanks for always making awesome videos like this. You're the reason I was able to become a full stack developer Thank you so much🥺🔥🔥🔥

Great video! Helps me as someone who already knows the basics but doesn’t know where to go from there.

Very good tips, thank you for sharing this kind of knowledge.

Pointer events works really nice if you want to prevent interaction with you website eg when loaded from an , you just need to add it to the body tag

This was so helpful!! Thank you

This is great, thank you!

Found some new ones here, great tips!

The default object-fit is not contain, it's fill. Also elements with display:none are not removed from the dom they just never render. they are fully accessible programmatically

Can we use resize for tables? To resize columns and rows manually

Thank you for the cool functions

I subbed! I love these kinds of CSS tricks. I should make it a cheat sheet! I always get a strong Loki (not the marvel version) from you :D

That's great thank you

Knew them all but had a great time anyway! Subscribed!

Really cool stuff. Thank you very much!

I was thinking of watching flex tutorial, just to add the gap, but this video saved my time

very helpful, thank u so much

Great Job 👏 I like your style, you are unique!

Gap is one of the things I learned about early on with Grid, so I just used it with Flex as well and it worked. Yes I used Grid before Flex lol :)

Great video and great information ❤

Very helpful video. Thank you🥰!

Amazing, thank you!!

Grid min-max auto fill! I can’t remember the exact syntax off the top of my head but I have it saved as a template… perfectly responsive even grid columns every time!

Love the sense of humour. Personally `box-size: border-box;` is my top pick, that I even recommend placing as browser resets for how powerful it is.

Whole lot of cool stuff. Appreciated

What actually disable selection is user-select property. Pointer-events property is disable any pointer interaction for this DOM node - hover, click, drag, etc - so you pointer can 'hover' over elements which lay below element with this property. But user-select simply disallow you to select text/image from selecting it on the page and still blocks 'hover'ing elements below it.

Cool video man! I used 3 of these at work today what were the odds 🤣🤣

Great stuff. Thanks!

Amazing you have guides osummm❤

The scroll-snap trick is new to me... Thanks a lot for the video! + Subscriber + Like + Respect

Very simple, very short and very usefull, I Like it.

Very useful and cool stuff..thank you so much

Amazing video as always 🎉

Thank you very much. This helps a lot while practicing new properties. Can you tell me the name of the vs code extension which auto completes anything you type then you adjust. Like you did in this video ?

Using `pointer-events: none` will also cause click events to not register on things. You could use `user-select: none` to prevent just selection.

Thanks!

Your positive energy is uplifting

It's more helpful than i first tought. I used JS for most of those

Very nice... Something new I learned today.. 👍Thanks a lot sir😊just ultimate👏