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 🤣🤣🤣
Hey, can you update the link for the "Full Course Content" inside the JavaScript and HTML course? The Google Drive link goes to a 404 google drive page. Thanks!
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.
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!
In case you are using react, I suggest you take a look at CSSTransition npm package. It simplifies animations a lot by applying different subclasses during the animation, and it allows to combine display: none with any transition very easily. However, I am sure that even outside react and npm there are plenty of similar solutions, so check it out
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.
not sure what you mean by legacy systems in a css context? and if you mean stylesheets that use float layouts, ususally those are pretty easy to just change into modern options like flex, grid, etc.
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)
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!!!
When I started building UIs, I knew no Javascript and I had the non-starter syndrome of "JS is hard", so with just HTML and CSS, I had already been creating hamburger toggle menu and website dark and light mode switch. Not a drop of JS in those code.
@@babatundeadenowo7568 Thank you for the comment! JS seems pretty easy to me, I never understood this "JS is hard" thing some people say. The more I learn, CSS is also getting more bearable and even enjoyable at some points!
dont eliminate its pointer events to get rid of selection. that is user-select: none; and also cursor: default; will keep the cursor the same. and u can still have pointer events if u need to on that element
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
Using pointer-events to make an item non-interactive is a bit... Well I'd say it's not the best approach. You should handle your event logic in js, exclude an element from it. Mixing CSS into the logic of interaction seems to me like a workaround.
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
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.
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.
in most cases you wanna avoid background image if possible, since you cant add alt text, so if people are using accessibility options like a narrator, and your image is there to add context, youre making your website less usable for people with certain accessibility needs. background image is fine for things like gradients or other purely cosmetic images, but once they have a functional reason to be there, you wanna use the img element so that people who needs accessibility options, can also get context from them.
when you are adding your values, how did you get text to show so you know which values to add, instead of the default that's typically blank. example at 12:13 animation: then your values are displayed. how do i add this? thanks!
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
This effect sounds really cool, but I'm not sure I understand how to do it from your description. You are saying something is hiding behind the background but gets revealed when you resize the foreground box on top of it?
If you want to get rid of selection then you can use "user-select: none", but using "pointer-events: none" is not a good idea since you may need to capture the click event on that node in the future.
Just yesterday I also posted a video about the Top 10 CSS Features you should know and use in 2023. I was surprised, that we only got 3 points in common... 😲 And as usual: Great Intro 😄👍 Keep it up buddy!
If you want to use semantic HTML for a button, but you don't want all the browsers to add the default styling for it, just do all: unset; and it will reset all the default styling, no matter the element.
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!
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.
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 ?
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!
10:37 To make text unselectable use: "user-selectable: none;" "pointer-events: none" is bad for buttons, because it makes them not respond to the mouse at all.
There is no such thing as user-selectable, there is user-select, besides, there is nothing wrong with pointer-events in such an example lol, that's why you turn off pointer events so that it can't be clicked, if you want it to become clickable after a text appears, then you also set pointer-events auto on animation end
Hi Ed, I purchased you animation course. I see that you are doing react videos, would it be possible to do a quick implementation of the animations in Next.js? Loved the course btw, just having trouble understanding how I would implement on a React project.
If you want to get to know more great CSS Features: Just yesterday I also posted a video about the Top 10 CSS Features you should know and use in 2023 ... 😉
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
Thanks man, I hate videos that dont have predefined timestamps
Thanks
Me too. I'll never go back to this channel again.
Zach Jensz reminds me of the guy that I cheated off during test in high school.
📖 scroll css
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 🤣🤣🤣
If only all programming was like this
Damn 🔥
Aint no wayyy. Wished i found out that way 😂
@Tris gap works in Safari, caniuse just says it doesn't work in multi-column.
@@user-jg6yz7wq3j not true! safari supports gap since version 10+ inside display grid elements. and since 14.1 inside flex elements.
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;
交个朋友
10. Prevent from selecting => pointer-events: none;
@@ghaznavipc 交个朋友
@@andycrazy120 What do you mean by "To make friends"? (I translate your comment in google translate)
@@ghaznavipc Meet and make friends
"Boom, you are in the UK, bitch 😂!" You won't hear that on many other coding channels and I love it.
😂😂😂
He's real
Yup. Definitely rewound. Lol
UK AND all of the former colonies :D
I love that it's the most replayed part too. Everyone was like "Wait, what? Did I just hear that?" 🤣
Let me know your fave css tricks that people might not know!
Vertical text 🤩🙌
Hey, can you update the link for the "Full Course Content" inside the JavaScript and HTML course? The Google Drive link goes to a 404 google drive page. Thanks!
display: none; 😂 boom
writing-mode
*{margin:0;padding:0}
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.
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).
when you type in animation at 12:01 then it shows the parameters you can potentially type in . What extension does that?
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!
In case you are using react, I suggest you take a look at CSSTransition npm package. It simplifies animations a lot by applying different subclasses during the animation, and it allows to combine display: none with any transition very easily.
However, I am sure that even outside react and npm there are plenty of similar solutions, so check it out
I love how you express and talk so confidently! Thanks fort the tips!
12:07 What's the extension used to get that previous instructions/recomendations?
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.
yeah it really should be the default. The first time it took me so long to find out why my 100% width div with a border was overflowing
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.
Is CSS legacy stuff?
not sure what you mean by legacy systems in a css context?
and if you mean stylesheets that use float layouts, ususally those are pretty easy to just change into modern options like flex, grid, etc.
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)
It wasn't an extension,
If you use the auto complete for the animation property it will write all the option as placeholder
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!!!
When I started building UIs, I knew no Javascript and I had the non-starter syndrome of "JS is hard", so with just HTML and CSS, I had already been creating hamburger toggle menu and website dark and light mode switch. Not a drop of JS in those code.
@@babatundeadenowo7568 Thank you for the comment! JS seems pretty easy to me, I never understood this "JS is hard" thing some people say. The more I learn, CSS is also getting more bearable and even enjoyable at some points!
object-fit: cover - that one and scroll snapping were new to me. Thank you!
dont eliminate its pointer events to get rid of selection. that is user-select: none; and also cursor: default; will keep the cursor the same. and u can still have pointer events if u need to on that element
this is in response to number 10
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
Using pointer-events to make an item non-interactive is a bit... Well I'd say it's not the best approach. You should handle your event logic in js, exclude an element from it. Mixing CSS into the logic of interaction seems to me like a workaround.
Thank you, I was wondering what the difference between pointer events and user-select: none; was.
Using `pointer-events: none` will also cause click events to not register on things. You could use `user-select: none` to prevent just selection.
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
Great video! Helps me as someone who already knows the basics but doesn’t know where to go from there.
Maybe me new video about the Top 10 CSS Features you should know and use in 2023 will help you too? 😉
I love the last part with the gradient animation text im gonna have to steal that idea my friend great work
You made my day!! Learned so much productive today!! Thank you so much man
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.
Glad i found this video, thanks man! on my 13years of web development still there are tons of things that I never knew.
i love that on the vetical resizing "good luck finding a use for that one".... challenege accepted!
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.
pointer-events also gets rid of other cursor actions like hover, right click, etc
@@darom_96
Wouldn't that hide the text though?
Also only needs setting on a parent div to get rid of selection on all child divs. Seen people who put it on everything, no need to bloat your code
Or even better, both.
also "cursor: default"
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
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.
That's true, but the issue in your case is that you can't add an alt attribute to the image because it's a background image.
true, but a lot of times you work with websites where you cant just replace img with background, and in that case, object-fit is godsent
in most cases you wanna avoid background image if possible, since you cant add alt text, so if people are using accessibility options like a narrator, and your image is there to add context, youre making your website less usable for people with certain accessibility needs.
background image is fine for things like gradients or other purely cosmetic images, but once they have a functional reason to be there, you wanna use the img element so that people who needs accessibility options, can also get context from them.
@@SirZyPA that's something I'll have to keep in mind always. Thank you.
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
In addition to the resize thing, you can set a min-width/min-height and a max-width/max-height to set boundries
Just to add on number 9: Object-fit is best used with object-position
This video is AMAZING. So many cool tricks! I think I need more of these kind of videos.
Love these!
I've used a good few of these but the other ones are new to me. Thanks for these!!
Super cool video - please do more of these!
Man, Ed been long time watching back your course videos..... Good to see the excitement and cool work of yours continuing consistently
when you are adding your values, how did you get text to show so you know which values to add, instead of the default that's typically blank. example at 12:13 animation: then your values are displayed. how do i add this? thanks!
You mean the html page ?
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
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
This effect sounds really cool, but I'm not sure I understand how to do it from your description. You are saying something is hiding behind the background but gets revealed when you resize the foreground box on top of it?
6:50 Being able to truncate is cool, but how do you get the rest of the text to show up?
If you want to get rid of selection then you can use "user-select: none", but using "pointer-events: none" is not a good idea since you may need to capture the click event on that node in the future.
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!
How
Very useful video. I stumbled upon this video and helped me solve an issue with text-truncation I was having.
Yooo how did you get all of those indicators when you used the 'animation' proprety at 12:05
you have been so useful during my html learning
love the new video quality man!!!
I love how natural you are in your video
you have my sub
you can use transform values without transform
example:
scale: -1;
rotate: 180deg;
.
.
.
this is supported by chrome only for now
@@siema32 yes, i hope it will be supported from all browsers sooner because it's so helpfull
wow that smooth scrolling is crazy simple, good job
Thanks!
Just yesterday I also posted a video about the Top 10 CSS Features you should know and use in 2023.
I was surprised, that we only got 3 points in common... 😲
And as usual: Great Intro 😄👍 Keep it up buddy!
If you want to use semantic HTML for a button, but you don't want all the browsers to add the default styling for it, just do all: unset; and it will reset all the default styling, no matter the element.
thank you! 🙌
This was great, thanks a lot. Just one thing, how do you get this ' intellisense ' thing for your CSS going on? See 12:03
💯 cool stuff, I knew one of the trick but I enjoy to see your info, thanks
The one about resizing a box helps me a lot! Thank you!
I can't believe I spent so much time doing vertical text the hard way! I was using position: relative & transform: rotate !
these are really helpful. ill save this video for a time in need. thanks bro.
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!
2:33 Boom you are in the UK 😂😂
for the last fade animation you could get the same effect by using animation fill mode
Thanks! The text gradient styling is super cool. I already found a use for it!
Just started learning front-end on bootcamp and this video is so cool and makes me wanna use all these tricks
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
I love your ever happy vibe. Great video too.
Knew them all but had a great time anyway! Subscribed!
Good video mate as per!
The only one I didn't know was Text Gradients. Only ever used as a background Image.
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!
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.
Great one-liners! A blender design/developed integrated website would be awesome!
There is no word better than AWESOME to describe this video. Thank you so much for sharing so amazing knowledge.
Great stuff! Thanks for making this!
loved it sir! Didn't know most of them !!!! Thanks a lot sir
I keep coming back to this video, awesome tips
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 ?
My favorite one liner would be
white-space: nowrap;
It prevents text from wrapping to the container size, and is very useful with titles
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!
What extension are you using that’s shows tips on what you’re writing in code from MDN reference?
Whole lot of cool stuff. Appreciated
Great Job 👏 I like your style, you are unique!
what vscode theme do you use? I really like the italic font type on ".container" for example
Cool video man! I used 3 of these at work today what were the odds 🤣🤣
Can't believe I didn't know about flex-gap! Very helpful and honestly would have saved me lots of frustration
0:49
How do you put that box in the middle?
i thought you would have added "columns" to this list. extremely useful piece of code to get an "insta" layout.
Loved all of these!
Nice tricks. Have used object fit, smooth scrolling, pointer events before. Thanks for that flipping text will be using next
10:37
To make text unselectable use: "user-selectable: none;"
"pointer-events: none" is bad for buttons, because it makes them not respond to the mouse at all.
There is no such thing as user-selectable, there is user-select, besides, there is nothing wrong with pointer-events in such an example lol, that's why you turn off pointer events so that it can't be clicked, if you want it to become clickable after a text appears, then you also set pointer-events auto on animation end
Hi Ed, I purchased you animation course. I see that you are doing react videos, would it be possible to do a quick implementation of the animations in Next.js? Loved the course btw, just having trouble understanding how I would implement on a React project.
Yeah I’ll plan something out!
you are becoming more comedic and sarcastic which is great.
Man love the videos keep going ❤💪🏽
This is such a great resource. Cheers
This was so helpful!! Thank you
Found some new ones here, great tips!
How to get the animation to remain faded in at the end?
Hi Ed, did you tried Astro, will love to see some tutorials on Astro from you !!!
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
Hey Ed! What is the vs code theme you were using in this video?
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 :)
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
nice tips, useful and to the point, thanks!
If you want to get to know more great CSS Features: Just yesterday I also posted a video about the Top 10 CSS Features you should know and use in 2023 ... 😉