Animowane pole formularza

Znudzeni prostym wyglądem formularza logowania? Wszystkie wyglądają tak samo? Czas to zmienić, do dzieła!

Do naszego formularza będziemy potrzebować jedynie dwóch plików, pliku html i css. W pierwszym z nich tworzymy prostą strukturę strony z znacznikiem <form> oraz trzema inputami. Nie zapomnijmy o tym żeby nadać formularzowi klasę lub id ponieważ będziemy musieli się do niego odnieść.

Dla zainteresowanych zostawiam zdjęcie jak powinien wyglądać ten “skomplikowany kod”. :p

form html

Czas w końcu zabrać się za wygląd. Musimy odwołać się do naszych inputów znajdujących się w formularzu w moim przypadku o klasie box. Aby to zrobić musimy skorzystać z kwadratowych nawiasów i określić typ naszego pola wprowadzania. My skorzystamy z typów text oraz password, przecież nie chcemy żeby “somsiad” nie widział jakie mamy hasło. Po wystylizowaniu formularza według naszego uznania za pomocą pseudoklasy focus wykonamy animacje. Po kliknięciu w wybrane pole ustawimy większą szerokość pola oraz zmienimy kolor obramowania dla lepszego efektu. Na końcu zadbajmy jeszcze o nasz nagłówek wzbogacając go o kilka linijek kodu.

formcss

Kliknij w pola formularza aby wybróbować!

Login




Dodaj komentarz