✅ Animación a un Input con HTML & CSS

No video

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

Рет қаралды 8,132

SINERGIA

Күн бұрын

Animación a un Input con Html y Css
#html #css

Пікірлер: 34

@matiasperessutti6443 Жыл бұрын

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

@rodolfoquispe3210 8 ай бұрын

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

@LuisCJ-we4ty 4 ай бұрын

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 22 күн бұрын

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

@TheEmoLove1900 8 ай бұрын

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.

@Josue-kb3ui Жыл бұрын

Te quedó cool

@ignaciogomez4009 11 ай бұрын

muy bueno!

@Fercho47123 6 ай бұрын

El famoso ~ , yo le digo la viborita

@San_Marcos_Tech 5 ай бұрын

alt +126

@joseortizortiz7597 6 ай бұрын

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 6 ай бұрын

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.

@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

@andrewoh127 6 ай бұрын

como hago para el texto se quede ahí arriba?

@cardozomontenegroarleyalej9021 5 ай бұрын

.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 5 ай бұрын

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

@MDKSIDE 6 ай бұрын

no me funciona q hago?

@mrdiro1172 5 ай бұрын

Vuelve a nacer 😂😂😂

@georgehuayna3152 Ай бұрын

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

@acontapro2023 8 ай бұрын

.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 7 ай бұрын

que capo

@LuisCJ-we4ty 4 ай бұрын

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)