This is the second part of our mini project on creating an Online Flipping Form. Here is the link for Part 1, (https://dev.to/george_kingi/how-to-create-an-online-flipping-form-using-plain-html-and-css-4ka5.)
In part 1, we focused on the HTML and created the structure of the Front and Back sides of the online form. In this section, we will dive deep into CSS, introduce unique styling on our forms, and give some highlights on Javascript.
Harnessing the Power of CSS in Styling-up Forms
Remember, we created a CSS file and linked it with the HTML file, Let's journey together in making the form flip; We affect changes on all elements on the webpage, and we select the elements using the Universal Selector (*) as below.
We then style up the container as below: as we style the container, notice that the output affects the contents and background of our webpage.
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
height: 100vh;
background: #f53207;
color: #340707;
display: flex;
align-items: center;
justify-content: center;
}
Output:
We additionally select the card for further styling. Remember to include the. (dot)
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
height: 100vh;
background: #f53207;
color: #340707;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 350px;
height: 550px;
box-shadow: 0 0 20px 20px #16010142;
border-radius: 50px;
}
Output:
As we wind up styling our form, we apply some styling on the inner-card, card-front, card-back, and so on as below.
.card{
width: 350px;
height: 550px;
box-shadow: 0 0 20px 20px #16010142;
border-radius: 50px;
}
.inner-card{
height: 100%;
transform: rotateY(180deg);
transform-style: preserve-3d;
}
.card-front, .card-back{
position: absolute;
height: 100%;
padding: 50px;
background-color: #931c02;
box-sizing: border-box;
backface-visibility:hidden;
border-radius: 50px;
}
.card-back{
transform: rotateY(180deg);
}
.card h2{
font-weight: normal;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.input-button{
width: 100%;
background: transparent;
border: 1px solid #5e0b0b;
margin: 6px 0;
height: 32px;
border-radius: 20px;
padding: 5px;
box-sizing: border-box;
text-align: center;
}
::placeholder{
color: #fff;
font-size: 12px;
}
button{
width: 100%;
background: transparent;
border: 1px solid #fff;
margin: 25px 0 10px;
height: 32px;
font-size: 20px;
border-radius: 20px;
padding: 2px;
box-sizing: border-box;
outline: none;
color: white;
cursor: pointer;
}
.submit-btn{
position: relative;
}
.submit-btn::after{
content: '\27a4';
color: #333;
line-height: 32px;
font-size: 12px;
height: 32px;
width: 32px;
border-radius: 50%;
background: #fff;
position: absolute;
right: -1px;
top: -1px;
}
span{
font-size: 20px;
margin-left: 10px;
}
.card .btn{
margin-top: 10px;
}
.card a{
color: #fff;
text-decoration: none;
display: block;
text-align: center;
font-size: 13px;
margin-top: 8px;
}
To learn more about CSS selectors, properties, colors, and more visit https://www.w3schools.com/css/default.asp
The Output:
We need to introduce some Javascript in our form to provide some interactivity, as such, locate the last div and input the script below,
Here are the final HTML and CSS codes that will indeed make our form flip on click as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Flipping Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="inner-card" id="card">
<div class="card-front">
<h2>LOGIN</h2>
<form>
<input type="email" class="input-box" placeholder="Email" required>
<input type="number" class="input-box" placeholder="Phone Number" required>
<input type="password" class="input-box" placeholder="password" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox"><span>Remember me</span>
<button type="button" class="button" onclick="openLOGIN()">I am New Here</button>
<a href="">Forgot password</a>
</div>
</form>
<div class="card-back">
<h2>REGISTER</h2>
<form>
<input type="text" class="input-box" placeholder="Full Name" required>
<input type="email" class="input-box" placeholder="email" required>
<input type="number" class="input-box" placeholder="Phone Number" required>
<input type="password" class="input-box" placeholder="password" required>
<input type="date" class="input-box" placeholder="DOB" required>
<button type="submit" class="submit-btn">Submit</button>
<input type="checkbox"><span>Remember me</span>
<button type="button" class="button" ondblclick="openREGISTER()">I have an Account</button>
<a href="">Forgot password</a>
</form>
</div>
</div>
</div>
</div>
<script>
var card =document.getElementById("card");
function openLOGIN(){
card.style.transform = "rotateY(-180deg)";
}
function openREGISTER(){
card.style.transform = "rotateY(0deg)";
}
</script>
</body>
</html>
Our Final CSS File should have the below code.
*{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.container{
height: 100vh;
background: #f53207;
color: #340707;
display: flex;
align-items: center;
justify-content: center;
}
.card{
width: 350px;
height: 550px;
box-shadow: 0 0 20px 20px #16010142;
border-radius: 50px;
}
.inner-card{
height: 100%;
transform: rotateY(180deg);
transform-style: preserve-3d;
transition: transform 2s;
}
.card-front, .card-back{
position: absolute;
height: 100%;
padding: 50px;
background-color: #931c02;
box-sizing: border-box;
backface-visibility:hidden;
border-radius: 50px;
}
.card-back{
transform: rotateY(180deg);
}
.card h2{
font-weight: normal;
font-size: 24px;
text-align: center;
margin-bottom: 20px;
}
.input-box{
width: 100%;
background: transparent;
border: 1px solid #5e0b0b;
margin: 6px 0;
height: 32px;
border-radius: 20px;
padding: 5px;
box-sizing: border-box;
text-align: center;
color: white;
}
::placeholder{
color: #fff;
font-size: 12px;
}
button{
width: 100%;
background: transparent;
border: 1px solid #fff;
margin: 25px 0 10px;
height: 32px;
font-size: 20px;
border-radius: 20px;
padding: 2px;
box-sizing: border-box;
outline: none;
color: white;
cursor: pointer;
}
.submit-btn{
position: relative;
}
.submit-btn::after{
content: '\27a4';
color: #333;
line-height: 32px;
font-size: 12px;
height: 32px;
width: 32px;
border-radius: 50%;
background: #fff;
position: absolute;
right: -1px;
top: -1px;
}
span{
font-size: 20px;
margin-left: 10px;
}
.card .btn{
margin-top: 10px;
}
.card a{
color: #fff;
text-decoration: none;
display: block;
text-align: center;
font-size: 13px;
margin-top: 8px;
}
The output will be as below:
(Never mind the quality ðŸ¤ðŸ˜€)
Top comments (0)