Input Animations With HTML And CSS

Рет қаралды 768,097

Күн бұрын

Check out my courses and become more creative!
developedbyed.com
I really wanted to cover css animation and transitions today. So I applied it to an input tag that you can use in your html forms.
We will cover everything from transitions to animations. Pseudo Elements like ::before ::after and :focus selectors.
Hope that this will make it easy for you to create css animations and come up with something cool!
~-~~-~~~-~~-~
Follow my Twitter:
/ deved94
Please watch: "Should You Become A Software Engineer?"
• Video
~-~~-~~~-~~-~

Пікірлер: 676

@tykemajor9442 4 жыл бұрын

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

@richiekho1159 4 жыл бұрын

He is really a nice mahn

@w3hacker 4 жыл бұрын

This can make money and make lots of friends maybe.

@phucbinh9441 3 жыл бұрын

And for free too

@DevProTips 3 жыл бұрын

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 3 жыл бұрын

@@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 4 жыл бұрын

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 4 жыл бұрын

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

@serjmarkelov9915 3 жыл бұрын

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

@pranoychow3808 3 жыл бұрын

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

@kalitbh5250 3 жыл бұрын

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

@mikegogl 3 жыл бұрын

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

@HERLEYPUENTES 4 жыл бұрын

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

@Futureblur 4 жыл бұрын

This comment makes literally no sense

@gabrielalencastro189 4 жыл бұрын

Thanks, you save me kkkk

@jamesmcconnon2 4 жыл бұрын

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 3 жыл бұрын

yes this comment helped me out,,too thanks buddy

@prateekmahajan1929 3 жыл бұрын

Exactly

@fadouarasmouki725 4 жыл бұрын

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.

@acuraintdohc 5 жыл бұрын

Working on a snazzy contact form, and this is definitely getting in there. Well done and easy to follow. Thank you.

@Jakersfire 5 жыл бұрын

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 5 жыл бұрын

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

@HaxGuru 5 жыл бұрын

True

@developedbyed 5 жыл бұрын

I wanna see some awesome forms from you guys!

@francisvieira4466 5 жыл бұрын

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

@mariopurisic5133 5 жыл бұрын

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 5 жыл бұрын

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

@rajnadkar7915 4 жыл бұрын

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

@akhwan5297 4 жыл бұрын

@@rajnadkar7915 what browser do you used?

@kwasiezor1630 4 жыл бұрын

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

@santiagozambrano1139 4 жыл бұрын

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

@oldstuff400 5 жыл бұрын

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!

@thecnexperience 3 жыл бұрын

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!

@backgroundnoiselistener3599 4 жыл бұрын

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

@Javoke 4 жыл бұрын

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

@hyfydistro 3 жыл бұрын

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

@Oughnutsdndaizzap 3 жыл бұрын

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

@WebTutsAditi 4 жыл бұрын

Finally found the right video that I was looking for... Great explanation of the code. Keep up the good work man and will wait for more such form related videos.

@billyfairbank 4 жыл бұрын

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

@HarshRajAlwaysfree 4 жыл бұрын

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

@BrettCahill 4 жыл бұрын

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

@ryejames00 3 жыл бұрын

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

@MasterZiomekPL 5 жыл бұрын

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

@arnoldcarrot2947 4 жыл бұрын

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

@yashwanthsagar4204 3 жыл бұрын

I was literally looking up for this comment

@TotoOrchestral 3 жыл бұрын

*grab your family and bring them to the sheriff

@shouryagupta2990 3 жыл бұрын

serif

@shouryagupta2990 3 жыл бұрын

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

@GlassScissors 5 жыл бұрын

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

@Pupan0102 4 жыл бұрын

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

@espritlibre29 4 жыл бұрын

Wow this is awesome ! Really like your tutorials; thank you so much for the time you spent for it. I'll try this stunning form asap !

@MohammadYs77 3 жыл бұрын

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

@pricklypickles 4 жыл бұрын

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

@eduardoquezadanunez7314 3 жыл бұрын

Thank you for being so detailed man! subbed!

@odn7769 3 жыл бұрын

The number selector is awesome! :D

@farazfrank 3 жыл бұрын

Awesome Ed

@300debasish 3 жыл бұрын

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

@elzbietakocz8243 3 жыл бұрын

This is look awesome! I love it! 😍😍

@diegorocha2186 5 жыл бұрын

Amazing tutorial! I'm waiting for more! Thank you

@christiansaborio410 3 жыл бұрын

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

@user-xv9ls5gw5g 3 жыл бұрын

Thanks Ed ! Your video really helped me

@furiousjanush5776 3 жыл бұрын

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

@AnjoSoy Жыл бұрын

Great explanation! Thanks for making this video. :)

@farhaditsamadov5513 4 жыл бұрын

Just simple and amazing! Good job)

@beshoyabd-elsayed8510 3 жыл бұрын

That was beautiful! Thank You for sharing that.

@filanico 3 жыл бұрын

Stunning tut !!!

@adamonjourney3726 3 жыл бұрын

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

@krish3d385 3 жыл бұрын

Very nice. I loved it.

@daffapradana8557 4 жыл бұрын

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

@2002budokan 4 жыл бұрын

YES! This is something worth to watch.👍

@stevematin6050 4 жыл бұрын

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

@paolagalli711 3 жыл бұрын

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

@agk2011 4 жыл бұрын

That was useful. Thanks, man and keep it up. 👏

@DaisyIllustrations 4 жыл бұрын

Your knowledge of CSS is amazing.

@markojozic3944 3 жыл бұрын

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.

@torontotom3168 3 жыл бұрын

Awesome tutorial I subscribed!

@Kaichos 4 жыл бұрын

Dude, that was supper helpful. Thanks for your time.

@lorinleatham7527 3 жыл бұрын

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

@rimantasdanilevicius6754 5 жыл бұрын

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.

@elishatungamirai 3 жыл бұрын

This is excellent work

@thesupremegod1 3 жыл бұрын

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 3 жыл бұрын

You must not have tried entering invalid text.

@ThisIsmeIrving 3 жыл бұрын

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

@Danilo0717 4 жыл бұрын

You the best man! Super awesome guy.

@sangramsingha11 3 жыл бұрын

just the thing i was looking for.. thanx a lot

@sir_afk 4 жыл бұрын

Subbed. Well earned bro. Informative use of pseudo elements. +1 👌

@spaghety 4 жыл бұрын

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

@NhiPham-di9wi 3 жыл бұрын

So nice animation! Thanks so muchhh

@patricpires3806 5 жыл бұрын

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 3 жыл бұрын

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

@patricpires3806 3 жыл бұрын

@@4GrausDeMiopia Cara o conteudo dele é massa.

@4GrausDeMiopia 3 жыл бұрын

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

@subhashchandra2107 5 жыл бұрын

I love your teaching style dude😍 awesome And thankyou , I'm learning a lot from you.

@francisvieira4466 5 жыл бұрын

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

@tupacan 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

Hope you will find it helpful kzfaq.info/get/bejne/hJt1ipd506yadok.html

@networmx128bit 4 жыл бұрын

This could be done with :placeholder-shown selector instead

@jornejongsma 4 жыл бұрын

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

@mfaraz07448 5 жыл бұрын

Thanks Its help me to understand something which i was missing :P

@sejim666 5 жыл бұрын

Awesome, thank you for explaining how it works!!

@mRWiil 5 жыл бұрын

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

@danidani-cy4ex 4 жыл бұрын

You are amazing. Thanks for your work.

@user-fr9dy5hz2n 5 жыл бұрын

Man, it was great . Thank you

@user-ub7xo3qz2b 5 жыл бұрын

Great tutorial. Thank you :D

@andilesimelane4771 4 жыл бұрын

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

@user-xn9xr5nk4q 4 жыл бұрын

WOW! Amazing!!! Very Nice Tutorial! ^^ Thank You ^0^

@thienphan5365 3 жыл бұрын

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

@AbdullahAli-yu4hz 5 жыл бұрын

This guy is so good, keep it up.

@marcoytciao 3 жыл бұрын

seeing this css tricks makes me fall in love with you

@tusharpatne4860 4 жыл бұрын

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

@mohitdas5292 5 жыл бұрын

I got that one amazing css style ...u r awesome broo... Subscribed!!

@JeffryUGP 4 жыл бұрын

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!

@mm1nt 4 жыл бұрын

Good job bro thanks a lot I rarely reply to youtube vids keep it up man

@talhasaleem8333 4 жыл бұрын

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

@aw6674 4 жыл бұрын

really nice and clean tutorial

@sunilmandiya5788 4 жыл бұрын

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

@otaviovaladao4884 3 жыл бұрын

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

@virodesign 4 жыл бұрын

Great!!! thank you buddy your YT channel inspired me

@gildesaant 3 жыл бұрын

Love it!

@kalanzans 4 жыл бұрын

Wow!!! Superb! Thank you from Brazil! :^)

@axelblaze3361 4 жыл бұрын

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

@cybergen49 3 жыл бұрын

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

@VitoxCzechia 4 жыл бұрын

Great tutorial! I thank you for teaching me something new!! :)

@clevermissfox 6 ай бұрын

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 !