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

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

3990 ratings | 153767 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 (184)
Online Tutorials (3 months 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
Aryan Jaiswal (1 day ago)
Will you please share the code
Khalidh Sd (3 months ago)
Can u send me the code repo please.. it is very helpful to understand.
Poging Asado (3 months ago)
but sir how to link the Submit text into another html?
Nikola Matic (1 day ago)
I am missing background file! <!doctype html> <html> <head> <meta charset="utf-8"> <title>Input Form UI Design</title> </head> <body> <style> body { margin: 0; padding: 0; font-family: sans-serif; background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; 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; text-align: center; } .box .inputBox { position: relative; } .box .inputBox input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; letter-spacing: 1px; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .box .inputBox label { position: absolute; top: 0; left: 0; letter-spacing: 1px; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: .5s; } .box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label { top: -18px; 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; } </style> <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>
Alex Sandro (2 days ago)
Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.
Ansari Shaukat (4 days ago)
Pura nhu ban paya sir to plz reply me sri
Ansari Shaukat (4 days ago)
Sir iska image ke remark me kya likhna hai mai banaya hu sam to but kuch nhi aya hau mera glat ho gya hau..
roseRose (7 days ago)
Nice song hahahahaha
Abi bubi (9 days ago)
Superb video...tq so much its vry useful to execute tq once again
Lawakesh Patel (11 days ago)
nice
Mr. Jr. (16 days ago)
Thank you very much bro! I´m from Brazil...
jemal mieso (18 days ago)
I want the most impressing php,css,js,html project!!
rishabh rawat (18 days ago)
Thanks for making the video!
kiruba karan (19 days ago)
Brother thank you so much you are training use full thank you so much
suriya (19 days ago)
*How to keep submit button in center*
Heedo Park (24 days ago)
very nice, thanks
Hamza el bouti (28 days ago)
thinks a lot , i mad this form with flask and cefpython it looks solid rocks
sanket dhumal (30 days ago)
mera background image nhi hoo rha upload aur submit button pr 'hand' jaisa pointer bhi nhi aa rha.... kya kru... plz batao na...
Eistein Theory (1 month ago)
Nice job bro!!!
xSuhlly (1 month ago)
can someone help me im trying to link to the sumbit buttom to a page but its not working
Anil Kumar Singh (1 month ago)
Sir iske Coding send kar dijiye
Drupal Dev (1 month ago)
I liked very much as a refresher. The Best and so is the Music
saulo souza (1 month ago)
That works perfectly. Thanks from Brazil.
Online Tutorials (1 month ago)
Welcome bro
Ng Jo-Yi (1 month ago)
tq.its helpful
Background image con cover 100% ancho y alto... un div con bg negro con transparencia y centrado con margin auto o flex y dentro sus respectivos hs y input... ????
Thanks you
tasya Revantara (1 month ago)
Mau download
Vitalis Mutovo (1 month ago)
add source coden pliz
Shekh Saifuddin (1 month ago)
I think u deserve more subscriber, keep it up bro....👌👌👌
Mohammed Hussien (1 month ago)
Thanks from Iraq
Mohideen Asraf (1 month ago)
Hi Bro, I have One doubt kindly clarify that. when input tag is focused i want give transition to input and the transition start from its center like google email login text box . can you please tell how to achieve this ?
Online Tutorials (1 month ago)
https://www.youtube.com/watch?v=BKhoo6RSEDU u get answer with this...
Nitesh Khatri (1 month ago)
Superb tutorial.
sasikala tholisam (2 months ago)
input type email its not floating text why?
Rafy sanchez (2 months ago)
Great job !
Rafy sanchez (2 months ago)
Github ?
Kaushik Bhowmick (2 months ago)
You are the best...
Kaushik Bhowmick (2 months ago)
I just love it...
Mac McCarthy (2 months ago)
Great form and "Happy Diwali" to you and yours.
Seneza Vedaste (2 months ago)
look great!!!
Sanjar Shaikh (2 months 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 (2 months ago)
very helpful
Shreya Ulligeri (2 months ago)
Plz provide with the code
Dream Floaty (2 months ago)
Userame... nice tutorial!
Raymond (2 months ago)
Oww. :valid smart
darshan hegde (2 months ago)
Bro use placeholders
Nabuko donozor (2 months ago)
How do i center the submit?
Aarr Ridho (2 months ago)
align:center; on your submit?
KRYPTON TM (2 months ago)
You the best
Vijay Gaur (2 months ago)
nice
shahinraj raj (2 months ago)
nice...
VMAJSTER (3 months ago)
*nice*
AA A (3 months 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 (3 months ago)
thanks
Pointer-events: none; not working and my first text box text trasnsition continues. What I do
Mazhar Nazar (3 months ago)
share your background pic in link..?
Chapapa picarra (3 months ago)
my css for .box { } is not working weird
Silvia David (3 months ago)
This soundtrack made me watch the entire tutorial ;) loved it .
Anthony Kuci (3 months ago)
can I have the soundtrack please?
abhinesh nangla (3 months ago)
Beautiful
Jaime Ursua Jr.II (3 months ago)
Can I have your CSS?
Ryan Matos (3 months 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 (3 months ago)
👏👏👏👏👏👏👏👏👏👏
Mühendis Matematik (3 months ago)
thank you man
Philippe Anglade (3 months 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 (3 months ago)
Beautiful, but this music is so sad ;)
Isaac Fernandes (3 months 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 (3 months ago)
Is it responsive on mobo devices?
indhu mathi (3 months ago)
Please make registration forms like this
Эд Лесничий (3 months ago)
2х and still slow...
HK_KING (3 months ago)
Pls put the source codes
Oluwaseun (3 months ago)
Why do you have two border property?
Willy Kimura (3 months 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 (3 months ago)
Is it responsive? ..
Tarun Thakur (3 months ago)
Bro I want cord of this fome
Rakibul Islam (3 months ago)
Thank you it's working.
RescovarS Production (3 months ago)
Thank You gusy.
giridharan k (4 months ago)
.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working give some soultion
Alexi Marchandise (3 months ago)
Thank you very much for your help i had the same problem
Dan Cristian (3 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 (4 months ago)
Bro do you have any idea on ripple effect on buttons. Pls share if you have that.
Tech Extra Dose (4 months ago)
Nice..
Mounir Ps (4 months ago)
Thanks, bro, but text file please?
Michael Tercias (4 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 (4 months ago)
to much good video
Aytekin Erlale (4 months ago)
You are amazing teaching. Thank you so much for everything
ANAMY GR (5 months ago)
Nice
Riza Aringga (5 months ago)
Soundtrack?
Debasish Das (5 months ago)
Wonderful
Aman Tailor (5 months ago)
Osm bro..
Joost Elferink (5 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?
Maxsa Soft&Design (1 month ago)
I was helped by the following changes: .box .inputBox label{ position: relative; top: -57px; ... } .box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label{ top: -80px; ... }
Kiran Sahu (2 months ago)
keep label tag below the input type.
AA A (3 months 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 (3 months ago)
add this in css code form > div { position: relative; }
Andrea V. (5 months ago)
Joost Elferink me too...
Kai Xie (5 months ago)
.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working
Kiran Sahu (2 months ago)
keep label tag below the input type.
SerTnic DEA (4 months ago)
9:40 - Do you have repuired="" ?
jacob okumu (5 months ago)
Real good stuff. thanks alot
bipul santosh (5 months ago)
Can u tell me which tool Ur using to write the code
bipul santosh (5 months ago)
And if u hve the download link plzzz forward it
rk boom (6 months ago)
please help .box .inputBox input:focus~label .box .inputBox input:valid~label its not working
Online Tutorials (6 months ago)
.box .inputBox input:focus~label, .box .inputBox input:valid~label missing ,
Hunain Bugti (6 months ago)
Can you make a sign up form with this type of style please
Isaac Fernandes (3 months ago)
Online Tutorials pls read my comment and help
Hunain Bugti (6 months ago)
thank you so much bro love you I subscribed :)
Online Tutorials (6 months ago)
ok bro
Reshob RS (6 months ago)
plzz give me the code
Shreya Ulligeri (2 months ago)
If you have the code plz do send me
شبح الاختراق (6 months ago)
WHAT IS THE NAME OF THE PROGRAM YOU USE IT FOR EDIT WEBPAGES
Anurag Das (6 months ago)
Sublime Text Editor 3+Emmet
David Pereira (7 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 (4 months ago)
still not working
Mohamed BEN AMMAR (7 months ago)
very inteligent tuto .... really its the best of the best ...
יובל הנדלר (7 months ago)
how can I get the code?
Tahsin Serkan Yaman (7 months ago)
You are hero, my king
Clem oy (7 months ago)
my html is not adjusting as i work
Rehan Haider (7 months ago)
when apply on text area label and input text got merge
TUTOS pour débutants (8 months ago)
Wow really beautyfull
Camel Firm (8 months ago)
Dont do Copy paste please You are full of idiot

Would you like to comment?

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