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

[@OnlineTutorialsYT]

Source Code : www.patreon.com/posts/source-code-form-36809303

[@vishalsadhnani1042]

cant i get the source code for free

[@mikethegamedev]

@@vishalsadhnani1042 then type yourself then

[@Kinrinsalem]

MikeTheGameDev bro why?

[@pepi8433]

@@vishalsadhnani1042 no, idiot, code aint freer... what u think this is?

[@pepi8433]

@@mikethegamedev yea, hear this idiot? "Can't I get the source code for free"? lol

[@remdem622]

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!

[@_https]

I love you

[@remdem622]

+Just Coding thanks! glad I helped!

[@granitrahmani926]

ich liebe dich

[@Mycl0uds]

Thank you So Much

[@remdem622]

+ Granit Rahmani Ich bin sehr froh, dass ich geholfen habe

[@Jewish5783]

Whenever i see things like these...am just thrilled and excited. What a joy programming brings!

[@saulosouza5494]

That works perfectly. Thanks from Brazil.

[@OnlineTutorialsYT]

Welcome bro

[@zieryreis6663]

essa forma de centralizar a caixa utilizando o "tranform: translate" eu não sabia. Sensacional!

[@OnlineTutorialsYT]

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

[@Doms.s]

but sir how to link the Submit text into another html?

[@Sm.khalidh]

Can u send me the code repo please.. it is very helpful to understand.

[@shyamjaiswal04]

Will you please share the code

[@GambeensDevelop]

Nice video, i dont get why transform -50% works to center instead of back to initial position. Thank you if u can answer

[@tanujkkumar5679]

Give me coding

[@StyleViewStudio]

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!❤️

[@jahangirakbar4524]

Great Video... Love and support from Pakistan 😍 🇵🇰

[@AAA-bo1uo]

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!

[@fizatariq9398]

Thank You Soooo Much For Your Video...It Helped Me A Lot Today... Now I Am Able To Submit My Assignmet With Satisfaction....

[@ЧынгызМамаев-ж2х]

LIKE FROM CENTRAL ASIA🇰🇬

[@mdkhorshed2043]

Thay was Awesome... 🤟🤟💥💥

[@jefjean]

Nossa, muito bacana 👏👏👏 Poderia fazer a parte 2 Abrindo outra tela que tenha alguma coisa

[@MohdAsif-mz8vx]

Amazing coding

[@FahadKhan-lw2pp]

There is a problem That section where you use .box .inputbox input:valid ~label

[@abooodkns8301]

me too

[@ivanvalleri9898]

With "email" type, doesn't work. Did you know any method for do it work properly?

[@Moodboard39]

@@ivanvalleri9898 ya probably doing it wrong

[@priteshvegad9231]

nice workkkk..........thank you share inspirational video

[@alexandra-dianastoica4970]

song: Crypttic Sorrow-Meditation & Relaxation & Healing Music

[@AlexSandro-te9ci]

Muito obrigado, aprendi mais uma agora. Ótimo para usar esses efeitos.

[@Yazen.hamdan9]

thank u a lot sir , u help me in my final project in my collage with this perfect design

[@DcodeShow]

God bless you dude you are a great developer

[@valentinstefanov1502]

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

[@andreypanin5257]

Yikes.

[@youtubeyh]

Thanks

[@shekhsaifuddin1353]

I think u deserve more subscriber, keep it up bro....👌👌👌

[@drupaldev5039]

I liked very much as a refresher. The Best and so is the Music

[@AngelGarcia_103]

I listen to the background music, depression increases

[@_.sunnyraj._]

😂

[@Khanimran7020]

😂😂right

[@silviadavid676]

This soundtrack made me watch the entire tutorial ;) loved it .

[@toxin26]

keep it up bro.. amazing video

[@sanketdhumal4538]

mera background image nhi hoo rha upload aur submit button pr 'hand' jaisa pointer bhi nhi aa rha.... kya kru... plz batao na...

[@rittwickbhabak7348]

Awesome tutorial

[@vkrdiaphony1755]

ME SALVASTE LA VIDA BRO

[@roku1892]

this really helps me thanks brother

[@StyleViewStudio]

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?

[@ohiwantyoutobelieve]

try background-size: cover; y background-repeat: no-repeat;

[@RezHimself]

Thanks a lot my indian friend

[@RichiRicheh]

spectacular video.

[@motdde]

Why do you have two border property?

[@akedarnathsharma3620]

Simple and beautiful.

[@arewenot]

i am now looking at my successful login form with tears on my eyes

[@omaissatti5883]

Plz send me code on my gmail

[@aytekinerlale3022]

You are amazing teaching. Thank you so much for everything

[@tahsinserkanyaman3459]

You are hero, my king

[@michaelriquelmemillapan3691]

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... ????

[@macmccarthy6609]

Great form and "Happy Diwali" to you and yours.

[@CR7MEXICO25]

what's the resolution of your background?

[@pawarasiriwardhane7755]

excellent video. Thank you very much

[@oliz3359]

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? :)

[@VivekPatilKudgaon]

Which software you use for coding ?

[@anthonycacho8952]

how would you insert an if and else to this?

[@kaushikbhowmick1648]

You are the best...

[@zastchu]

Life saver!!! Thanks ❤️

[@ezequielflores2934]

Muy bien genio! muchisimas gracias

[@sssrigoku]

Thank you for the video

[@AbhilashRamachandran]

Bro do you have any idea on ripple effect on buttons. Pls share if you have that.

[@strahinjanikolic8086]

How can i moving the submit box on the center?

[@manishanandaniya6]

.box input [type="submit"] {margin-left: 100px; }

[@lucciana33]

Hey, I'm curious, why using translate:transform(-50%,-50%), when you already have position

[@dazai_dev]

when he sets left and top properties to 50%, that's gonna move the element's top left corner to the middle of the page, so the whole element won't actually be centered. to actually center the element, you use the translate function which moves the element according to its current position, so when you move it up and left for 50% of its dimensions, its center gets to the center of the page and it gets set properly

[@RupeshKumar-rz3un]

We can use display grid and item a-line centre in two step form centre me vhala jayega

[@mohammedhussein7272]

Thanks from Iraq

[@multiengineer9199]

Which software he is using? Anyone Please

[@Hamzaelbouti]

thinks a lot , i mad this form with flask and cefpython it looks solid rocks

[@ishikamittal3632]

Plz tell how can I use list box in this. I am unable to do that.. Plz help..

[@Jihed]

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!

[@ashleypontay681]

It’s your own problem bro. Try to debug it. 🙂

[@Jihed]

@@ashleypontay681 i already did that , and your reply did not help me or help anyone else :)

[@davidmartinezdasilva]

Thank you, bro! Do you think this code will work perfectly in responsible web sites?

[@ryanfmatos]

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

[@SAGskills]

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

[@Deen-e-Haqqq]

Good job make more videos related to this with different creative design..✌✌✌✌

[@weblogodesign9213]

Beautiful.

[@jacobokumu6835]

Real good stuff. thanks alot

[@waqasy4431]

Css me .inputbox label me Positions: absolute Krny sy label simat kr box ky uper chaly gaye hai

[@hannaberyhvac2980]

The beginning of video shows the bottom border turning blue on focus, but not at the end, and its not shown in your code!

[@kaixie4597]

.box .inputBox input:focus ~ label, .box .inputBox input:valid ~ label not working

[@kiransahu157]

keep label tag below the input type.

[@tahmidzaman6675]

Kiran Sahu why keeping it before input doesn't work?

[@AndreasDirscherl87]

@@tahmidzaman6675 If you use it before the input, you need the css z-index=9 (or any greater number) for your label...

[@JOHNAGAINANAGAIN]

+

[@asmamehmood2387]

Yes

[@roydebayan4940]

amazing stuff!!

[@बहकतीकलम]

Pointer-events: none; not working and my first text box text trasnsition continues. What I do

[@sanjushaikh]

Hello Online Tutorials please yahi same aspx page k liye muje pata nahi chala to plz uski 1 video bana sakte hai

[@gomezmarco]

Gracias! Eres increíble!!

[@davidezordan8518]

Why appears to me the border of the text box in red when I click outside of the text area?

[@freakfx5687]

Nice job bro!!!

[@kaushikpal3414]

awesome tutorial man

[@kirubakarans_2385]

Brother thank you so much you are training use full thank you so much

[@reksmeyok1957]

Thank for your great login video

[@OnlineTutorialsYT]

welcome bro

[@windtosky]

very nice, thanks

[@abooodkns8301]

bro the section where u make the valid isnt working , help pls

[@mohideenasraf7837]

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 ?

[@OnlineTutorialsYT]

kzbin.info/www/bejne/eHzLoKJsh7h4erc u get answer with this...

[@kumaresha3348]

Can the text made in 180 degree? If available, please send howvtovdo in html css & jquery.

[@thevloglife105]

Superb tutorial.

[@kimpicarra4544]

my css for .box { } is not working weird

[@TienNguyen-ky4dx]

why don't you put box-sizing : border-box in body ?

[@Moodboard39]

People do it differently. I guess.

[@Moodboard39]

I go for efficiency.

[@jayparmar7603]

Professional

[@pcgamer6493]

Very Thanks !

[@joostelferink6303]

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?

[@andreav.2212]

Joost Elferink me too...

[@DhanrajChandanshive]

add this in css code form > div { position: relative; }

[@AAA-bo1uo]

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.

[@kiransahu157]

keep label tag below the input type.

[@maxsaCEO]

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; ... }

[@dreamfloaty2842]

Userame... nice tutorial!

[@learncode2564]

thanks from IRAN

[@soesoe5014]

please tell me the software used in this video

[@youdhistirdas2125]

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;

[@biancagiles5966]

This is great! I am just wondering how you would make this responsive?

[@byedwardleung]

Media queries

[@pepi8433]

through HTML

[@maeb100]

What is the function of this sign "~" ? I try the exact code, but I can't change the size when I write into the input

[@Moodboard39]

Those are CSS element . Like if u writing a list ,and you want a specific list to be colored, you would use ~ P~ ul Background : red; < Ul> coffee

[@qusaialkadi3686]

amazing keep it up dude

[@sasikalatholisam4098]

input type email its not floating text why?

[@abhishekkumardeveloper]

Which music is this?

[@mousamgangrade]

Many of my css commands are not recognised by the brackets and by the browser too. Can anyone help me out please..

[@CaptianTristian]

can someone help me im trying to link to the sumbit buttom to a page but its not working

[@csa563]

my html is not adjusting as i work

[@RakibulIslam-lw3ho]

Thank you it's working.

[@rehanhaider9172]

when apply on text area label and input text got merge

[@morrisndegwa1324]

Thank you for sharing your knowledge