HomeОбразованиеRelated VideosMore From: Online Tutorials

Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery

2952 ratings | 113162 views
Please LIKE our NEW Facebook page for daily updates... https://www.facebook.com/Online-Tutorial-Html-Css-JQuery-Photoshop-1807958766120070/
Html code for embedding videos on your blog
Text Comments (150)
Online Tutorials (1 month ago)
please like and share this video... and also SUBSCRIBE my channel for daily new video...and don't forget to press the bell icon for daily notification
Khalidh Sd (1 month ago)
Can u send me the code repo please.. it is very helpful to understand.
Christian Saco (1 month ago)
but sir how to link the Submit text into another html?
sasikala tholisam (5 days ago)
input type email its not floating text why?
Rafy sanchez (6 days ago)
Great job !
Rafy sanchez (6 days ago)
Github ?
Kaushik Bhowmick (8 days ago)
You are the best...
Kaushik Bhowmick (8 days ago)
I just love it...
Mac McCarthy (14 days ago)
Great form and "Happy Diwali" to you and yours.
Seneza Vedaste (16 days ago)
look great!!!
Sanjar Shaikh (23 days ago)
Hello Online Tutorials please yahi same aspx page k liye muje pata nahi chala to plz uski 1 video bana sakte hai
Rachana Prakash (24 days ago)
very helpful
Shreya Ulligeri (25 days ago)
Plz provide with the code
Dream Floaty (25 days ago)
Userame... nice tutorial!
Raymond (27 days ago)
Oww. :valid smart
darshan hegde (27 days ago)
Bro use placeholders
Nabuko donozor (28 days ago)
How do i center the submit?
Aarr Ridho (27 days ago)
align:center; on your submit?
KRYPTON TM (28 days ago)
You the best
Vijay Gaur (28 days ago)
nice
shahinraj raj (30 days ago)
nice...
VMAJSTER (1 month ago)
*nice*
AA A (1 month ago)
As soon as I saw tthis I figured out how to do it within seconds, but I can never pull out such a beautiful design and colors! Good at programming != good at design That's just beautiful mate, nice work!
REDOUAN EL HAMMOUTI (1 month ago)
thanks
Pointer-events: none; not working and my first text box text trasnsition continues. What I do
Mazhar Nazar (1 month ago)
share your background pic in link..?
Chapapa picarra (1 month ago)
my css for .box { } is not working weird
Silvia David (1 month ago)
This soundtrack made me watch the entire tutorial ;) loved it .
Anthony Kuci (1 month ago)
can I have the soundtrack please?
abhinesh nangla (1 month ago)
Beautiful
Jaime Ursua Jr.II (1 month ago)
Can I have your CSS?
Ryan Matos (1 month ago)
i've seen your videos, you're so good hahahah! sometimes i increase some of your codes on my website. It's on building, but its getting being great thanks you
Cristian Flores (1 month ago)
👏👏👏👏👏👏👏👏👏👏
Mühendis Matematik (1 month ago)
thank you man
Philippe Anglade (1 month ago)
Well, it's just playing around with a bunch of ccs attributes, until you get the result you want. Nothing interesting in this.
WiŚNi0X (1 month ago)
Beautiful, but this music is so sad ;)
Isaac Fernandes (1 month ago)
anyone help please . input and text are getting merged example if i put username it is mixing with the text "USERNAME" and same happening with password
Muhammad-Zahid Ali (1 month ago)
Is it responsive on mobo devices?
indhu mathi (1 month ago)
Please make registration forms like this
Эд Лесничий (1 month ago)
2х and still slow...
HK_KING (1 month ago)
Pls put the source codes
Oluwaseun (1 month ago)
Why do you have two border property?
Willy Kimura (1 month ago)
Hey, great tutorial there! For an easier workflow when creating your websites, try using Browser Refresh (https://deskjs.wordpress.com/browser-refresh). It will greatly simplify your design-work, letting you avoid the usual minimize-refresh design loop that web designers get into. Thanks!
Bhavani Sankar (1 month ago)
Is it responsive? ..
Tarun Thakur (1 month ago)
Bro I want cord of this fome
Rakibul Islam (2 months ago)
Thank you it's working.
RescovarS Production (2 months ago)
Thank You gusy.
giridharan k (2 months ago)
.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working give some soultion
Alexi Marchandise (1 month ago)
Thank you very much for your help i had the same problem
Dan Cristian (2 months ago)
~ selector matches the second element that is following, so you need to have input + label in your html in that order. Hope it helps
abhilash .r (2 months ago)
Bro do you have any idea on ripple effect on buttons. Pls share if you have that.
Tech Extra Dose (2 months ago)
Nice..
Mounir Ps (2 months ago)
Thanks, bro, but text file please?
Michael Tercias (2 months ago)
Can I have the source code? It would be a great help for my school project. Thanks in advance! <3 My Gmail is: [email protected]
Gurinder Singh (2 months ago)
to much good video
Aytekin Erlale (2 months ago)
You are amazing teaching. Thank you so much for everything
ANAMY GR (3 months ago)
Nice
Riza Aringga (3 months ago)
Soundtrack?
Debasish Das (3 months ago)
Wonderful
Aman Tailor (3 months ago)
Osm bro..
Joost Elferink (3 months ago)
Could someone help me, currently i am copying this login form. Till minute 7:00 it works fine, but the step starting at this point does not work. .box .inputBox label {} writes my labels to the top of the box instead of the inputBox. Could somebody explain my why?
Kiran Sahu (27 days ago)
keep label tag below the input type.
AA A (1 month ago)
The inputBox has to have position:relative; When you use position:absolute; and there is no parent with position:relative; then top:0; will mean from top of html tag, but seeing a parent as relative wis make top:0; be at the location of that parent, if you have multiple relative parents it will take the closest parent that is.
Dhanraj Chandanshive (1 month ago)
add this in css code form > div { position: relative; }
Andrea V. (3 months ago)
Joost Elferink me too...
Kai Xie (3 months ago)
.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working
Kiran Sahu (27 days ago)
keep label tag below the input type.
SerTnic (2 months ago)
9:40 - Do you have repuired="" ?
jacob okumu (3 months ago)
Real good stuff. thanks alot
bipul santosh (3 months ago)
Can u tell me which tool Ur using to write the code
bipul santosh (3 months ago)
And if u hve the download link plzzz forward it
rk boom (4 months ago)
please help .box .inputBox input:focus~label .box .inputBox input:valid~label its not working
Online Tutorials (4 months ago)
.box .inputBox input:focus~label, .box .inputBox input:valid~label missing ,
Hunain Bugti (4 months ago)
Can you make a sign up form with this type of style please
Isaac Fernandes (1 month ago)
Online Tutorials pls read my comment and help
Hunain Bugti (4 months ago)
thank you so much bro love you I subscribed :)
Online Tutorials (4 months ago)
ok bro
Reshob Saha (4 months ago)
plzz give me the code
Shreya Ulligeri (25 days ago)
If you have the code plz do send me
شبح الاختراق (4 months ago)
WHAT IS THE NAME OF THE PROGRAM YOU USE IT FOR EDIT WEBPAGES
Anurag Das (4 months ago)
Sublime Text Editor 3+Emmet
David Pereira (5 months ago)
Your tutorial has a problem that a friend of mine helped me solve it. You´re not explainning how to use the "input:valid" so he told to use that.... .box .inputBox input:focus ~ label { top: -18px; left: 0; color: #03a9f4; font-size: 12px; } .box .inputBox input:valid ~ label { top: -18px; left: 0; color: #03a9f4; font-size: 12px; } He use the two parameters and separated them, input:focus{} input:valid{} and the problem was solved.
Abdullah Safdar (2 months ago)
still not working
Mohamed BEN AMMAR (5 months ago)
very inteligent tuto .... really its the best of the best ...
יובל הנדלר (5 months ago)
how can I get the code?
Tahsin Serkan Yaman (5 months ago)
You are hero, my king
Clem oy (5 months ago)
my html is not adjusting as i work
Rehan Haider (5 months ago)
when apply on text area label and input text got merge
TUTOS pour débutants (6 months ago)
Wow really beautyfull
Camel Firm (6 months ago)
Dont do Copy paste please You are full of idiot
OLIZ (6 months ago)
Perfect video but I've got a problem. If my input fields are not "required" the labels are always above. Do you know how I can fix that? :)
M. Ameer (6 months ago)
What's the name of the sound track?!!
haitam jaafar (6 months ago)
merci
haitam jaafar (6 months ago)
1:46
Pankaj Mahajan (6 months ago)
I want to take your services about Login Form, Please get in touch via my email "[email protected]". Please contact me as soon as possible, Thanks
KUMARESH A (6 months ago)
Can the text made in 180 degree? If available, please send howvtovdo in html css & jquery.
salem sarraj (7 months ago)
thanx >> but in css >>>>> input:valid >> it's not working :(
Siva Krishna (15 days ago)
replace required="" with just required
Adam Devine (2 months ago)
Hey bro mine is working , check your coding
Online Tutorials (7 months ago)
check ur code
Rahma Aldobai (7 months ago)
Please can you send codes to my email [email protected]
Dave Muñoz (7 months ago)
what's the resolution of your background?
Som 2037 (7 months ago)
Axsan bro wa cajib
Pavan Kumar (8 months ago)
Great
Anthony Cacho (8 months ago)
how would you insert an if and else to this?
abhishek kumar (8 months ago)
thankyou its help me alot
viren bhanushali (8 months ago)
U forgot to show the validation process
Louis Lau (8 months ago)
it covered my drop down menu..........
Eshlimvninc Too (9 months ago)
F5 to reload
Mario Franco Correa (9 months ago)
How I can include a record for users not registered on the page to make the registration directly on the login page.
DroidTech (6 months ago)
Mario Franco Correa also would like to know about this
Mario Franco Correa (9 months ago)
Could you pass me the complete zip file of him? [email protected]
Argha Basu (10 months ago)
username spelling wrong but good video helpfull for me
alexander alexander (4 months ago)
is this spelling wrong lol
Online Tutorials (10 months ago)
thanks bro
abo osama (10 months ago)
amazing keep it up dude
Anam Memon (10 months ago)
Background image is not visible
João Dias (28 days ago)
gotta have a bg.jpg image in the same folder as your index.html
Online Tutorials (10 months ago)
check ur code
Geek Forensic (10 months ago)
The background sound is creepy.
educational software (10 months ago)
Can you say how to download ps for free
educational software (10 months ago)
Online Tutorials please I want to make a video on that and I am following your video to educated my self I want to get more knowledge please help me please
Online Tutorials (10 months ago)
+educational software no
educational software (10 months ago)
I want ps bro
Reksmey Ok (10 months ago)
Thank for your great login video
Online Tutorials (10 months ago)
welcome bro
Ezra Holladay (11 months ago)
here is the code guys! : <html> <head> <meta charset="utf-8"> <title>Input From UI Design</title> <link rel="stylesheet" href="styles.css"> </head> <html> <body> <div class="box"> <h2>Login</h2> <form> <div class="inputBox"> <input type="text" name="" required=""> <label>username</label> </div> <div class="inputBox"> <input type="password" name="" required=""> <label>password</label> </div> <input type="submit" name="" value="submit"> </form> </div> </body> </html> CSS: body { margin: 0; padding: 0; font-family: sans-serif; background: url(file name); background-size: cover; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; padding: 40px; background: rgba(0,0,0,.8); box-sizing: border-box; box-shadow: 0 15px 25px rgba(0,0,0,.5); border-radius: 10px; .box h2 { margin: 0 0 30px; padding: 0; color: #fff; color: darkseagreen; text-align: center; } .box .inputBox { position: relative; } .box .inputBox input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .box .inputBox label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label { top: -20px; left: 0; color: #03a9f4; font-size: 12px; } .box input[type="submit"] { background: transparent; border: none; outline: none; color: #fff; background: #03a9f4; padding: 10px 20px; cursor: pointer; border-radius: 5px; } note: i have some things colored in too!
Ezra Holladay (7 months ago)
+Rahma Aldobai, I'm a little confused (if you mean anything) thanks for subscribing!
Rahma Aldobai (7 months ago)
Thanks but why it doesn't copy
Ezra Holladay (7 months ago)
+Andre Cahya very glad I helped
Andre Cahya (7 months ago)
thanks
Ezra Holladay (8 months ago)
+suli no problem
Around the world (11 months ago)
please send me code source [email protected]
Around the world (11 months ago)
please send me code source [email protected]
Clecio Silva (11 months ago)
Please, send me archives? [email protected]

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.