Glassmorphism login form UI Design using HTML & CSS
From this article, you will learn how to create a Glassmorphism login form with the help of HTML and CSS programming code. Glassmorphism is a modern design that is currently…
Neumorphism Login Form UI Design Using HTML and CSS
Neumorphism login form is a modern design login form created using HTML and CSS code. Hello friends, in this article I will show you how to create a login form of Neumorphism design using only HTML and CSS programming code.
Login designs come in different types like transparent, Neumorphism, Glassmorphism, responsive, animated, etc. Earlier I showed you the design of many more types of login forms and showed you how I created those login forms. The login form of this design is much more beautiful and attractive than the general design. Like the general design, it has everything, i.e. there is a place to input the email ID and password to log in.
Everyone has a place to use their first profile image or website logo. There is a nice login button to login here and below it is the Facebook and Google buttons. In other words, the user will be able to login with the help of an email id or Facebook and Google account.
Neumorphism Login Form Using HTML and CSS
Hover effects have been added to each. Normally the buttons are slightly upwards but when the mouse is moved or clicked the buttons will move inwards. In the case of this neomorphic design, the background and the color of the background of the login form are completely the same.
However, it has been given the shape of a login form by creating a color effect with the help of CSS code.
See the Pen
Neumorphism login form by shantanu jana (@fghty)
on CodePen.
If you want to see the live demo, you can use the demo button at the bottom of the article. You can also download the required source code. However, if you are a beginner, you can definitely watch the tutorial below.
First of all, you create an HTML file. Then you copy the HTML structure below and paste it into that HTML file.
Step 1: Basic HTML structure of this login form
<!DOCTYPE html>
<html>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Poppins&display=swap’);
*{
margin:0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif;
}
html,body{
height: 100%;
}
</style>
</head>
<body>
<div class=”content”>
</div>
</body>
</html>
Step 2: Neumorphism structure with the help of CSS code
This structure has been converted to a Neumorphism design using the following programming code and given a size.
body{
display: grid;
place-items: center;
text-align: center;
background: #dde1e7;
}
.content{
width: 330px;
background: #dde1e7;
border-radius: 10px;
padding: 40px 30px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94, 104, 121, 0.288);
}
Result:
Step 3: Add a profile image to the login form
I created this logo or profile image using the following programming codes. I have also added titles here.
<img src=”https://lh3.googleusercontent.com/a-/AOh14Gj99VObFyE8W_h8RrcwZO_aYiIHu5AAa_XpnOym=s600-k-no-rp-mo”>
<div class=”text”>Foolish Developer</div>
.content img{
width: 90px;
height: 90px;
margin-top: -100px;
border-radius: 50px;
box-shadow:
0px 0px 2px #5f5f5f,
0px 0px 0px 5px #ecf0f3,
8px 8px 15px #a7aaaf,
-8px -8px 15px #ffffff
;
}
.content .text{
font-size: 25px;
font-weight: 600;
margin-bottom: 35px;
color: #000;
}
Result:
Step 4: Make a place to input email and password
I have used the following codes to create a place to input email ID and password. I used the CSS programming code below to design these and sort them into Neumorphism designs.
<div class=”field”>
<span class=”fa fa-user”></span>
<input type=”text” required>
<label>Email Id</label>
</div>
<div class=”field”>
<span class=”fa fa-lock”></span>
<input type=”password”>
<label>Password</label>
</div>
.content .field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
font-size: 18px;
outline: none;
border: none;
color: #595959;
background: #dde1e7;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #babecc,
inset -5px -5px 10px #ffffff73;
}
.field input:focus ~ label{
box-shadow: inset 2px 2px 5px #babecc,
inset -1px -1px 2px #ffffff73;
}
.field:nth-child(2){
margin-top: 20px;
}
.field span{
position: absolute;
width: 50px;
line-height: 50px;
color: #595959;
}
.field label{
position: absolute;
top: 50%;
left: 45px;
pointer-events: none;
color: #666666;
transform: translateY(-50%);
}
.field input:focus ~ label{
opacity: 0;
}
Result: (more…)
Circular Progress Bar Using HTML and CSS
In this article, I am going to show you how to create an animated circular progress bar using only HTML CSS and BoostApp programming code. I have designed many more types of animated progress bars before but this design has been designed in a completely modern way.
Animated circular Progress Bar is a type of statistical design used in a variety of websites. It is mainly used to indicate the percentage of one’s qualification in a portfolio website or personal website. It is fully animated, that is, under normal conditions, it has zero percent then it will gradually reach the pre-determined percentage. Different colors have been used to denote percentages.
See the Pen
Untitled by Code Media (@codemediaweb)
on CodePen.
Animated Circular progress bar using Html and CSS
I used Html, CSS, and bootstrap programming code to make it. In the case of this circular progress bar, you can pre-determine the percentage as needed. This means that you can pre-determine the percentage of progress this animation will stop. In this case, I have basically made a circle of three signs of progress and used different colors for each of them.
Below I have shown in full step by step how I have created this progress bar and which programming code I have used to create any element. Below the article is a download button where you can download the required source code by clicking.
Personal Portfolio Website Using HTML, CSS and Bootstrap
Here you can learn how to create a responsive personal portfolio website using HTML, CSS, javascript, and bootstrap. This portfolio website has banners, about us, etc. sections.
Hello friends, in this article I am going to show you how to create a responsive personal portfolio website. I have already designed many types of websites. I have made this new design for you to get a lot of responses from you in those tutorials. This is a fully responsive personal portfolio website for which I have used Bootstrap 4 code. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way. If you are looking for the best digital marketing company then A&W Digital will be the best for you.
When creating a personal portfolio website, you need to look at a few special things, the most important of which is that you need to design the website in such a way that you can put all your experience and talent in front of your users. A portfolio website is a website where you will showcase your educational qualifications and your experience to the users. They will then hire you for their project according to their needs. So in this case you need to use the website in a modern way, using bright colors and animations to beautifully showcase all your qualities and experiences in front of the users.
Video tutorial to create a personal portfolio website
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step completely beautifully. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this personal portfolio website. I have made many more designs before. You can try those designs using the links below and download the required source codes for free.
Sidebar Menu Using Only HTML and CSS
In this article, I am going to show you how to create a side menu bar using only simple HTML and CSS programming code. I have designed different types of…
