Implemented a switching effect for the login and registration page. When the user clicks the login or registration button, an overlay will appear containing a form. The user can enter the user name and password in the form, and then click the submit button to log in or register. When the user clicks the back button, the overlay is hidden and the login or registration form is displayed in the main area. This effect can improve the user experience and make it easier for users to log in or register.
<div class="container">
<!-- Register -->
<div class="container-form container-signup">
<form action="#" class="form" id="form1">
<h2 class="form-title">Register an account</h2>
<input type="text" placeholder="User" class="input" />
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<button type="button" class="btn">Click to register</button>
</form>
</div>
<!-- Login -->
<div class="container-form container-signin">
<form action="#" class="form" id="form2">
<h2 class="form-title">Welcome to log in</h2>
<input type="email" placeholder="Email" class="input" />
<input type="password" placeholder="Password" class="input" />
<a href="#" class="link">Forgot your password?</a>
<button type="button" class="btn">Login</button>
</form>
</div>
<!--Overlay part-->
<div class="container-overlay">
<div class="overlay">
<div class="overlay-panel overlay-left">
<button class="btn" id="signIn">
Already have an account? Log in directly</button>
</div>
<div class="overlay-panel overlay-right">
<button class="btn" id="signUp">
If you don’t have an account, click Register</button>
</div>
</div>
</div>
</div> body {
height: 100vh;
background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed;
background-size: cover;
backdrop-filter: blur(5px);
display: flex;
justify-content: center;
align-items: center;
}
/* Body div style*/
.container {
background-color: #e7e7e7;
border-radius: 0.7rem;
box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
height: 420px;
max-width: 750px;
overflow: hidden;
position: relative;
width: 100%;
}
/* Login and registration box part*/
.container-form {
height: 100%;
position: absolute;
top: 0;
transition: all 0.6s ease-in-out;
}
/* Login box-default level is high*/
.container-signin {
left: 0;
width: 50%;
z-index: 2;
}
/* Registration box - default level is low - transparency 0 */
.container-signup {
left: 0;
opacity: 0;
width: 50%;
z-index: 1;
}
/* form style*/
.form {
background-color: #e7e7e7;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 3rem;
height: 100%;
text-align: center;
}
.form-title {
font-weight: 300;
margin: 0;
margin-bottom: 1.25rem;
}
.link {
color: #333;
font-size: 0.9rem;
margin: 1.5rem 0;
text-decoration: none;
}
.input {
width: 100%;
background-color: #fff;
padding: 0.9rem 0.9rem;
margin: 0.5rem 0;
border: none;
outline: none;
}
.btn {
background-color: #f25d8e;
box-shadow: 0 4px 4px rgba(255, 112, 159, .3);
border-radius: 5px;
color: #e7e7e7;
border: none;
cursor: pointer;
font-size: 0.8rem;
font-weight: bold;
letter-spacing: 0.1rem;
padding: 0.9rem 4rem;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
.form>.btn {
margin-top: 1.5rem;
}
.btn:active {
transform: scale(0.95);
}
/* ---------- Overlay part style------------- */
.container-overlay {
height: 100%;
left: 50%;
overflow: hidden;
position: absolute;
top: 0;
transition: transform 0.6s ease-in-out;
width: 50%;
z-index: 100;
}
.overlay {
width: 200%;
height: 100%;
position: relative;
left: -100%;
background: url("./img/background.jpg") no-repeat center fixed;
background-size: cover;
transition: transform 0.6s ease-in-out;
transform: translateX(0);
}
.overlay-panel {
height: 100%;
width: 50%;
position: absolute;
top: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
/* The position of the overlay when the design is activated*/
.panel-active .overlay-left {
transform: translateX(0);
}
.panel-active .container-overlay {
transform: translateX(-100%);
}
.panel-active .overlay {
transform: translateX(50%);
}
/*Set the position and transparency of the login registration layer when activated*/
.panel-active .container-signin {
transform: translateX(100%);
}
.panel-active .container-signup {
opacity: 1;
z-index: 5;
transform: translateX(100%);
} body {
height: 100vh; /* Define the page height as the viewport height*/
background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; /* Define the page background as gray and add a background image*/
background-size: cover; /* Define the size of the background image to cover the entire page*/
backdrop-filter: blur(5px); /* Define background blur effect*/
display: flex; /* Define the page as a flexible box*/
justify-content: center; /* Define the main axis alignment as centered */
align-items: center; /* Define cross-axis alignment as centered */
} This code defines the overall style of the page, including height, background, border, shadow, etc. Among them, height: 100vh; means that the page height is the viewport height, background: #e7e7e7 url("./img/background.jpg") center no-repeat fixed; means that the page background is gray and a background image is added, background-size: cover; indicates that the background image is sized to cover the entire page, backdrop-filter: blur(5px); indicates the background blur effect.
.container-form {
height: 100%; /* Define the container height to 100% */
position: absolute; /* Define the container to be absolutely positioned*/
top: 0; /* Define the distance from the top of the container to 0 */
transition: all 0.6s ease-in-out; /* define transition effect*/
}
.container-signin {
left: 0; /* Define the login box to be 0 from the left */
width: 50%; /* Define the login box width to be 50% */
z-index: 2; /* Define the login box level to be 2 */
}
.container-signup {
left: 0; /* Define the registration box distance to the left to be 0 */
opacity: 0; /* Define the registration box transparency to 0 */
width: 50%; /* Define the registration box width as 50% */
z-index: 1; /* Define the registration box level as 1 */
} This code defines the style of the login and registration boxes, including position, transparency, level, etc. Among them, height: 100%; means that the height of the container is 100%, position: absolute; means that the container is absolutely positioned, top: 0; means that the distance from the top of the container is 0, transition: all 0.6s ease-in-out; means the transition effect.
.form {
background-color: #e7e7e7; /* Define the form background as gray*/
display: flex; /* Define the form as a flexible box*/
align-items: center; /* Define cross-axis alignment as centered */
justify-content: center; /* Define the main axis alignment as centered */
flex-direction: column; /* Define the main axis direction as the vertical direction*/
padding: 0 3rem; /* Define the inner margins of the form to be 3rem on the left and right */
height: 100%; /* Define the form height to 100% */
text-align: center; /* Define form text alignment to center*/
}
.form-title {
font-weight: 300; /* Define the title font weight to 300 */
margin: 0; /* Define the title margin to 0 */
margin-bottom: 1.25rem; /* Define the bottom margin of the title to 1.25rem */ }
.link { color: #333; /* Define the link color to be black/ font-size: 0.9rem; / Define the link font size to be 0.9rem / margin: 1.5rem 0; / Define the link margins to be 1.5rem for the top and bottom, left and right Each 0 / text-decoration: none; / Define links to remove underlines*/ }
.input { width: 100%; /* Define the input box width as 100% / background-color: #fff; / Define the input box background as white / padding: 0.9rem 0.9rem; / Define the input box inner margins as upper and lower 0.9rem, 0.9rem on the left and right / margin: 0.5rem 0; / Define the outer margin of the input box as 0.5rem on the top and bottom, 0 on the left and right / border: none; / Define the input box to have no border / outline: none; / Define the input box to have no outline*/ }
.btn { background-color: #f25d8e; /* Define the button background to be pink/ box-shadow: 0 4px 4px rgba(255, 112, 159,.3); / Define the button shadow effect/ border-radius: 5px; / Define the button’s corner radius to be 5px / color: #e7e7e7; / Define the button text color to be white / border: none; / Define the button to be borderless/ cursor: pointer; / Define the button to be a pointer type / font-size: 0.8rem; / Define the button font size to be 0.8rem / font-weight: bold; / Define the button font weight to be bold / letter-spacing: 0.1rem; / Define the button letter spacing to 0.1rem / padding: 0.9rem 4rem; / Define the inner margin of the button to be 0.9rem for the top and bottom, and 4rem for the left and right / text-transform: uppercase; / Define the button text as uppercase letters / transition: transform 80ms ease-in; / Define the button transition effect*/ }
.form>.btn { margin-top: 1.5rem; /* Define the top margin of the button to 1.5rem */ }
.btn:active { transform: scale(0.95); /* Define the scaling effect when the button is activated*/} This code defines the style of the login and registration forms, including background, fonts, input boxes, buttons, etc. Among them, background-color: #e7e7e7; means that the form background is gray, display: flex; means that the form is a flexible box, align-items: center; means that the cross-axis alignment is centered, justify-content: center; means that the main axis alignment is Centered, flex-direction: column; means the main axis direction is vertical, padding: 0 3rem; means the inner margins of the form are 3rem on the left and right, height: 100%; means the form height is 100%, text-align: center; means the form text alignment is centered.
.container-overlay {
height: 100%;
/* Define the height of the container to be 100% / left: 50%; / Define the distance of the container to the left to be 50% / overflow: hidden; / Define the overflow part of the container to be hidden / position: absolute; / Define the container to be absolutely positioned / top: 0; / Define the distance of the container from the top to 0 / transition: transform 0.6s ease-in-out; / Define the transition effect / width: 50%; / Define the width of the container to 50% / z-index: 100; / Define the container level as 100 */
}
.overlay {
width: 200%;
/* Define the overlay width as 200% / height: 100%; / Define the overlay height as 100% / position: relative; / Define the overlay as relative positioning / left: -100%; / Define the overlay distance to the left as -100% / background: url("./img/background.jpg") no-repeat center fixed; / Define the overlay background as the background image and align it in the center / background-size: cover; / Define the size of the overlay background to cover the entire page/ transition: transform 0.6s ease-in-out; / define the transition effect/ transform: translateX(0); / define the initial position of the overlay as 0 */
}
.overlay-panel {
height: 100%;
/* Define the height of the overlay panel to be 100% / width: 50%; / Define the width of the overlay panel to be 50% / position: absolute; / Define the overlay panel to be absolutely positioned / top: 0; / Define the distance from the top of the overlay panel is 0 / display: flex; / Define the overlay panel as a flexible box / justify-content: center; / Define the main axis alignment as centered/ align-items: center; / Define the cross axis alignment as centered/ flex-direction: column; / Define the main axis direction as the vertical direction / transform: translateX(0); / Define the initial position of the overlay panel as 0 / transition: transform 0.6s ease-in-out; / Define the transition effect*/
}
.overlay-left {
transform: translateX(-20%);
/* Define the left overlay panel position to move 20% to the left */
}
.overlay-right {
right: 0;
/* Define the distance of the right overlay panel to the right as 0 / transform: translateX(0); / Define the position of the right overlay panel as 0 */
}
/* The position of the overlay when the design is activated/ .panel-active.overlay-left { transform: translateX(0); / Define the left overlay panel position as 0 */
}
.panel-active.container-overlay {
transform: translateX(-100%);
/* Define the container distance to the left as -100% */
}
.panel-active.overlay {
transform: translateX(50%);
/* Define the overlay position to move 50% to the right */
}
/* Set the position and transparency of the login registration layer when activated/ .panel-active.container-signin { transform: translateX(100%); / Define the position of the login layer to move 100% to the right */
}
.panel-active.container-signup {
opacity: 1;
/* Define the registration layer transparency as 1 / z-index: 5; / Define the registration layer level as 5 / transform: translateX(100%); / Define the registration layer position as moving 100% to the right */
}This code defines the style of the overlay for the login and registration pages, including position, size, transparency, hierarchy, etc. Among them, height: 100%; means that the container height is 100%, left: 50%; means that the container is 50% from the left side, overflow: hidden; means that the overflow part of the container is hidden, position: absolute; means that the container is absolutely positioned, top: 0; means the container is 0 from the top, transition: transform 0.6s ease-in-out; means transition effect, width: 50%; means the container width is 50%, z-index: 100; Indicates that the container level is 100.
Center-aligned, background-size: cover; means that the overlay background size is to cover the entire page, transition: transform 0.6s ease-in-out; means a transition effect, transform: translateX(0); means that the initial position of the overlay is 0.
The style of the overlay panel includes the height, width, position, display mode, alignment, main axis direction, transition effect, initial position, etc. of the overlay panel. Among them, height: 100%; means the overlay panel height is 100%, width: 50%; means the overlay panel width is 50%, position: absolute; means the overlay panel is absolutely positioned, top: 0; means the overlay panel is absolutely positioned. The distance from the top is 0, display: flex; means the overlay panel is a flexible box, justify-content: center; means the main axis alignment is centered, align-items: center; Indicates that the cross-axis alignment is centered, flex-direction: column; indicates that the main axis direction is vertical, transform: translateX(0); indicates that the initial position of the overlay panel is 0, transition: transform 0.6s ease-in-out; indicates transition Effect.
The left and right styles of the overlay panel are defined as overlay-left and overlay-right respectively, which represent the styles of the left and right overlay panels respectively. Among them, transform: translateX(-20%); means that the left overlay panel position is moved 20% to the left, right: 0; means that the right overlay panel is 0 from the right, transform: translateX(0); means right The side overlay panel position is 0.
When activated, the overlay's position and transparency will change, including the left overlay panel position, container distance to the left, overlay position, registered layer transparency, registered layer position, etc. Among them, .panel-active.overlay-left means that when activated, the left overlay panel position is 0, .panel-active.container-overlay means that when activated, the container distance to the left is -100%, .panel-active .overlay means that when activated, the overlay position is moved 50% to the right. .panel-active.container-signin means that when activated, the login layer position is moved 100% to the right. .panel-active.container-signup Indicates that when activated, the registration layer transparency is 1, the registration layer level is 5, and the registration layer position is moved 100% to the right.
This concludes this article on HTML+CSS to achieve cool login switching. For more related HTML CSS login switching content, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will support me in the future. downcodes.com!