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

Prosta animacja w CSS!

Chcecie zrobić prostą animację nie wykorzystując javascriptu? Nic prostszego.


Do dzieła!

Na początku tworzymy prostą listę punktowaną w pliku html o dowolnym tekście pamiętając aby każdą literę zapisać w osobnej linii.


Czytaj dalej Prosta animacja w CSS!

Zajęcia pozalekcyjne z programowania

W dniu 06.12.2018 odbyła się kolejna lekcja zajęć dla klas szkół podstawowych dotyczących pisania stron internetowych w językach HTML, CSS. Uczniowie na zajęciach poznali podstawowe pojęcia dotyczące języka CSS oraz wykonali prostą stronę używając znaczników div.

Poniżej widzimy efekt pracy w kodzie html:
Html


Oraz w kodzie kaskadowego arkusza stylów:
CSS


Oto końcowy wygląd strony:

Strona