Etiquetas de entrada animadas con CSS puro/CSS3

Vista prévia

Descripción

Etiquetas de texto animado basadas en CSS/CSS3 (SASS) flotando sobre el campo de texto de entrada cuando el usuario comienza a escribir, siguiendo el famoso float Patrón de etiqueta . Creado por abergin .

Esta idea combina lo mejor de ambos mundos con texto de marcador de posición y texto alineado superior. Sólo el texto del marcador de posición se muestra de forma predeterminada, por lo que hay una forma agradable, limpia y legible. Una vez que se pulsa un campo de entrada y se introduce texto, el texto del marcador de posición se desvanece y una etiqueta alineada con la parte superior se anima. De esta forma, con varios campos, un usuario no olvidará lo que representa un campo individual.

Funcionamiento

La estructura HTML para crear un formulario HTML.

<form>
<h1>Fancy Text Inputs</h1>
<div class="question">
<input type="text" required/>
<label>First Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Last Name</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Address</label>
</div>
<div class="question">
<input type="text" required/>
<label>Email Confirm</label>
</div>
<button>Submit</button>
</form>

Los estilos CSS/CSS3.

.transition,
form button,
form .question label,
form .question input[type="text"] {
-moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
-webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}

* {
font-family: Helvetica, sans-serif;
font-weight: light;
-webkit-font-smoothing: antialiased;
}

html {
background-color: #ff4a56;
}

form {
position: relative;
display: inline-block;
max-width: 700px;
min-width: 500px;
box-sizing: border-box;
padding: 30px 25px;
background-color: white;
border-radius: 40px;
margin: 40px 0;
left: 50%;
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-webkit-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}

form h1 {
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
margin-left: 15px;
margin-bottom: 35px;
text-transform: uppercase;
}

form button {
margin-top: 35px;
background-color: white;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
display: inline-block;
box-sizing: border-box;
padding: 20px 15px;
border-radius: 60px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}

form button:hover,
form button:focus {
color: white;
background-color: #ff4a56;
}

form .question {
position: relative;
padding: 10px 0;
}

form .question:first-of-type {
padding-top: 0;
}

form .question:last-of-type {
padding-bottom: 0;
}

form .question label {
transform-origin: left center;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
font-size: 17px;
box-sizing: border-box;
padding: 10px 15px;
display: block;
position: absolute;
margin-top: -40px;
z-index: 2;
pointer-events: none;
}

form .question input[type="text"] {
appearance: none;
background-color: none;
border: 1px solid #ff4a56;
line-height: 0;
font-size: 17px;
width: 100%;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 60px;
color: #ff4a56;
font-weight: 100;
letter-spacing: 0.01em;
position: relative;
z-index: 1;
}

form .question input[type="text"]:focus {
outline: none;
background: #ff4a56;
color: white;
margin-top: 30px;
}
form .question input[type="text"]:valid {
margin-top: 30px;
}

form .question input[type="text"]:focus ~ label {
-moz-transform: translate(0, -35px);
-ms-transform: translate(0, -35px);
-webkit-transform: translate(0, -35px);
transform: translate(0, -35px);
}
form .question input[type="text"]:valid ~ label {
text-transform: uppercase;
font-style: italic;
-moz-transform: translate(5px, -35px) scale(0.6);
-ms-transform: translate(5px, -35px) scale(0.6);
-webkit-transform: translate(5px, -35px) scale(0.6);
transform: translate(5px, -35px) scale(0.6);
}