suelto, y el formulario debajo. Los dos textos se * parecian mucho: un titulo y un texto normal, sin nada que dijera cual era el * importante. Y el titulo ocupa la primera linea de la tarjeta, que es donde el ojo * entra, para decir "Entra", que no es una informacion: es lo que ya estas leyendo. * * Aqui el orden es el contrario, y es el que se lee mejor: * * 1. El kicker, que es pequeno, verde y de mayusculas. Dice "Inicia sesion" y lo * primero que se ve. Es la accion, y por eso va la primera: es lo que la * persona ha venido a hacer a esta pagina. * 2. El subtitulo, que explica que se ve al entrar. Esto es lo util: el titulo * anterior no decia nada, y lo primero que pregunta alguien que vuelve es * "que veo si entro". * 3. Los campos. * * EL KICKER, POR QUE SE REUSA .account-kicker Y NO SE CREA UNO NUEVO * * .account-kicker ya existe, en la columna izquierda de esta misma pantalla, y es * exactamente lo mismo: una palabra en verde, en mayusculas, con las letras * separadas, antes de un texto largo. Reusarlo es lo que hace que las dos columnas * de la pagina se lean como una sola cosa. * * Lo que si cambia es el margen. En la columna izquierda va con 20 px de margen * debajo, porque ahi separa el kicker de un
de una linea y 20 px de aire entre dos frases cortas se ven * como un corte. * * EL GRADIENTE DE FONDO * * La tarjeta de la derecha ya era oscura y plana. Se le anade un degradado * verdoso muy flojo en la esquina de arriba izquierda, que es por donde entra la * luz en una pantalla con brillo. No se nota si no lo buscas, y es lo que hace que * la tarjeta deje de parecer un rectangulo pegado. * * Con dos capas y no con una: la primera es el degradado, y la segunda es un plano * del mismo color de fondo, que va DEBAJO. Sin el plano, el degradado se * transparentaria y se veria lo que hay detras de la tarjeta, que es el fondo de la * pagina. * * LOS CAMPOS * * El fondo del campo pasa de #091423 a #0b1a2b, que es un azul un poco menos * negro. Con el fondo nuevo de la tarjeta, un campo casi negro parece un agujero * en la pantalla en vez de un sitio donde escribir. * * Y el placeholder va en un gris mas claro (#7d90a6) que el #52647a de antes. El * color anterior era el mismo del borde del campo, y con un borde y un texto del * mismo color no se distinguia si el campo estaba vacio o no. * * LA LETRA PEQUEÑA DEL FINAL * * .account-fine ya existia, pero con "import" y !important, que es como se * pisa cualquier cosa. Se deja como estaba y no se toca: ya funciona, y rehacer * algo que funciona para dejarle un hueco donde escribir es perder tiempo. */ .account-login-header { display: grid; gap: 6px; margin-bottom: 4px; } /* * EL TITULO Y EL TEXTO DE DEBAJO * * El titulo va con el estilo del kicker: pequeno, verde y en mayusculas, como el de * la columna de la izquierda. Con eso, las dos columnas de la pagina se leen como * una sola cosa. * * POR QUE ESTA REGLA EMPIEZA POR .account-card Y NO POR .account-login-title * * Porque .account-card h2, que esta en la hoja de arriba, pone el color y el * tamano de los titulos de tarjeta, y gana. No es que se escribiera antes: es que * tiene mas especificidad. ".account-card h2" es una clase y un tipo, y vale mas * que ".account-kicker", que es solo una clase. Con el selector corto, el titulo * salia en el color y el tamano de los otros titulos de tarjeta, en vez del del * kicker. * * Repetir .account-card delante no es un truco para forzar que gane: es que el * estilo que se quiere cambiar es el de DENTRO de la tarjeta, y para cambiar algo * de dentro hay que ganarle a la regla de dentro. * * Y el texto de debajo va MAS PEQUENO que el titulo, al reves de lo normal. * * Lo normal en una pantalla es: titulo grande, texto debajo mas pequeno. Aqui al * reves, y ha pasado de verdad: con el titulo a 0.78 rem y el texto a 0.94, el * titulo salia mas pequeno que lo que tenia debajo. El ojo lee eso como que la * frase larga es lo importante y el titulo es una etiqueta, que es justo lo * contrario: el texto largo es el que explica, y el titulo es el que dice donde * estas. * * Por eso el titulo se queda un poco por encima (0.86) y el texto baja (0.8), y en * un gris mas apagado que el de la tarjeta. Con eso el orden se lee bien: primero * donde estas, despues que pasa aqui. */ .account-card .account-login-title { margin: 0 0 5px; font-size: 0.86rem; color: #86efac; } .account-login-header p { margin: 0; color: #9fb3c6; font-size: 0.8rem; line-height: 1.5; } /* * LA TARJETA DEL LOGIN * * Con una clase propia en el HTML, .account-card-login, y NO con :has(). * * :has() es mas comodo, porque no hay que tocar la vista, pero solo funciona * desde 2023. En un navegador que no lo tenga, la regla no se aplica y no pasa * nada: la tarjeta sigue teniendo su fondo plano. Que es exactamente lo que * quiere este sitio: el degradado es una mejora, no lo que hace que la pantalla * se pueda usar. Con una clase, en cambio, hay que acordarse de ponerla, y si * alguien anade otra pantalla de entrada y se le olvida, la nueva sale con el * fondo plano sin que nadie sepa por que. * * El degradado va con dos capas y no con una: la primera es el degradado, y la * segunda es un plano del mismo color de fondo, que va DEBAJO. Sin el plano, el * degradado se transparentaria y se veria el fondo de la pagina a traves de la * tarjeta. */ .account-card-login { background: linear-gradient(155deg, rgba(34, 197, 94, 0.07), rgba(34, 197, 94, 0) 46%), #111e32; } /* Los campos del login, con el fondo un poco menos negro que antes. */ .account-login-header ~ .account-form input:not([type="checkbox"]) { background: #0b1a2b; } .account-login-header ~ .account-form input::placeholder { color: #7d90a6; opacity: 1; } /* * El boton de entrar, un poco mas alto que el resto de botones de la cuenta. * * Es la accion principal de esta pantalla, y en una pantalla donde solo hay un * boton, ese boton tiene que ser el que se ve primero. 15 px de mas en los * lados lo hacen un poco mas ancho que los campos, que es como se marca un boton * principal sin necesitar un color distinto: ya lo tiene. */ .account-login-header ~ .account-form .account-button { padding: 15px 22px; margin-top: 4px; box-shadow: 0 8px 22px rgba(74, 222, 128, 0.16); } .account-login-header ~ .account-form .account-button:hover { box-shadow: 0 10px 28px rgba(74, 222, 128, 0.24); }