DEV Community

Cover image for The Power of CSS in Styling-up Forms
George Kingi
George Kingi

Posted on

The Power of CSS in Styling-up Forms

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

Enter fullscreen mode Exit fullscreen mode

Output:

Image description

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

Enter fullscreen mode Exit fullscreen mode

Output:

Image description

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;


}

Enter fullscreen mode Exit fullscreen mode

To learn more about CSS selectors, properties, colors, and more visit https://www.w3schools.com/css/default.asp

The Output:

Image description

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>


Enter fullscreen mode Exit fullscreen mode

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;


}

Enter fullscreen mode Exit fullscreen mode

The output will be as below:

(Never mind the quality 🤭😀)

Image description

Top comments (0)