Input Animations With HTML And CSS

[@tykemajor9442]

I always admire and respect anyone who takes the time to educate others. Keep this up mehn

[@richiekho1159]

He is really a nice mahn

[@w3hacker]

This can make money and make lots of friends maybe.

[@phucbinh9441]

And for free too

[@DevProTips]

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.

[@adamonjourney3726]

@@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!

[@gerypilas]

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

[@Svetoz]

thank you! it's exactly what wasn't shown in this tutorial!

[@serjmarkelov9915]

There's a special place in heaven for such a good persons like you;) Thanks mate!

[@pranoychow3808]

Thank you! I didn't have "required" specified and was wondering why it wasn't working. This worked perfectly!

[@kalitbh5250]

Thanks a lot mate ... I was having a tough time with it .

[@mikegogl]

thanks bro, I was just gonna do a google search on this but decided to scroll to the comments first.

[@clevermissfox]

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 !

[@santiagozambrano1139]

What you taught may seem simple but you can see the enthusiasm and love of this guy :D

[@mjdev-i1p]

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.

[@fadouarasmouki725]

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.

[@backgroundnoiselistener3599]

I like how excited you are to teach coding. People like you make great teachers

[@HERLEYPUENTES]

The first lines of the CSS code are. *{ margin: 0; padding: 0; box-sizing: border-box; }

[@Futureblur]

This comment makes literally no sense

[@gabrielalencastro189]

Thanks, you save me kkkk

[@jamesmcconnon2]

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.

[@aayushgupta2648]

yes this comment helped me out,,too thanks buddy

[@prateekmahajan1929]

Exactly

[@hyfydistro]

The humour Ed sometimes throw in is astounding. "We'll be a triangle next time!" 😂 Great work on the tutorial!

[@thecnexperience]

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!

[@Jakersfire]

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

[@developedbyed]

Thanks so much! I am working 24/7 to provide quality videos now!

[@HaxGuru]

True

[@steve_matin]

"We're learning code, and we're learning shapes at the same time" Those are like... my two favorite things.

[@Pupan0102]

been studying soft dev for 3 years and today i learned more css than in all these years xD

[@MohammadYs77]

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

[@arnoldcarrot2947]

"Grab your font-family and bring them to the sheriff" that really made me laugh.

[@yashwanthsagar4204]

I was literally looking up for this comment

[@TotoOrchestral]

*grab your family and bring them to the sheriff

[@shouryagupta2990]

serif

[@shouryagupta2990]

@@lanye2708 how do you italicize text in your comment?

[@billyfairbank]

Professional dev of many years and that's a technique I've never seen. Well done and well explained.

[@adamonjourney3726]

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

[@ryejames00]

You don't know how much this helps me today. Uggh! Thanks. More kinds of this please.

[@kwasiezor1630]

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

[@Oughnutsdndaizzap]

I have to say that transition at the end was beautiful 👍🏼

[@lorinleatham7527]

You are the best Dev!!! Funny and educational, you're the Mr Rogers of programmers!

[@cybergen49]

A minute and 36 seconds in and I've already learned how to disable that pesky autocomplete, super useful.

[@kurtisenos2251]

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!

[@developedbyed]

I wanna see some awesome forms from you guys!

[@francisvieira4466]

very good video, this channel was what I needed to learn better about html, css and javascript, congratulations

[@mariopurisic5133]

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?

[@aliayubali216]

Hey how old are you and when did you start coding? you are awesome by the way.

[@rajnadkar7915]

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

[@akhwanstudio]

@@rajnadkar7915 what browser do you used?

[@Javoke]

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

[@oldstuff400]

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!

[@talhasaleem8333]

Seriously you are awesome.. best teacher respect level 1000%

[@HarshRajAlwaysfree]

This was really nice of you after some personal changes and function preferences im pretty sure we can make an awesome input now

[@tupacan]

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.

[@gabrielmareken]

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.

[@milanmilutinovic9922]

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/

[@yakovlev_io]

Hope you will find it helpful kzbin.info/www/bejne/hGaoiGd-o6tpfLc

[@networmx128bit]

This could be done with :placeholder-shown selector instead

[@jornejongsma]

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

[@btrewern]

Changed it to use : transform: translateY(-120%) scale(0.8); instead of transforming the font-size. Smoother animation!

[@christopherlawes9286]

Tried this but it made the text move slightly to the right.

[@AndrewBone]

@@christopherlawes9286 transform-origin:top left;

[@DaisyIllustrations]

Your knowledge of CSS is amazing.

[@rimantasdanilevicius6754]

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.

[@300debasish]

I like the Excitement you always keep in your videos. 👍

[@ratansen4542]

I didn't thought of it without jQuery...just awesome

[@marcoytciao]

seeing this css tricks makes me fall in love with you

[@thesupremegod1]

This is probably one of the best tutorials I have ever watched. Easy to follow, great explanations of every step, good fucking job :D

[@zacboyles1396]

You must not have tried entering invalid text.

[@odn7769]

The number selector is awesome! :D

[@jornejongsma]

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:

[@BobbyBundlez]

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!

[@2002budokan]

YES! This is something worth to watch.👍

[@BrettCahill]

Second video of yours I've clicked on now. Subbed! Love what you're teaching and the positivity

[@dl9926]

I am mindblown right now while watching this, knowing how powerful CSS is lmao. CSS is kinda underrated due to Javascript for web-dev...

[@milosleng1175]

This guy a CSS is pro, no doubt about that!

[@alan-overthenet]

Thank you, this is excellent. I enjoyed it and learned a lot of new CSS tricks

[@nocturno7887]

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.

[@paolagalli711]

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

[@noahg2]

you honestly deserve more subscribers and views.

[@spaghety]

That's a slick way to get the bottom line to animate in like that

[@ThisIsmeIrving]

What a perfect video to start my day, I love you

[@francisvieira4466]

Very good video, this channel was what I needed to learn better about html, css and javascript, congratulations

[@annm2855]

I love yyyyyyyyyoooooooouuuuuuu, my best teacher on KZbin😍😍😍

[@furiousjanush5776]

Awesome tutorial Ed. Like all the other movies on your channell tbh.

[@ranishkumar8398]

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.

[@christiansaborio410]

Super easy to follow and enjoyable at the same time, thanks!

[@skydiver97]

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!

[@otaviovaladao4884]

Nice teach, i'm from Brazil and i realy appreciate u. GJ man

[@farazfrank]

Awesome Ed

[@BeniaminSzabo]

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.

[@KostasOreopoulos]

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

[@yaboi.hitmaizer]

for some reason valid wasnt working for me and this comment actually helped me a bunch, thanks!

[@BeniaminSzabo]

@@yaboi.hitmaizer I'm glad my comment was helpful ☺️

[@waleedashfaq1714]

Good method of giving information... I like your style of speaking and method.. I appreciate you brother..😊

[@paraschouhan5205]

thank you for your valuable vedeo .....I love to watch your lecture , your presentation way is awesome !!!!

[@elzbietakocz8243]

This is look awesome! I love it! 😍😍

[@zaidsaiyed6076]

I'm from india,you css tutorial is marvelous.Also you're behave like "professor" in money heist series..😀

[@axelblaze3361]

you are a good teacher. I really enjoy your videos.

[@jolynes-fur-coat]

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:

[@MasterZiomekPL]

I'm comming back to this video every time I need to make a new unique input :D

[@tusharpatne4860]

Thank you for the video. This video cleared pseudo:class and pseudo::elements for me.

[@milosleng1175]

This is very advanced stuff though lol. I know many tech people working with CSS and nobody could do this by heart.

[@antoniomargareeeetti]

nice idea with :valid. I didn't think about it and used js)) veeeeeery nice!

[@tr7343]

Me too! I had problem on this case.I enjoyed the solution.

[@soumyajitdey5720]

You are such a charming personality with great content! Great video

[@beshoyabd-elsayed8510]

That was beautiful! Thank You for sharing that.

[@danidani-cy4ex]

You are amazing. Thanks for your work.

[@GlassScissors]

Great tutorial! You actually inspire me to get more involved with the front end dev and look into the css animations :)

[@Zeph90Games]

Thank you for being so detailed man! subbed!

[@mRWiil]

Dev Ed thank you for this example, i'm new :) , you won one person more for the channel

[@AnjoSoy]

Great explanation! Thanks for making this video. :)

[@patricpires3806]

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.

[@4GrausDeMiopia]

Um brasileiro? 1 anos atrás? E aí como ta?

[@patricpires3806]

@@4GrausDeMiopia Cara o conteudo dele é massa.

[@4GrausDeMiopia]

@@patricpires3806 Ta crack já em front-end?

[@farhadkarimi]

that intro was hilarious LOOL

[@languagelearner2299]

***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?

[@charliecalunsag2384]

This is very useful i insert this to my log in form module

[@andilesimelane4771]

After Brad suggested you on on of his videos, i knew its gonna be quality

[@членчленов-д5о]

Thanks Ed ! Your video really helped me

[@jesti988]

love and respect from India / merry Christmas 2020

[@shubhammetkar6021]

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

[@pricklypickles]

Great tutorial, look forward to the next, hopefully many, MANY more! Thanks Ed.

[@AbdullahAli-yu4hz]

This guy is so good, keep it up.

[@me-by6qs]

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.

[@me-by6qs]

It seems typing works but pointer events are not working. (like selecting a portion of text and then removing)

[@ilverin.matriam]

you deserved my like, good sir

[@farhaditsamadov5513]

Just simple and amazing! Good job)

[@me-by6qs]

9:03 actually after our label's content. with after we are still inside the label element. see it with dev tool.

[@sunilmandiya5788]

Nice work man you have taught very well keep it man i appriciate your.work

[@Danilo0717]

You the best man! Super awesome guy.

[@denzelkhonje3327]

geniuses do share with others, and thats what you are doing... keep it up genius

[@hassancreative6312]

Best Teacher

[@SatyamGupta-gc9sq]

I liked before I watched the video.

[@Gelo09]

Woah!😲 Thanks for you tutorial, I am new in HTML CSS,😊 Love you videos❤

[@rapasebastian5678]

Just re-watched it!!! Great!! Manage to create a progress bar with this tricks :D

[@gopalloharnew5948]

15:00 in the race of just having css you have created something for which we cannot have type="email" !

[@liotechtutorials7089]

I just love this guy Thank u so much for helping beginners like me

[@thienphan5365]

OMG I love your channel!! You are amazing! Thank you so much.

[@elishatunga]

This is excellent work

[@daffapradana8557]

Good content as always, i owe you so much bro!