fingerprint scanner using HTML and CSS

As time changed, new technologies were introduced for the different devices. Security features like fingerprint scanners and face scanners that read the fingerprint of the owner of the device and unlock only when the fingerprint is matched

But have you ever wondered how can we create these animations using HTML and CSS only?

Also Read – 25+ Final-year Project Ideas on Web Development for University Students

In this article, we will learn to create fingerprint scanner animation using HTML and CSS.

This project helps us gain a solid foundation for advanced CSS concepts like animation and effects.

Setup

Before coding, we need to follow some basic steps for creating the environment for writing the code for our fingerprint scanner. Here are the steps that need to be followed before writing the code for our fingerprint scanner:

  1. First of all, open a Visual Studio code editor for creating and writing the code for fingerprint animation.
  2. Then create a folder inside by selecting the location and saving it as a “fingerprint scanner.”
  3. Inside the folder, create two files for HTML and CSS and save them as “index.html” and “style.css.”

Fingerprint Scanner Using CSS

Fingerprint Structure (HTML)

<!DOCTYPE html>
<head>
  <title>Login Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="scan">
    <div class="fingerprint"></div>
    <h3>Scanning...</h3>
  </div>


</body>
</html>

Let’s understand this code line by line.

Basic Structure

<!DOCTYPE html>
<head>
  <title>Login Form</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

Basic HTML structure includes the major tags that tell the browser that the file contains the HTML code. HTML tag contains tags such as:

<!Doctype HTML>: This tag is used to tell the browser that the file we are using is HTML 5 which is the latest version of HTML.

<HTML lang=” en”>: The HTML is the root tag, which contains all the HTML tags, and lang is the attribute used to tell the browser that the supporting language is English.

<head>: The head contains the meta information of the HTML, such as the title, links to external files, and some common meta tags.

Inside the head tag, using the <link> tag with the href attribute, we have provided the link for the external CSS, which helps in adding styling to the structure of the fingerprint scanner.

<body>: The body tag contains all the content that is displayed to the user.

Adding the Content for Structure

  1. At first, we used the block level (which covers the whole line) element <div> to create the main container for the fingerprint scanner, and using the class attribute, we added scan classes for styling the container using the class selector.
  2. Now inside the parent container, we will create another child <div> element with the class fingerprint, where we will add the graphics for our fingerprint.
  3. Now, using the <h3> heading tag, we will add the heading “scanning…” to the structure of the fingerprint scanner.
<body>
  <div class="scan">
    <div class="fingerprint"></div>
    <h3>Scanning...</h3>
  </div>

</body>

Here inside the HTML file, we have used basic HTML tags to create the structure of the fingerprint scanner. The primary role of CSS is to add styling to our fingerprint scanner. Before moving on to the styling part,

Let’s take a look at the structure of our fingerprint scanner.

Output

fingerprint scanner output without CSS

Fingerprint Styling (CSS)

Now let’s come to the heart of our project, the styling part. We will add styling to our fingerprint scanner and make it look more interactive.

Before styling, I suggest you try adding styling from your side after going through the project, which will help you build your styling skills.

Basic Styling

Here is the basic styling.

:root {
  --bgColor: #111;
  --scannerColor: #3fefef;
  --imageColor: 130deg;
}

:root – The root is a pseudo-class selector that helps in creating the predefined styling variables inside the CSS file that can be later used inside the element for adding styling to the element. Here we have created three predefined styling variables.

  • bgColor -This variable is used to give a background color of black to our fingerprint scanner page.
  • –scannerColor – This variable will add color to the fingerprint scanner.
  • –imageColor – This variable is used to change the scanner color with a hue-rotate filter.

“*” Universal selector – We will now add some basic style to the HTML page using the universal selector. By using the margin property, we can set the page’s margin to “zero” in comparison to the browser’s default margin and set the padding to zero as well. To give the animation more visual appeal, the website’s basic design is modified to use the “consolas” typeface.

* {
  margin: 0;
  padding: 0;
  font-family: consolas;
}

Body Styling

Using the body selector, we will add the styling to the body or structure of the fingerprint scan. For the display property, we will set the display to “flex” and using the justify-content property, we will align the content to the center.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: var(--bgColor);
}

Using the min-height property, we will set criteria that the minimum height of the content should be 100vh, and using the background property, we will inherit the background color from the root selector.


Fingerprint Styling

Styling the fingerprint scanner is the main part of our project. Inside our styling, we will first style the parent container of the fingerprint scanner.

.scan {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scan .fingerprint {
  position: relative;
  width: 300px;
  height: 230px;
  background: url(https://www.pngall.com/wp-content/uploads/2016/06/Fingerprint-Free-Download-PNG.png);
  background-repeat: no-repeat;
  background-size: 300px;
}

.scan .fingerprint::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 230px;
  background: url(https://www.pngall.com/wp-content/uploads/2016/06/Fingerprint-Free-Download-PNG.png);
  filter: invert(100%) sepia(60%) saturate(3000%) hue-rotate(var(--imageColor))
    brightness(95%) contrast(80%);
  background-size: 300px;
  animation: animate 4s ease-in-out infinite;
}

Using the class selector (.scan), we will set the position of the container relative to the body, and using the display property, we will set the display type of our container as “flex” and the direction of flex is column-wise.

Now using the child class selector (.fingerprint), we will add an image of the fingerprint using the URL and set the width and height of the image to 300px and 230px, respectively.

Here, inside the before-class selector for fingerprint, we have added most of the properties of fingerprint. Additionally, we have added a filter property to change the fingerprint color as the bar hovers over the image.

Here is the output of our code so far

fingerprint scanner output with basic CSS

Animation

Using the CSS @keyframes rule will add the animation to the image. Using keyframes of 0% and 50%, we will move a line, at 0% the line is invisible, and at 50% the line is 100% visible.

@keyframes animate {
  0%,
  100% {
    height: 0%;
  }

  50% {
    height: 100%;
  }
}

.scan .fingerprint::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: var(--scannerColor);
  border-radius: 8px;
  filter: drop-shadow(0 0 20px #3fefef) drop-shadow(0 0 60px #3fefef);
  animation: moveLine 4s ease-in-out infinite;
}

@keyframes moveLine {
  0%,
  100% {
    top: 0%;
  }

  50% {
    top: 100%;
  }
}

As you can see, using the ::after CSS selector property on the child element, we have created a bar on the top of the image, and using the animation property, we have created a variable to add an animation move line, which moves a blue line over the fingerprint scanner.

Styling the Heading

Using the child tag selector, we will add the styling to the heading of the fingerprint animation. The text-transform property, we will convert all the letters of the text to “uppercase” and using the color property, we will set the font color of the text from the scanner color variable.

Using the animation property, we will add an animation to the text with a gap of 1 sec up to infinite animation.

.scan h3 {
  text-transform: uppercase;
  font-size: 2em;
  letter-spacing: 2px;
  margin-top: 20px;
  color: var(--scannerColor);
  filter: drop-shadow(0 0 20px var(--scannerColor))
    drop-shadow(0 0 60px var(--scannerColor));
  animation: animate_text 0.5s steps(1) infinite;
}

@keyframes animate_text {
  0%,
  100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

Inside the text animation, we have created two keyframes. At 0% and 100%, The opacity( visibility) of the text is zero, and at 50%, the opacity of the text is full.

Output

Here is the final output of our project

See the Pen Fingerprint Animation by Rare Programmer (@rareprogrammer) on CodePen.

And here is a screenshot of our finished project.

fingerprint scanner output with HTML and CSS

Source Code

Here is the source code of our project – Fingerprint Animation

Conclusion

I hope you get the idea of the project. We just attempted to make the entire thing more beginner-friendly by breaking it down step by step. We advise novices to read and comprehend this material.

Try creating a different type of animation in the fingerprint scanner. With HTML and CSS, we have finished our fingerprint scanner. Please feel free to leave a comment below if you have any doubts.

Oh, hi there 👋 It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply