Transparent Login Form with floating Placeholder Text - Pure CSS Label Slide Up on Focus - No jQuery
HTML-код
- Опубликовано: 23 окт 2017
- Enroll My Course : Next Level CSS Animation and Hover Effects
www.udemy.com/course/css-hove...
Another Course : Build Complete Real World Responsive Websites from Scratch
www.udemy.com/course/complete...
------------------
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
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
Whenever i see things like these...am just thrilled and excited. What a joy programming brings!
That works perfectly. Thanks from Brazil.
Welcome bro
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!❤️
You are amazing teaching. Thank you so much for everything
it was very wonderful , keep going ,thank you
I liked very much as a refresher. The Best and so is the Music
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!️
Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.
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!
essa forma de centralizar a caixa utilizando o "tranform: translate" eu não sabia. Sensacional!
Great form and "Happy Diwali" to you and yours.
This soundtrack made me watch the entire tutorial ;) loved it .
Thank for your great login video
welcome bro
Simple and beautiful.
Thank you for sharing your knowledge
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
thankyou its help me alot
God bless you dude you are a great developer
Nossa, muito bacana 👏👏👏
Poderia fazer a parte 2
Abrindo outra tela que tenha alguma coisa
Thank You Soooo Much For Your Video...It Helped Me A Lot Today... Now I Am Able To Submit My Assignmet With Satisfaction....
Thay was Awesome... 🤟🤟💥💥
amazing keep it up dude
Brother thank you so much you are training use full thank you so much
Life saver!!! Thanks ❤️
Excellent tutorial
Awesome tutorial
Real good stuff. thanks alot
Great Video... Love and support from Pakistan 😍 🇵🇰
this really helps me thanks brother
Good job make more videos related to this with different creative design..✌✌✌✌
thinks a lot , i mad this form with flask and cefpython it looks solid rocks
thank u a lot sir , u help me in my final project in my collage with this perfect design
nice workkkk..........thank you share inspirational video
excellent video. Thank you very much
keep it up bro.. amazing video
Thank you it's working.
I think u deserve more subscriber, keep it up bro....👌👌👌
You are hero, my king
Thank you for the video
awesome tutorial man
amazing stuff!!
Nice job bro!!!
Gracias! Eres increíble!!
Amazing coding
perfect video thanks
Muy bien genio! muchisimas gracias
LIKE FROM CENTRAL ASIA🇰🇬
I just love it...
spectacular video.
Superb tutorial.
ME SALVASTE LA VIDA BRO
Beautiful.
greaT Tutorial brother:)
excellent good video
Userame... nice tutorial!
Thanks a lot my indian friend
Beautiful
You are the best...
Thanks from Iraq
what's the resolution of your background?
very nice, thanks
thanks from IRAN
Thank you, bro! Do you think this code will work perfectly in responsible web sites?
Very Thanks !
song: Crypttic Sorrow-Meditation & Relaxation & Healing Music
Awesome
Wonderful
thank you man
i am now looking at my successful login form with tears on my eyes
Plz send me code on my gmail
thanks you
Axsan bro wa cajib
I listen to the background music, depression increases
😂
😂😂right
God bless you
tq.its helpful
nice...
Finally #thnx u
*_Nice_*
super sir
Professional
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? :)
Osm bro..
Thanx aloooot
obrigado
Thanks you
thank you
Nice..
Parabens
Bro do you have any idea on ripple effect on buttons. Pls share if you have that.
thanks
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
Great
Why appears to me the border of the text box in red when I click outside of the text area?
mera background image nhi hoo rha upload aur submit button pr 'hand' jaisa pointer bhi nhi aa rha.... kya kru... plz batao na...
I like the music more than the video
Dude I think the background music is scary for me XD
#Mohammad would you please make a tutorial on owl - carousel 2 complete step by step. .... with transparent menu. .....
*nice*