What he shows here can be done much more simply by installing Google's material design css kit. It took me 10 years of doing it the old way to figure that out.
@@DevProTips Jonah... that is what I love and hate together about kits and frameworks. Yes, sometimes it is needed to be fast and build not all from scratch. But I want it to understand all, from the very beginning. Every 0 and 1. Why a language struggle at some point. What happens in the binary... and sometimes "simple" css, which a kit could done with a 2-liner. That makes fun, that is, why we code!
If the input is not required, we can use the ":not(:placeholder-shown)" instead of ":valid". And in the html code for the input field add a placeholder with the value " "(space).
Instead of putting overflow hidden and translating the pseudo element outside of it, I tend to transition the width from 0 to 100% and adjust the transform-origin. Nice tutorial thanks !
Thank you so much Dev Ed, I am a computer science graduate from Morocco who stopped coding for four years almost, but thanks to your videos and the charismatic way you explain concepts, I am finally starting to get a taste of it back.
Top tutorial Ed, you are putting out some really great modern content, your channel is going to blow up for sure and it will be fully deserved, more of these please
This was such a nice tutorial. No new techniques or anything but it all just came together so perfectly! Started to follow you after watching couple of React tutorials. I liked the easy going approach to a subject at hand but the quirky humour was just priceless! Thank you and hopefully you keep posting the videos!
I know css for almost 17 years now so this is nothing new to me but I still have to say that I am impressed how you present that knowledge. This is an excellent tutorial because you pack so much usefull CSS-features in as little as 18 minutes. Sibling-Selecors: Check; Transforms: Check; Transitions: Check; Sticking to the topic: Check; If someone asks me where to learn CSS i will reccomend your channel.
One thumb up is not enough... I could repeat myself under every of your vidz: It makes so much fun with you to learn... you have fun with what you do and this is what we can see, all your smiling and joking. You show small typos or mistakes and that makes you more humand than some perfect coordinated tutorials without mistakes. You describe things sometimes even only as a sidenote, which helps me to understand better at some points, which I didn´t have learned quite yet. You motivate myself to go further and learn more. More of that, please, more of you ;)
This makes total sense. He is letting people know to add the typical "reset styles" and also setting the browser to interpret the box sizings correctly. If you check out what a reset stylesheet is, you will understand why this is sometimes neccesary. Also i think it is fair to point it out, especially when you are messing with padding and positioning in a html/css project. it is such a normal proccess at the start of a project that Ed didn't mention it.
Thanks for the video man! I have one question though, for me, the :valid selector does not work as in your case. for me, it just turnes the form i that state as by default... so when I add that css, it just applies those styles by default and not just on :focus... you have any idea why that could be?
It worked for the first time when I developed it but isn't functional the 2nd time I opened... I didn't touch the code once it was ready.... what could be the possible reason for this error
I do really appreciate all the videos that you post on channel. Great job Dev. And I get really fun and pleasure watching your works. Thanks for everything
Really enjoy your videos! Educational, entertaining, and you have great energy. You are a very talented teacher, and I hope to see your channel keep growing. Thanks for the great content!
I would not use :valid in a real-world project, since :valid checks if the input value is valid by its settings. What I mean is, if there is an input with email type and the user put an invalid email address, this will not work. In my opinion, for the animated line, a much better approach would be to use width: 0 and width: 100% instead of transform it "outside" of the form and hiding it with overflow: hidden. It would be nice if you add your codes to github, so we can all contribute. Anyways, great tutorial! Keep up.
You can use transform: scaleX, it will run at 60fps and has a plus that you can define the direction/origin. It's like the width you said, but has the point I stated above about origin/direction, plus better performance.
You should always have preference to use Transforms & Opacity when doing transitions and animations. The CSS render engine has 3 processes which render CSS to the page, Layout, Paint & Composite. Width uses all three whereas transform: translate would only use the Composite process to render. Check out more about how animations render here csstriggers.com/
I agree with Daniel Watts. Your videos are enjoyable and educational and you show some new advance and cool, nice stuff. Your channel is worth to follow.
Awesome tutorial. I definitely learned some new things. However, after some research, I discovered that the :valid pseudo class is probably not the best choice. A better solution would be :not(:placeholder-shown) with a space as a placeholder on the input. This doesn't work in IE11 though.
The best solution is to do javascript validation and add a custom valid class, as all frameworks do, but the goal of the animation was not that. Tweaking it is pretty easy
Thank you Sir, I achieve this sometime ago, but your technique is much better, I was using jQuery also, and you achieved a better result only with CSS. Thank you very much master.
You're just awesome...Like your always smiling face! I was quite disturb about coding and feels irritating but you boosted me up with your cute and nice smile.....God Bless you boy!
Ok,... :valid selector might not be the best selector to keep the label up in all intended situations. A solution: step 1. Add a placeholder prop to the input with the value: " ". So:
THank youuu!!! you saved me QUICKLY. thank god i read the comments. in my case the :valid was not persisting... and the input was not even required or using any validation... but all in all BEYOND that anytime i put text into the input it would not persist between pages. the form would stay valid no matter what. thanks again!
Thx Ed for this tutorial, your channel is helping me to be a creative and discover new things about development and training my English. Thank you so much.
I would just like to advise people to not be put down if this tutorial is to complex to begin with. I'm just starting out and the other day, I watched this tutorial and didn't fully understand the last part. This was due to too much info process. So I tried multiple times in my own way and re-watched this tutorial a few times and now it sounds so simple to create this. When comes to complexity, especially with programming - break everything down and start by building the individual blocks. You will then start to learn how things are made. You may think you're wasting time as it can take hours/days/weeks, but in the long-term, it's actually a quicker process. Great tutorial Dev!
I was always fond of such beautiful stuff then material UI told me to use it's textfield with just 2-3 liines of code, things change so drastically, man!!!
8:06 seems that when we add background we can't see the input, there is no problem with clicking and changing it. but even we set the background-color of input label, the pointer-events can't sole the problem.
Great work! Honestly speaking this time I am really confused , for me it is bit complex, but I think it needs little more explanation regarding how you play around with input, label and positions at the beginning to have an idea as how we are going to work on to get the final output. I follow all your videos. Thanx
We can also use 'input[required]:valid' and 'required' property in the input field in html, and I think it will be quite easy for other person to understand and manage the code in future.
Great Tutorial, very informative and very well explained, helped me a lot to understand how to set up my input field. Thank you very much 😀 Keep it up!
***Update*** Thank you for your videos. After watching your CSS positioning video I figured out my issue. I am still having issues with exact positioning, but it actually works now. It took me over three hours, so I feel like a fool. I was overthinking it and not paying attention to how I was positioning other items. ***Original message*** I tried adding a second field as he said, but they are on top of each other. I cannot seem to get them separate. I feel like a failure. The video was wonderful, what I followed along it looks amazing. I screwed it up adding again. Has anyone else had this issue before?
I always admire and respect anyone who takes the time to educate others. Keep this up mehn
He is really a nice mahn
This can make money and make lots of friends maybe.
And for free too
What he shows here can be done much more simply by installing Google's material design css kit. It took me 10 years of doing it the old way to figure that out.
@@DevProTips Jonah... that is what I love and hate together about kits and frameworks. Yes, sometimes it is needed to be fast and build not all from scratch. But I want it to understand all, from the very beginning. Every 0 and 1. Why a language struggle at some point. What happens in the binary... and sometimes "simple" css, which a kit could done with a 2-liner. That makes fun, that is, why we code!
If the input is not required, we can use the ":not(:placeholder-shown)" instead of ":valid". And in the html code for the input field add a placeholder with the value " "(space).
thank you! it's exactly what wasn't shown in this tutorial!
There's a special place in heaven for such a good persons like you;) Thanks mate!
Thank you! I didn't have "required" specified and was wondering why it wasn't working. This worked perfectly!
Thanks a lot mate ... I was having a tough time with it .
thanks bro, I was just gonna do a google search on this but decided to scroll to the comments first.
What you taught may seem simple but you can see the enthusiasm and love of this guy :D
Instead of putting overflow hidden and translating the pseudo element outside of it, I tend to transition the width from 0 to 100% and adjust the transform-origin. Nice tutorial thanks !
Thank you so much Dev Ed, I am a computer science graduate from Morocco who stopped coding for four years almost, but thanks to your videos and the charismatic way you explain concepts, I am finally starting to get a taste of it back.
Top tutorial Ed, you are putting out some really great modern content, your channel is going to blow up for sure and it will be fully deserved, more of these please
Thanks so much! I am working 24/7 to provide quality videos now!
True
The humour Ed sometimes throw in is astounding. "We'll be a triangle next time!" 😂 Great work on the tutorial!
This was such a nice tutorial. No new techniques or anything but it all just came together so perfectly!
Started to follow you after watching couple of React tutorials. I liked the easy going approach to a subject at hand but the quirky humour was just priceless!
Thank you and hopefully you keep posting the videos!
I know css for almost 17 years now so this is nothing new to me but I still have to say that I am impressed how you present that knowledge. This is an excellent tutorial because you pack so much usefull CSS-features in as little as 18 minutes. Sibling-Selecors: Check; Transforms: Check; Transitions: Check; Sticking to the topic: Check; If someone asks me where to learn CSS i will reccomend your channel.
I like how excited you are to teach coding. People like you make great teachers
been studying soft dev for 3 years and today i learned more css than in all these years xD
You don't know how much this helps me today. Uggh! Thanks. More kinds of this please.
One thumb up is not enough... I could repeat myself under every of your vidz: It makes so much fun with you to learn... you have fun with what you do and this is what we can see, all your smiling and joking. You show small typos or mistakes and that makes you more humand than some perfect coordinated tutorials without mistakes. You describe things sometimes even only as a sidenote, which helps me to understand better at some points, which I didn´t have learned quite yet. You motivate myself to go further and learn more. More of that, please, more of you ;)
The first lines of the CSS code are.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
This comment makes literally no sense
Thanks, you save me kkkk
This makes total sense. He is letting people know to add the typical "reset styles" and also setting the browser to interpret the box sizings correctly.
If you check out what a reset stylesheet is, you will understand why this is sometimes neccesary. Also i think it is fair to point it out, especially when you are messing with padding and positioning in a html/css project. it is such a normal proccess at the start of a project that Ed didn't mention it.
yes this comment helped me out,,too thanks buddy
Exactly
I wanna see some awesome forms from you guys!
very good video, this channel was what I needed to learn better about html, css and javascript, congratulations
Thanks for the video man! I have one question though, for me, the :valid selector does not work as in your case. for me, it just turnes the form i that state as by default... so when I add that css, it just applies those styles by default and not just on :focus... you have any idea why that could be?
Hey how old are you and when did you start coding? you are awesome by the way.
It worked for the first time when I developed it but isn't functional the 2nd time I opened... I didn't touch the code once it was ready.... what could be the possible reason for this error
@@rajnadkar7915 what browser do you used?
I do really appreciate all the videos that you post on channel. Great job Dev. And I get really fun and pleasure watching your works. Thanks for everything
I cannot thank you enough for sharing your beautiful and practical ideas, You've literally taught me 10 times more than my professor. Thank You
"We're learning code, and we're learning shapes at the same time"
Those are like... my two favorite things.
Really enjoy your videos! Educational, entertaining, and you have great energy. You are a very talented teacher, and I hope to see your channel keep growing. Thanks for the great content!
I would not use :valid in a real-world project, since :valid checks if the input value is valid by its settings.
What I mean is, if there is an input with email type and the user put an invalid email address, this will not work.
In my opinion, for the animated line, a much better approach would be to use width: 0 and width: 100% instead of transform it "outside" of the form and hiding it with overflow: hidden.
It would be nice if you add your codes to github, so we can all contribute.
Anyways, great tutorial! Keep up.
You can use transform: scaleX, it will run at 60fps and has a plus that you can define the direction/origin. It's like the width you said, but has the point I stated above about origin/direction, plus better performance.
You should always have preference to use Transforms & Opacity when doing transitions and animations. The CSS render engine has 3 processes which render CSS to the page, Layout, Paint & Composite. Width uses all three whereas transform: translate would only use the Composite process to render.
Check out more about how animations render here
csstriggers.com/
Hope you will find it helpful
ua-cam.com/video/N5EW4HnF6FU/v-deo.html
This could be done with :placeholder-shown selector instead
Yes :valid not the best suited for this purpose. If we change the input type to email, the label will go down after typing an invalid email...
Professional dev of many years and that's a technique I've never seen. Well done and well explained.
I have to say that transition at the end was beautiful 👍🏼
You are the best Dev!!! Funny and educational, you're the Mr Rogers of programmers!
It’s amazing!! I just love the passion you show, I can talk by your facial expression how much you love coding!! Thanks for sharing!!
This was really nice of you
after some personal changes and function preferences im pretty sure we can make an awesome input now
Seriously you are awesome.. best teacher respect level 1000%
"Grab your font-family and bring them to the sheriff" that really made me laugh.
I was literally looking up for this comment
*grab your family and bring them to the sheriff
serif
@@lanye2708 how do you italicize text in your comment?
I agree with Daniel Watts. Your videos are enjoyable and educational and you show some new advance and cool, nice stuff. Your channel is worth to follow.
A minute and 36 seconds in and I've already learned how to disable that pesky autocomplete, super useful.
This is probably one of the best tutorials I have ever watched. Easy to follow, great explanations of every step, good fucking job :D
You must not have tried entering invalid text.
I like the Excitement you always keep in your videos. 👍
The number selector is awesome! :D
Your knowledge of CSS is amazing.
Second video of yours I've clicked on now. Subbed! Love what you're teaching and the positivity
Awesome tutorial Ed. Like all the other movies on your channell tbh.
I didn't thought of it without jQuery...just awesome
Thank you for taking your time to educate us :) it's heart warming to see someone so passionate about their work! It motivates me :) have a good day
seeing this css tricks makes me fall in love with you
Nice teach, i'm from Brazil and i realy appreciate u.
GJ man
Very good video, this channel was what I needed to learn better about html, css and javascript, congratulations
Thank you, this is excellent. I enjoyed it and learned a lot of new CSS tricks
Awesome tutorial.
I definitely learned some new things. However, after some research, I discovered that the :valid pseudo class is probably not the best choice. A better solution would be :not(:placeholder-shown) with a space as a placeholder on the input. This doesn't work in IE11 though.
The best solution is to do javascript validation and add a custom valid class, as all frameworks do, but the goal of the animation was not that. Tweaking it is pretty easy
for some reason valid wasnt working for me and this comment actually helped me a bunch, thanks!
@@yaboi.hitmaizer I'm glad my comment was helpful ☺️
you honestly deserve more subscribers and views.
Good method of giving information...
I like your style of speaking and method..
I appreciate you brother..😊
Thank you Sir, I achieve this sometime ago, but your technique is much better, I was using jQuery also, and you achieved a better result only with CSS. Thank you very much master.
That's a slick way to get the bottom line to animate in like that
What a perfect video to start my day, I love you
Super easy to follow and enjoyable at the same time, thanks!
You're just awesome...Like your always smiling face!
I was quite disturb about coding and feels irritating but you boosted me up with your cute and nice smile.....God Bless you boy!
Changed it to use :
transform: translateY(-120%) scale(0.8);
instead of transforming the font-size. Smoother animation!
Tried this but it made the text move slightly to the right.
@@christopherlawes9286 transform-origin:top left;
I'm comming back to this video every time I need to make a new unique input :D
I'm from india,you css tutorial is marvelous.Also you're behave like "professor" in money heist series..😀
I love yyyyyyyyyoooooooouuuuuuu, my best teacher on UA-cam😍😍😍
You are such a charming personality with great content! Great video
Thank you so much!!! It's a hassle to do it with libraries since you can't change the colors! Such a huge help c:
This guy a CSS is pro, no doubt about that!
you are a good teacher. I really enjoy your videos.
Thank you for the video. This video cleared pseudo:class and pseudo::elements for me.
Great tutorial! You actually inspire me to get more involved with the front end dev and look into the css animations :)
nice idea with :valid. I didn't think about it and used js)) veeeeeery nice!
Me too! I had problem on this case.I enjoyed the solution.
Dev Ed thank you for this example, i'm new :) , you won one person more for the channel
thank you for your valuable vedeo .....I love to watch your lecture , your presentation way is awesome !!!!
After Brad suggested you on on of his videos, i knew its gonna be quality
Ok,... :valid selector might not be the best selector to keep the label up in all intended situations. A solution:
step 1. Add a placeholder prop to the input with the value: " ". So:
THank youuu!!! you saved me QUICKLY. thank god i read the comments. in my case the :valid was not persisting... and the input was not even required or using any validation... but all in all BEYOND that anytime i put text into the input it would not persist between pages. the form would stay valid no matter what. thanks again!
Thx Ed for this tutorial, your channel is helping me to be a creative and discover new things about development and training my English. Thank you so much.
Um brasileiro? 1 anos atrás? E aí como ta?
@@4GrausDeMiopia Cara o conteudo dele é massa.
@@patricpires3806 Ta crack já em front-end?
I am mindblown right now while watching this, knowing how powerful CSS is lmao. CSS is kinda underrated due to Javascript for web-dev...
I would just like to advise people to not be put down if this tutorial is to complex to begin with. I'm just starting out and the other day, I watched this tutorial and didn't fully understand the last part. This was due to too much info process. So I tried multiple times in my own way and re-watched this tutorial a few times and now it sounds so simple to create this. When comes to complexity, especially with programming - break everything down and start by building the individual blocks. You will then start to learn how things are made. You may think you're wasting time as it can take hours/days/weeks, but in the long-term, it's actually a quicker process.
Great tutorial Dev!
12:43 everything stopped working for me. For some reason i cannot use that plus.
same problem with me
Thank you for being so detailed man! subbed!
Great tutorial, look forward to the next, hopefully many, MANY more! Thanks Ed.
love and respect from India / merry Christmas 2020
Nice work man you have taught very well keep it man i appriciate your.work
This is very useful i insert this to my log in form module
I was always fond of such beautiful stuff then material UI told me to use it's textfield with just 2-3 liines of code, things change so drastically, man!!!
Thanks Ed ! Your video really helped me
That was beautiful! Thank You for sharing that.
You are amazing. Thanks for your work.
8:06 seems that when we add background we can't see the input, there is no problem with clicking and changing it.
but even we set the background-color of input label, the pointer-events can't sole the problem.
It seems typing works but pointer events are not working. (like selecting a portion of text and then removing)
Great explanation! Thanks for making this video. :)
This guy is so good, keep it up.
Just re-watched it!!! Great!!
Manage to create a progress bar with this tricks :D
YES! This is something worth to watch.👍
Awesome Ed
This is very advanced stuff though lol. I know many tech people working with CSS and nobody could do this by heart.
Great work! Honestly speaking this time I am really confused , for me it is bit complex, but I think it needs little more explanation regarding how you play around with input, label and positions at the beginning to have an idea as how we are going to work on to get the final output. I follow all your videos. Thanx
I just love this guy
Thank u so much for helping beginners like me
This is look awesome! I love it! 😍😍
Just simple and amazing! Good job)
geniuses do share with others, and thats what you are doing... keep it up genius
I love your teaching style dude😍 awesome And thankyou , I'm learning a lot from you.
We can also use 'input[required]:valid' and 'required' property in the input field in html, and I think it will be quite easy for other person to understand and manage the code in future.
Good content as always, i owe you so much bro!
Good job bro thanks a lot I rarely reply to youtube vids keep it up man
Dude, that was supper helpful. Thanks for your time.
You the best man! Super awesome guy.
OMG I love your channel!! You are amazing! Thank you so much.
Great Tutorial, very informative and very well explained, helped me a lot to understand how to set up my input field. Thank you very much 😀 Keep it up!
***Update*** Thank you for your videos. After watching your CSS positioning video I figured out my issue. I am still having issues with exact positioning, but it actually works now. It took me over three hours, so I feel like a fool. I was overthinking it and not paying attention to how I was positioning other items.
***Original message***
I tried adding a second field as he said, but they are on top of each other. I cannot seem to get them separate. I feel like a failure. The video was wonderful, what I followed along it looks amazing. I screwed it up adding again. Has anyone else had this issue before?
just the thing i was looking for.. thanx a lot
Woah!😲 Thanks for you tutorial, I am new in HTML CSS,😊 Love you videos❤