arrow_upward

Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Sign In/Up Form Transitions with CSS3
#1
HTML
As usual, we will start by creating forms, you copy the html standard frame as follows:
<form>
 <input checked id='signin' name='action' type='radio' value='signin'>
 <label for='signin'>Sign in</label>
 <input id='signup' name='action' type='radio' value='signup'>
 <label for='signup'>Sign up</label>
 <input id='reset' name='action' type='radio' value='reset'>
 <label for='reset'>Reset</label>
 <div id='wrapper'>
   <div id='arrow'></div>
   <input id='email' placeholder='Email' type='text'>
   <input id='pass' placeholder='Password' type='password'>
   <input id='repass' placeholder='Repeat password' type='password'>
 </div>
 <button type='submit'>
   <span>
     Reset password
     <br>
     Sign in
     <br>
     Sign up
   </span>
 </button>
</form>
[font=Tahoma, Arial, sans-serif]CSS[/font]
[font=Tahoma, Arial, sans-serif]And your work is also extremely simple to copy the css below to create effects for the form, you can refer to each paragraph to see how they create the effect, so that you can creative in their own way.[/font]
body, html {
 margin: 0;
 padding: 0;
}

html, body { margin: 0; }

:focus { outline: none; }
::-webkit-input-placeholder { color: #DEDFDF; }
::-moz-placeholder { color: #DEDFDF; }
:-moz-placeholder { color: #DEDFDF; }
::-ms-input-placeholder { color: #DEDFDF; }

body {
 background: #6ED0F6;
 color: #fff;
 font-family: 'Raleway', sans-serif;
 -webkit-font-smoothing: antialiased;
}

#wrapper, label, #arrow, button span { transition: all .5s cubic-bezier(.6,0,.4,1); }

#wrapper { overflow: hidden; }

#signin:checked ~ #wrapper { height: 178px; }
#signin:checked ~ #wrapper #arrow { left: 32px; }
#signin:checked ~ button span { transform: translate3d(0,-72px,0); }

#signup:checked ~ #wrapper { height: 262px; }
#signup:checked ~ #wrapper #arrow { left: 137px; }
#signup:checked ~ button span { transform: translate3d(0,-144px,0); }

#reset:checked ~ #wrapper { height: 94px; }
#reset:checked ~ #wrapper #arrow { left: 404px; }
#reset:checked ~ button span { transform: translate3d(0,0,0); }

form {
 width: 450px;
 height: 370px;
 margin: -185px -225px;
 position: absolute;
 left: 50%;
 top: 50%;
}

input[type=radio] { display: none; }

label {
 cursor: pointer;
 display: inline-block;
 font-size: 22px;
 font-weight: 800;
 opacity: .5;
 margin-bottom: 30px;
 text-transform: uppercase;
}
label:hover {
 transition: all .3s cubic-bezier(.6,0,.4,1);
 opacity: 1;
}
label[for="signin"] { margin-right: 20px; }
label[for="reset"] { float: right; }
input[type=radio]:checked + label { opacity: 1; }

input[type=text],
input[type=password] {
 background: #fff;
 border: none;
 border-radius: 8px;
 font-size: 27px;
 font-family: 'Raleway', sans-serif;
 height: 72px;
 width: 99.5%;
 margin-bottom: 10px;
 opacity: 1;
 text-indent: 20px;
 transition: all .2s ease-in-out;
}
button {
 background: #079BCF;
 border: none;
 border-radius: 8px;
 color: #fff;
 cursor: pointer;
 font-family: 'Raleway', sans-serif;
 font-size: 27px;
 height: 72px;
 width: 100%;
 margin-bottom: 10px;
 overflow: hidden;
 transition: all .3s cubic-bezier(.6,0,.4,1);
}
button span {
 display: block;
 line-height: 72px;
 position: relative;
 top: -2px;
 transform: translate3d(0,0,0);
}
button:hover {
 background: #007BA5;
}

#arrow {
 height: 0;
 width: 0;
 border-bottom: 10px solid #fff;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 position: relative;
 left: 32px;
}


#hint {
 width: 100%;
 text-align: center;
 position: absolute;
 bottom: 20px;
}
[font=Tahoma, Arial, sans-serif]Thanks for reading the article, article from a source on the net[/font]
Source: https://www.thuthuatweb.net/css/sign-in-up-form-transitions-cuc-cool-voi-css3.html


Attached Files Thumbnail(s)
   
#2
@huuthi95 Please provide the source link and credit the guide author.

Follow up question for the SIGN UP for this CSS, when an individual sign up and input their password, for security purposes I want to make the password to be MD5 when you check in database. Does CSS codes need to be edited or only on MySQL side?
#3
(11-20-2018, 09:34 PM)Vuluts Wrote: @huuthi95 Please provide the source link and credit the guide author.

Follow up question for the SIGN UP for this CSS, when an individual sign up and input their password, for security purposes I want to make the password to be MD5 when you check in database. Does CSS codes need to be edited or only on MySQL side?

Thank you, I've noted the article source below the bottom of the page, If you want to customize according to needs, you customize the CSS, or you keep it and just modify MySQL
#4
plaintext password or hash is bad. give a good read of this article to know more on this..

https://stackoverflow.com/questions/2345...on-via-get
Sincere Thanks to VirMach for my VPS9. Also many thanks to Shadow Hosting and cubedata for the experiences I had with their VPSs.


person_pin_circle Users browsing this thread: 2 Guest(s)
Sponsors: VirMach - Host4Fun - CubeData - Evolution-Host - HostDare - Hyper Expert - Shadow Hosting - Bladenode - Hostlease - RackNerd - ReadyDedis - Limitless Hosting