Glassy Login Form

Written by @kerixa 27 March 2021

Forms on websites are where users' information is entered, and because website users interact with them, it is especially important. In the following code, we have a beautiful form for logging in. The background of the form is glassy and opaque, with an image at the center of the form which makes your website signing form more beautiful and stylish.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
body {
    color: #FEFEFE;
    font: 100 100%/1.6 "Heebo", sans-serif;
    overflow-x: hidden;
    width: 100%;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.flex {
    align-items: center;
    display: flex;
    justify-content: center;
}

.scene {
    background: #362100 url("https://www.htmlbestcodes.com/files/glassy.jpg") center/cover;
    height: 100vh;
    position: relative;
}

.card {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(254, 254, 254, 0.075);
    border: 1px solid rgba(254, 254, 254, 0.18);
    border-radius: 15px;
    box-shadow: 0 10px 35px 0 rgba(54, 33, 0, 0.65);
    color: white;
    max-width: 300px;
    overflow: hidden;
    padding: 6px 14px;
    position: relative;
    text-align: center;
    z-index: 1;
}

.card__heading {
    font-size: 1.35rem;
    font-weight: 200;
    margin-bottom: 15px;
}

.card__figure {
    height: auto;
    margin: 0 auto;
    max-width: 225px;
    width: 60%;
}

.card__image {
    border-radius: 50%;
    max-width: 100%;
}

.card__input {
    background: rgba(254, 254, 254, 0.075);
    border: 1px solid rgba(254, 254, 254, 0.3);
    border-radius: 3px;
    box-sizing: border-box;
    color: #FEFEFE;
    display: block;
    font-size: 1rem;
    letter-spacing: 0.15rem;
    padding: 10px;
    width: 100%;
}

.card__input:focus, .card__input:active {
    background: rgba(254, 254, 254, 0.08);
    border: 1px solid rgba(254, 254, 254, 0.75);
    outline: none;
}

.card__button {
    background: rgba(254, 254, 254, 0.65);
    border: none;
    border-radius: 3px;
    color: #362100;
    margin: 15px auto 0 auto;
    padding: 8px 20px;
}

.card__button:focus, .card__button:active {
    background: rgba(255, 255, 255, 0.75);
    outline: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300&amp;display=swap'>

<div class="scene flex">
	<section class="card">
		<figure class="card__figure">
			<img class="card__image" src="https://www.htmlbestcodes.com/files/glassy2.jpg" alt="A female hand holding a camera"/>
			<figcaption>
				<span class="visually-hidden">
					Avatar photo
				</span>
			</figcaption>
		</figure>
		<h1 class="card__heading">
			<span class="visually-hidden">Account name:</span>
			<span>
				Person Somebody
			</span>
		</h1>
		<form class="card__form">
			<label for="password" class="visually-hidden">Password:</label>
			<input id="password" class="card__input" type="password" />
			<button class="card__button" type="button">
				<span>Login</span>
			</button>
		</form>
	</section>
</div>
<a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300