پیشنمایش زنده
کد HTML
<div class="form-container">
<input checked="" type="checkbox" id="switch" />
<div class="sign-up-container">
<span class="form-title">Sign Up</span>
<label for="switch" class="switch-label">Already have an account?</label>
<form class="sign-up-form">
<label for="username-sign-up">Username</label>
<input
class="input"
placeholder="Jonathon"
id="username-sign-up"
name="Username"
type="text"
/>
<label for="email-sign-up">Email</label>
<input
class="input"
placeholder="jonny_doe@example.com"
id="email-sign-up"
name="Email"
type="email"
/>
<label for="pwd-sign-up">Password</label>
<input
class="input"
placeholder="••••••••"
id="pwd-sign-up"
name="Password"
type="password"
/>
<label for="confirm-pwd-sign-up">Confirm Password</label>
<input
class="input"
placeholder="••••••••"
id="confirm-pwd-sign-up"
name="Password"
type="password"
/>
<button>Sign Up</button>
</form>
</div>
<div class="log-in-container">
<span class="form-title">Login</span>
<label for="switch" class="switch-label">Don't have an account?</label>
<form class="log-in-form">
<label for="email-log-in">Email</label>
<input
class="input"
placeholder="jonny_doe@example.com"
id="email-log-in"
name="Email"
type="email"
/>
<label for="pwd-log-in">Password</label>
<input
class="input"
placeholder="••••••••"
id="pwd-log-in"
name="Password"
type="password"
/>
<a class="forgot-pwd">Forgot password?</a>
<button>Login</button>
<div class="social-message">
<div class="line"></div>
<p class="message">Login with social accounts</p>
<div class="line"></div>
</div>
<div class="social-icons">
<button aria-label="Log in with Google" class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="w-5 h-5 fill-current"
>
<path
d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z"
></path>
</svg>
</button>
<button aria-label="Log in with Twitter" class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="w-5 h-5 fill-current"
>
<path
d="M31.937 6.093c-1.177 0.516-2.437 0.871-3.765 1.032 1.355-0.813 2.391-2.099 2.885-3.631-1.271 0.74-2.677 1.276-4.172 1.579-1.192-1.276-2.896-2.079-4.787-2.079-3.625 0-6.563 2.937-6.563 6.557 0 0.521 0.063 1.021 0.172 1.495-5.453-0.255-10.287-2.875-13.52-6.833-0.568 0.964-0.891 2.084-0.891 3.303 0 2.281 1.161 4.281 2.916 5.457-1.073-0.031-2.083-0.328-2.968-0.817v0.079c0 3.181 2.26 5.833 5.26 6.437-0.547 0.145-1.131 0.229-1.724 0.229-0.421 0-0.823-0.041-1.224-0.115 0.844 2.604 3.26 4.5 6.14 4.557-2.239 1.755-5.077 2.801-8.135 2.801-0.521 0-1.041-0.025-1.563-0.088 2.917 1.86 6.36 2.948 10.079 2.948 12.067 0 18.661-9.995 18.661-18.651 0-0.276 0-0.557-0.021-0.839 1.287-0.917 2.401-2.079 3.281-3.396z"
></path>
</svg>
</button>
<button aria-label="Log in with GitHub" class="icon">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
class="w-5 h-5 fill-current"
>
<path
d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z"
></path>
</svg>
</button>
</div>
</form>
</div>
</div>
کد CSS
.form-container {
position: relative;
perspective: 50rem;
width: 50rem;
height: 50rem;
}
#switch {
display: none;
}
.sign-up-form,
.log-in-form {
display: flex;
flex-direction: column;
height: 100%;
}
.sign-up-container,
.log-in-container {
position: absolute;
display: flex;
flex-direction: column;
inset: 0;
margin: auto;
width: 20rem;
height: 20rem;
background: #2c164f;
color: #fff;
padding: 1rem;
border-radius: 0.5rem;
}
.switch-label {
font-size: x-small;
text-decoration: underline;
cursor: pointer;
}
.form-title {
font-size: x-large;
font-weight: bold;
}
:where(.sign-up-form, .log-in-form) label {
font-size: x-small;
padding-top: 0.5rem;
padding-left: 0.25rem;
}
:where(.sign-up-form, .log-in-form) input {
background-color: #fff2;
box-sizing: border-box;
color: white;
border: 0;
border-bottom: 2px solid #cfb2ff;
padding: 0.25rem;
border-top-left-radius: 0.25rem;
border-top-right-radius: 0.25rem;
}
:where(.sign-up-form, .log-in-form) input:focus-visible {
outline: none;
border: 1px solid white;
border-bottom: 2px solid #cfb2ff;
}
:where(.sign-up-form, .log-in-form) button {
margin-top: auto;
background-color: #ffffff4b;
color: white;
border: 0;
padding: 0.25rem;
border-radius: 0.25rem;
cursor: pointer;
}
.forgot-pwd {
font-size: x-small;
text-decoration: underline;
margin-left: auto;
cursor: pointer;
}
/* Social yoinked from uiverse.io/Yaya12085/short-panda-24 */
.social-message {
display: flex;
align-items: center;
padding-top: 1rem;
}
.line {
height: 1px;
flex: 1 1 0%;
background-color: #cfb2ff;
}
.social-message .message {
padding-left: 0.75rem;
padding-right: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: #fff;
}
.social-icons {
display: flex;
justify-content: center;
}
.social-icons .icon {
border-radius: 0.125rem;
padding: 0.75rem;
padding-bottom: 0.25rem;
border: none;
background-color: transparent;
margin-left: 8px;
cursor: pointer;
}
.social-icons .icon svg {
height: 1.25rem;
width: 1.25rem;
fill: #fff;
}
.sign-up-container {
animation: hello 0.5s linear forwards;
}
.log-in-container {
animation: unhello 0.5s linear forwards;
}
#switch:checked ~ .sign-up-container {
animation: unhello 0.5s linear forwards;
}
#switch:checked ~ .log-in-container {
animation: hello 0.5s linear forwards;
}
@keyframes hello {
0% {
transform: rotateY(-90deg);
display: none;
}
50% {
transform: rotateY(-90deg);
display: flex;
}
100% {
transform: rotateY(0deg);
display: flex;
}
}
@keyframes unhello {
0% {
transform: rotateY(0deg);
display: flex;
}
50% {
transform: rotateY(90deg);
display: flex;
}
100% {
transform: rotateY(90deg);
display: none;
}
}