Cuando se trata de diseño web, a menudo son los pequeños detalles los que marcan la diferencia. Un efecto de etiqueta de entrada (Label Input) bien diseñado puede mejorar la usabilidad y la estética de tu sitio web. En este artículo, te mostraremos cómo crear un efecto de etiqueta de entrada impresionante utilizando HTML y CSS.
HTML
Comencemos con el código HTML básico que servirá como base para nuestro efecto de etiqueta de entrada:
<!DOCTYPE html>
<html>
<head>
<title>Efecto Label Input HTML y CSS</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<div class="input-container">
<input type="text" id="name" class="input-container-input" required/>
<label for="name" class="input-container-label">Nombre</label>
</div>
</body>
</html>En este código, hemos creado un formulario simple que consta de un campo de entrada (input) y una etiqueta (label) asociada. La clave para nuestro efecto de etiqueta de entrada radica en la utilización de etiquetas y clases CSS específicas.
CSS
Ahora, vamos a dar vida a nuestro diseño utilizando CSS. Aquí está el código CSS que necesitas para lograr este efecto:
body {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.input-container {
position: relative;
}
.input-container-input {
color: white;
padding: 10px;
border: none;
border-radius: 4px;
outline: 2px solid white;
background-color: transparent;
transition: outline-color 500ms;
}
.input-container-input:is(:focus, :valid) {
outline-color: blueviolet;
}
.input-container-label {
position: absolute;
top: 0;
left: 0;
translate: 10px 8px;
color: white;
transition: translate 500ms, scale 500ms;
}
.input-container-input:focus + .input-container-label,
.input-container-input:valid + .input-container-label {
padding-inline: 10px;
translate: 0px -14px;
scale: 0.8;
background-color: black;
font-size: 20px;
}En este código CSS, hemos definido varios estilos para nuestros elementos. Aquí hay una breve explicación de lo que cada parte del código hace:
Conclusión
Con este código HTML y CSS, puedes crear un Efecto Label Input HTML y CSS elegante que mejorará la experiencia de usuario en tu sitio web. Este pequeño detalle puede marcar una gran diferencia en la percepción de tu sitio y hacer que tus formularios sean más atractivos y fáciles de usar. ¡Anímate a probarlo en tu proyecto web y sorprende a tus usuarios!
