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).
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 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
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.
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 !
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 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 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 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.
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!
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 ;)
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
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.
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.
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!
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!
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!!!
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 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!
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!
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
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 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?
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.
The humour Ed sometimes throw in is astounding. "We'll be a triangle next time!" 😂 Great work on the tutorial!
I like how excited you are to teach coding. People like you make great teachers
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 !
"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?
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!
been studying soft dev for 3 years and today i learned more css than in all these years xD
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
ruclips.net/video/N5EW4HnF6FU/видео.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...
"We're learning code, and we're learning shapes at the same time"
Those are like... my two favorite things.
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 have to say that transition at the end was beautiful 👍🏼
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.
Professional dev of many years and that's a technique I've never seen. Well done and well explained.
This was really nice of you
after some personal changes and function preferences im pretty sure we can make an awesome input now
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!
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 ;)
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!!
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
You don't know how much this helps me today. Uggh! Thanks. More kinds of this please.
Second video of yours I've clicked on now. Subbed! Love what you're teaching and the positivity
You are the best Dev!!! Funny and educational, you're the Mr Rogers of programmers!
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.
A minute and 36 seconds in and I've already learned how to disable that pesky autocomplete, super useful.
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.
I like the Excitement you always keep in your videos. 👍
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
The number selector is awesome! :D
Your knowledge of CSS is amazing.
That's a slick way to get the bottom line to animate in like that
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
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 ☺️
Awesome tutorial Ed. Like all the other movies on your channell tbh.
Seriously you are awesome.. best teacher respect level 1000%
Very good video, this channel was what I needed to learn better about html, css and javascript, congratulations
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?
Great tutorial! You actually inspire me to get more involved with the front end dev and look into the css animations :)
Thank you, this is excellent. I enjoyed it and learned a lot of new CSS tricks
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.
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:
Super easy to follow and enjoyable at the same time, thanks!
you honestly deserve more subscribers and views.
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.
This guy a CSS is pro, no doubt about that!
Good method of giving information...
I like your style of speaking and method..
I appreciate you brother..😊
After Brad suggested you on on of his videos, i knew its gonna be quality
Thank you for the video. This video cleared pseudo:class and pseudo::elements for me.
Dev Ed thank you for this example, i'm new :) , you won one person more for the channel
Nice teach, i'm from Brazil and i realy appreciate u.
GJ man
Great tutorial, look forward to the next, hopefully many, MANY more! Thanks Ed.
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!
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!
You are such a charming personality with great content! Great video
What a perfect video to start my day, I love you
YES! This is something worth to watch.👍
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!!!
you are a good teacher. I really enjoy your videos.
I'm from india,you css tutorial is marvelous.Also you're behave like "professor" in money heist series..😀
I am mindblown right now while watching this, knowing how powerful CSS is lmao. CSS is kinda underrated due to Javascript for web-dev...
Just re-watched it!!! Great!!
Manage to create a progress bar with this tricks :D
Thank you for being so detailed man! subbed!
Awesome Ed
This is very useful i insert this to my log in form module
That was beautiful! Thank You for sharing that.
Good job bro thanks a lot I rarely reply to youtube vids keep it up man
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
Great explanation! Thanks for making this video. :)
I love your teaching style dude😍 awesome And thankyou , I'm learning a lot from you.
This is very advanced stuff though lol. I know many tech people working with CSS and nobody could do this by heart.
I love yyyyyyyyyoooooooouuuuuuu, my best teacher on RUclips😍😍😍
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!
thank you for your valuable vedeo .....I love to watch your lecture , your presentation way is awesome !!!!
Subbed. Well earned bro. Informative use of pseudo elements. +1 👌
Yeah. This tutorial helped me with my project. Thanks @Simo_Edwin. Keep posting. We will keep supporting
geniuses do share with others, and thats what you are doing... keep it up genius
love and respect from India / merry Christmas 2020
Just simple and amazing! Good job)
Nice work man you have taught very well keep it man i appriciate your.work
Woah!😲 Thanks for you tutorial, I am new in HTML CSS,😊 Love you videos❤
This guy is so good, keep it up.
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!
Dude, that was supper helpful. Thanks for your time.
Thanks Ed ! Your video really helped me
I just love this guy
Thank u so much for helping beginners like me
OMG I love your channel!! You are amazing! Thank you so much.
Good content as always, i owe you so much bro!
This is look awesome! I love it! 😍😍
You are amazing. Thanks for your work.
you deserved my like, good sir
That was useful. Thanks, man and keep it up. 👏
I got that one amazing css style ...u r awesome broo... Subscribed!!
i really like your video. and i always learn new from you thank you so much being here to teach new stuff. love from india )