Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery
Вставка
- Опубліковано 30 вер 2024
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/...
------------------
Join Our Channel Membership And Get Source Code Everyday
Join : / @onlinetutorialsyt
------------------
Source Code : / source-code-form-36809303
------------------
Please LIKE our Facebook page for daily updates...
/ online-tutorial-html-c...
Source Code : www.patreon.com/posts/source-code-form-36809303
cant i get the source code for free
@@vishalsadhnani1042 then type yourself then
MikeTheGameDev bro why?
@@vishalsadhnani1042 no, idiot, code aint freer... what u think this is?
@@mikethegamedev yea, hear this idiot? "Can't I get the source code for free"? lol
here is the code guys! :
Input From UI Design
Login
username
password
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!
I love you
+Just Coding thanks! glad I helped!
ich liebe dich
Thank you So Much
+ Granit Rahmani Ich bin sehr froh, dass ich geholfen habe
Whenever i see things like these...am just thrilled and excited. What a joy programming brings!
That works perfectly. Thanks from Brazil.
Welcome bro
There is a problem
That section where you use
.box .inputbox input:valid ~label
me too
With "email" type, doesn't work. Did you know any method for do it work properly?
@@ivanvalleri9898 ya probably doing it wrong
Amazing coding
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
but sir how to link the Submit text into another html?
Can u send me the code repo please.. it is very helpful to understand.
Will you please share the code
Nice video, i dont get why transform -50% works to center instead of back to initial position. Thank you if u can answer
Give me coding
Nossa, muito bacana 👏👏👏
Poderia fazer a parte 2
Abrindo outra tela que tenha alguma coisa
I listen to the background music, depression increases
😂
😂😂right
2020 bro
I am missing background file!
Input Form UI Design
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;
}
Login
Username
Password
essa forma de centralizar a caixa utilizando o "tranform: translate" eu não sabia. Sensacional!
mera background image nhi hoo rha upload aur submit button pr 'hand' jaisa pointer bhi nhi aa rha.... kya kru... plz batao na...
song: Crypttic Sorrow-Meditation & Relaxation & Healing Music
Hello Online Tutorials please yahi same aspx page k liye muje pata nahi chala to plz uski 1 video bana sakte hai
What's fucking track!?
When I see this video, I want to sleep.
Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.
Css me .inputbox label me
Positions: absolute
Krny sy label simat kr box ky uper chaly gaye hai
Nice video, but why do you have to give wrong codes in the app 😡
Spent a lot of time figuring what was wrong till i noticed they were wrong codes
Which software he is using? Anyone Please
Bro css vale coding me bg.jpg picture kese dala
This code executes to perfection! Thank you! Quite a few other sites ,s=who offer the same video- wasted my time...THIS WORKED BEUTIFULLY! THANK YOU GUYS!️
Plz tell how can I use list box in this. I am unable to do that.. Plz help..
I didn't even notice this was a tutorial, I let youtube autoplay songs... lmao
Thank you, bro! Do you think this code will work perfectly in responsible web sites?
will you please this coding please i need urgent
Why is my box not at the center
U forgot to show the validation process
Hi sir
Before u make a glowing div with linear gradient
But if we dont want give body background color and just want to give color the parent div its not working
Please make a video on it how.we can make.glowing box without any body css.
Just i want a outer div with height 400px and widt 1000px. Inside this div i want a div width 400px and height 300px.
So i want glowing linear gradient at inside dive how i can??
I cant change my body css coding
I like the music more than the video
reminds me of something I've seen before...
Reminds me of material design from google, but less bloated, and far easy to customize.
I'm confused on the box-sizing property
What about it ?
He had to add placeholder, it would be easier
Thank You Soooo Much For Your Video...It Helped Me A Lot Today... Now I Am Able To Submit My Assignmet With Satisfaction....
This code executes to perfection! Thank you! Quite a few other sites ,s=who offer the same video- wasted my time...THIS WORKED BEUTIFULLY! THANK YOU GUYS!❤️
This music makes me want to sleep
Thanks a lot my indian friend
link of the picture please
Thank you for the video
code da do na dost
Thay was Awesome... 🤟🤟💥💥
Sir plz provide source code
I am trying to make this from work on my react projects but this (.box .inputbox input: valid ~label ) doesn't make the floating label work!
It’s your own problem bro. Try to debug it. 🙂
@@ashleypontay681 i already did that , and your reply did not help me or help anyone else :)
Awesome tutorial
Mau download
Him: "Pure CSS"
HTML: 👁👄👁
Validation in js please
Excellent tutorial
So sad music! XD Don't have the code in txt?!
bro can you make the video for animated caption image slider ?
666
make video with voice
Thank for your great login video
welcome bro
Great Video... Love and support from Pakistan 😍 🇵🇰
How to connect database
.box .inputBox input:focus ~ label,
.box .inputBox input:valid ~ label
not working
keep label tag below the input type.
Kiran Sahu why keeping it before input doesn't work?
@@tahmidzaman6675 If you use it before the input, you need the css z-index=9 (or any greater number) for your label...
+
Yes
Is it responsive??
sorry, but i don't understand why you code border:0; border: ...;. so what does first code mean? thanks!
I what u are writing
Which music is this?
use bootstrap bro
Bro great vids keep it up it helps a lot.
Bro pls tell my box size is not working code as follows :
box-sizing: border-box;
give me that code
ME SALVASTE LA VIDA BRO
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... ????
Professional
thanks you
I want to design a website without JAVA "YET". I don't want my brain to bleed lol.
God bless you
i want bg file
Speak ffs
Your code works perfectly....
However - since I am such a 'nubie' in coding - I always have a problem uploading a video background - and even the images that I use - never go full background cover. Always on one end of the page ...(drives me nuts...).Any helpful hints?
try background-size: cover; y background-repeat: no-repeat;
super sir
userame
Awesome
Awesome But can you tell us how to make a working login system plz. plz. help
*_Nice_*
Sir how to connect database connectivity
Php
nice workkkk..........thank you share inspirational video
Which software you use for coding ?
Many of my css commands are not recognised by the brackets and by the browser too.
Can anyone help me out please..
Can the text made in 180 degree? If available, please send howvtovdo in html css & jquery.
This is the song if someone ask
I
I
\/
Cryptic Sorrow - Atlantean Twilight ~ Kevin MacLeod
Thx for the video i like it and the music too you have good taste
Yikes.
Thanks
How can i moving the submit box on the center?
.box input [type="submit"] {margin-left: 100px; }
Sir aik problem a rahi hai
excellent video. Thank you very much
Muiti bom
Parabens
obrigado
Pointer-events: none; not working and my first text box text trasnsition continues. What I do
God bless you dude you are a great developer
The beginning of video shows the bottom border turning blue on focus, but not at the end, and its not shown in your code!
thank u a lot sir , u help me in my final project in my collage with this perfect design
you have cat put link github to convenient to follow
Well, it's just playing around with a bunch of ccs attributes, until you get the result you want. Nothing interesting in this.
can someone help me im trying to link to the sumbit buttom to a page but its not working
Thanks from Iraq
Sir can you make it in angular plz??
keep it up bro.. amazing video
i have problem all the labels didn't appear