✅ Animación a un Input con HTML & CSS | SINERGIA

[@matiasperessutti6443]

yo pensando que tenia un montonde Javascript detras este tipo de componente. Tremendo!

[@rodolfoquispe3210]

muy bonito, pero terminalo que no retorne el span al dejar el focus, se juntan el texto del input y el label

[@Josue-kb3ui]

Te quedó cool

[@LuisCJ-we4ty]

solo agregen lo siguiente:
input:valid ~ label{
top: 0;
left: 15px;
font-size: 16px;
padding: 0 2px;
background: #060b23;
}
es lo mismo que focus pero valida cuando se escribe en el input

[@henrypandales]

En serio?? infinita gratirud

[@jamestoro]

Lo hice pero me deja el label fijo en el top, no sube ni baja nuevamente.

[@TheEmoLove1900]

Me gusto mucho tu video, gracias!! lo replique tal cual, solo que cuando escribo y hago click afuera del form vuelve de nuevo "nombre" al sitio donde estaba, y me cubre lo que escribi en el input.

[@Fercho47123]

El famoso ~ , yo le digo la viborita

[@San_Marcos_Tech]

alt +126

[@ignaciogomez4009]

muy bueno!

[@emmanuel_lm3853]

muy bueno, una pregunta ¿ Para que se mantega la parte de arriba despues de escribir ?

[@krlosmorales20-08]

tienes que usar la propiedad :valid para que se mantenga después de escribir, quedaría algo como:
.input-login:focus ~ label,
.input-login:valid ~ label {
background-color: white;
left: 16px;
padding: 0 2px;
top: 0;
}

[@gabyyhshss]

@@krlosmorales20-08 no me sirve :/

[@anggelogomez9319]

@@gabyyhshss a mi tampoco me sirve conseguiste una solucion?

[@gabyyhshss]

@@anggelogomez9319 sisi, en un rato te envío como quedó

[@gabyyhshss]

@@anggelogomez9319 input:valid ~ label {
position: relative;
bottom: 50px;
background: #000;
font-size: 28px;
padding: 0px 2px;

}
Así lo hice yo pana ;D

[@joseortizortiz7597]

Una pregunta digamos que ya ise mi estructura con html que pasa después con mis linias de código las borro y las escribo con css oh como no comprendo 😢

[@victorrebolledo.8259]

Las lineas de código html están en el archivo index.html, tienes que crear otro archivo llamado estilos.css, ahí escribes el código css, luego en el archivo index.html debes vincularlo poniendo la ruta del archivo de estilos.css.

[@LuisCJ-we4ty]

aguegen lo siguiente:
input:valid ~ label{
top: 0;
left: 15px;
font-size: 16px;
padding: 0 2px;
background: #060b23;
}
es lo mismo que focus solo que valid (valida el texto escrito en el input)

[@andrewoh127]

como hago para el texto se quede ahí arriba?

[@cardozomontenegroarleyalej9021]

.input-box input:focus,
.input-box input:valid {
border-color: #48a9e6;
}
.input-box input:focus ~ label,
.input-box input:valid ~ label {
top: 0;
left: 15px;
font-size: 19px;
padding: 0 2px;
background: #000000;
}

[@SRTAZ007]

cuando le quitas el focus al input se ven las letras encima de las otras que lolazo que eres

[@MDKSIDE]

no me funciona q hago?

[@mrdiro1172]

Vuelve a nacer 😂😂😂

[@georgehuayna3152]

@@mrdiro1172 sino vas ayudar, para que mierda comentas? :v

[@acontapro2023]

.input-label input:not(:placeholder-shown) ~ label {
top: 0;
left: 15px;
font-size: 12px;
padding: 0 2px;
background: #060b23;
} @theEmoLove1900, al input debes agregarle un placeholder="", solo tiene que tener ese atributo, no es necesario que contenga informacion.

[@didiermejia5125]

que capo

[@balolait]

Gracias crack !