Bonitas etiquetas de entrada animadas con CSS puro

Vista prévia

Descripción

Un enfoque CSS/CSS3 puro para crear etiquetas de forma flotante agradables usando selectores de hermanos y pseudo clases. Basado en un concepto de interfaz de usuario por Matt D. Smith .

Funcionamiento

Cree etiquetas para los campos de entrada.

<form>

<input type="text" name="name" class="question" id="nme">

<label for="nme"><span>What's your name?</span></label>

<textarea name="message" class="question" id="msg"></textarea>

<label for="msg"><span>What's your message?</span></label>
</form>

Estilos CSS básicos.

input, label, textarea {

display: block;

margin: 10px;

padding: 5px;

border: none;

font-size: 22px;
}

textarea:focus, input:focus { outline: 0; }

input.question, textarea.question {

font-size: 48px;

font-weight: 300;

border-radius: 2px;

margin: 0;

border: none;

width: 80%;

background: rgba(0, 0, 0, 0);

transition: padding-top 0.2s ease, margin-top 0.2s ease;

overflow-x: hidden; /* Hack to make "rows" attribute apply in Firefox. */
}

Los estilos CSS principales para las etiquetas de subrayado y flotante.

input.question + label, textarea.question + label {

display: block;

position: relative;

white-space: nowrap;

padding: 0;

margin: 0;

width: 10%;

border-top: 1px solid red;

-webkit-transition: width 0.4s ease;

transition: width 0.4s ease;

height: 0px;
}

input.question:focus + label, textarea.question:focus + label { width: 80%; }
 input.question:focus, input.question:valid {
 padding-top: 35px;
}

textarea.question:valid, textarea.question:focus {
 margin-top: 35px;
}

input.question:focus + label > span, input.question:valid + label > span {
 top: -100px;
 font-size: 22px;
 color: #333;
}

textarea.question:focus + label > span, textarea.question:valid + label > span {
 top: -150px;
 font-size: 22px;
 color: #333;
}

input.question:valid + label, textarea.question:valid + label {
 border-color: green;
}

input.question:invalid, textarea.question:invalid {
 box-shadow: none;
}

input.question + label > span, textarea.question + label > span {

font-weight: 300;

margin: 0;

position: absolute;

color: #8F8F8F;

font-size: 48px;

top: -66px;

left: 0px;

z-index: -1;

-webkit-transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;

transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease;
}

input[type="submit"] {

-webkit-transition: opacity 0.2s ease, background 0.2s ease;

transition: opacity 0.2s ease, background 0.2s ease;

display: block;

opacity: 0;

margin: 10px 0 0 0;

padding: 10px;

cursor: pointer;
}

input[type="submit"]:hover { background: #EEE; }

input[type="submit"]:active { background: #999; }

input.question:valid ~ input[type="submit"], textarea.question:valid ~ input[type="submit"] {
 -webkit-animation: appear 1s forwards;
 animation: appear 1s forwards;
}

input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input[type="submit"] {
 display: none;
}