El formulario de inicio de sesión en una imagen se utiliza en muchos sitios web. Como el sitio web de hoteles que contiene las imágenes de los hoteles o algunas organizaciones que organizan algunos eventos especiales que tienen esa imagen de eventos y un formulario de inicio de sesión en eso. En ese caso, puede diseñar un formulario de inicio de sesión o registro en esa imagen. Este diseño hará que el sitio web sea más atractivo que un formulario de inicio de sesión o registro normal. Para crear el formulario de inicio de sesión en una imagen, solo necesita HTML y CSS. El siguiente ejemplo ilustrará el enfoque del concepto.
Creación de la estructura: en esta sección, crearemos una estructura de sitio web básica para crear un formulario de inicio de sesión en una imagen.
- Código HTML: El código HTML se utiliza para diseñar la estructura del formulario de inicio de sesión.
html
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="bg-img"> <h1>GeeksforGeeks</h1> <form class="container"> <b>Username</b> <input type="text" placeholder="Username Please" name="username" required> <b>Password</b> <input type="password" placeholder="Enter Password" name="password" required> <button type="submit" class="button">Login</button> </form> </div> </body> </html>
Diseño de la Estructura: En la sección anterior, hemos creado la estructura del sitio web básico. En esta sección, diseñaremos la estructura para el formulario de inicio de sesión.
- Código CSS de estructura:
CSS
<style>
body {
height: 100%;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
h1 {
text-align:center;
color:green;
-webkit-text-stroke: 1px black;
}
/* styling background image */
.bg-img {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png");
min-height: 380px;
background-size: cover;
}
/* Styling the form container */
.container {
position: absolute;
left: 28px;
top: 50px;
margin: 20px;
max-width: 300px;
padding: 16px;
}
b {
color: green;
font-size:26px;
-webkit-text-stroke: 1px black;
}
/* Full-width input */
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 15px 0px;
border: 2px solid green;
}
/* Styling the submit button */
.button {
background-color: green;
color: white;
padding: 16px 16px;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
transform: scale(1.1);
transition: transform 0.3s;
}
</style>
Combinando el código HTML y CSS: Este es el código final después de combinar las dos secciones anteriores. Puede ver que el formulario de inicio de sesión alineado a la izquierda en la imagen es más atractivo en comparación con un formulario de inicio de sesión normal.
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
body {
height: 100%;
font-family: Arial, sans-serif;
}
* {
box-sizing: border-box;
}
h1 {
text-align:center;
color:green;
-webkit-text-stroke: 1px black;
}
/* styling background image */
.bg-img {
background-image: url(
"https://media.geeksforgeeks.org/wp-content/uploads/20191212174641/bg1.png");
min-height: 380px;
background-size: cover;
}
/* Styling the form container */
.container {
position: absolute;
left: 28px;
top: 50px;
margin: 20px;
max-width: 300px;
padding: 16px;
}
b {
color: green;
font-size:26px;
-webkit-text-stroke: 1px black;
}
/* Full-width input */
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
margin: 15px 0px;
border: 2px solid green;
}
/* Styling the submit button */
.button {
background-color: green;
color: white;
padding: 16px 16px;
border: none;
cursor: pointer;
width: 100%;
}
.button:hover {
transform: scale(1.1);
transition: transform 0.3s;
}
</style>
</head>
<body>
<div class="bg-img">
<h1>GeeksforGeeks</h1>
<form class="container">
<b>Username</b>
<input type="text" placeholder="Username Please"
name="username" required>
<b>Password</b>
<input type="password" placeholder="Enter Password"
name="password" required>
<button type="submit" class="button">Login</button>
</form>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA