Transparent Login Form - HTML \u0026 CSS ONLY



Date of publication
Information Transparent Login Form - HTML \u0026 CSS ONLY

Title : Transparent Login Form - HTML \u0026 CSS ONLY

Lasting : 19.38

Date of publication :

Views : 14.817

Liked :

Downloaded once : 0

Frames Transparent Login Form - HTML \u0026 CSS ONLY

Description Transparent Login Form - HTML \u0026 CSS ONLY

Transparent Login Form - HTML \u0026 CSS ONLY

Transparent Login Form - HTML \u0026 CSS ONLY

Generic placeholder image
codeSTACKr 2 months ago

Thanks for all of the support!!
Next up Learn Sass in 30 Minutes:

📚 My Favorite Web Design Books 📚
Web Design with HTML, CSS, JavaScript and jQuery Set by Jon Duckett (paid link)

samsoft dz
samsoft dz 2 months ago

thank's for the video ...
i have question : the login stay not in the center horizontally !!
event it is in justify-content: center !! why ?

V K 2 months ago

Good explanation

Surender Bhyan
Surender Bhyan 2 months ago

You just nailed it 🤠🤠
loving 💖 the passion you have.

Pixel Killer
Pixel Killer 2 months ago

very clean :)

Fred B.
Fred B. 2 months ago

Hi, thank for all the helpful content you produce. As I finished recreating the code, while playing with the both forms, I found one problem on each, and I can't wrap my head around a solution for these. I wanted to know if you had a tip or if you came across these as well in you experience as a developer.
So here it is :
1) on login form, the chrome autocomplete messes up with the transparent background, making it white after selecting an option from the autocomplete menu. So to recap, once you've selected a previously submitted text which later is suggested by autocomplete, and the background of the input text remains white thereof.
2) on password lost form, the input is of type email and is required. So if I type something which is invalid and focus out of the input, then the label comes back on top of the invalid input text. So I'm trying to define in the CSS a state that keep the label smaller orange on top when input is invalid and unfocused, but I can't seem to find the correct code.
Thanks again for your time !

Sonix 2 months ago

Inspiring and really useful content! One issue though, the label transformations <strike>don't</strike> appear to be working on Chrome (Version 83.0.4103.97 (Official Build) (64-bit)). Can you confirm and is there a workaround? Updated: On second thoughts I think this maybe to do with a Norton Addon I have installed.

Jerald Evans
Jerald Evans 2 months ago

I don’t know if it’s because I watch a lot of tutorials online at this point, so I have a better understanding but still lack the skills, but watching this video. I feel like I’ve learnt way more about css than from anywhere else.

Codeopold 2 months ago


Paul Pandi
Paul Pandi 2 months ago

Awesome explanation with professional way. Its really helpful us. Tank you for this stuff. Keep do more tutorials👍

Prabha Torres
Prabha Torres 2 months ago

I am from finance background, but really interested in Coding, started learning frontend and backend.. Your videos are helping me in learning more..

FORHAD RAHMAN 2 months ago

Amazing! I just watched.... & nothin to say

Reza 2 months ago

Again: great content! Well done!

king42606 2 months ago

Thanks for the great video! I did have a question about the 'forgot password' form I noticed if you do not enter a valid email address the 'email' text will lay over the user input I know we fixed this with the username and password field with ".form .input-group input:valid + label" however if I try to adjust '.form .input-group input:invalid + label' both forms change. Would be curious in what you would do in this case?

Deep Space - Programming Tutorials

Nice Tutorial. Thank you!!

marko vidanovic
marko vidanovic 2 months ago

Great video,but why you put width,and max width?Sorry for my bad english. :(

Programming with Peter

Wish you had this video a long time ago lol !...

Michael Rostom
Michael Rostom 2 months ago

Very good video 👌 liked and subscribed

WebHosting Squared
WebHosting Squared 2 months ago

Absolutely Great! #Subscribed and #ThumbsUp

Ilyas Mohamed
Ilyas Mohamed 2 months ago

Wow, this video is great. I'm trying to work more on web dev but find my front end skills are lacking. I can imagine great design in my head, but somewhat struggle to implement it. What resources would you suggest to become better at front end.

a new subscriber ;)

Lancelot 2 months ago

Really clean code! You make me want to get back into HTML, thanks man!

hppy c javs
hppy c javs 2 months ago

Hope the time comes that i can do this/these on my my own... great content as always, much appreciated!!!

© Copyright 2021 О Детях. All Rights Reserved
Made with by О Детях