In this post I will focus on a CSS driven login form template. The decor elements are designed through CSS and a little Javascript.

The Need

One of my Android projects needed a simple web based login form for user management. I wanted to create a simple but stylish login form.

Code

In this section I will breakdown necessary parts. I posted the whole project to a JSFiddle below.

CSS

The body of the HTML page is styled with a display parameter. The parameter could be either grid or flex.

I set some padding to the top and bottom, removed the margins and aligned content to center.

.body {
	color: whitesmoke;
  background-color: #004e5c;
	display: grid;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 15px 0;
}

The background of the actual form should match the color scheme using in the app. CSS was used to implement the background of the form. I set a border around the form with a shadow and radius.

.div_form {
	padding: 30px;
	background-image: url("<image_url>");
	background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
	box-sizing: content-box;
	box-shadow: 2px 2px 10px whitesmoke, -2px -2px 10px white;
	border-radius: 15px;
}

I wanted the icon of the app I am posting this for to be on the top of the form. Instead of using an HTML img tag, I decided to use a HTML div. Using CSS, I could set the background image and size.

.app_img {
	padding: 5px;
	width: 150px;
	height: 150px;
	margin: auto;
	background-image: url("<image_url>");
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

The main decor of CSS used in this document is in the form part. I wanted to utilize CSS instead of JQuery or Javascript to implement an simple responsive animation. I chose to have CSS move the HTML label elements when the user is focused on the input field. The label element is given an absolute position and the top and left coordinates changed when focused on the input field.

.test_label_email, .test_label_pass {
	position: absolute;
	left: 40px;
    top: 20px;
	transition: 0.3s;
}

input:focus ~ label {
	top: 0;
	left: 0;
	color:rgb(217, 219, 226);
}

Javascript

I added a small piece of Javascript to complete the form animation. The email part of the form would not keep the label tag in the elevated position if the input registered the value as invalid. My fix was to implement a Javascript function with a switching id tag that CSS will pickup.

Hope this was useful.