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

Proste mapowanie obrazu – poradnik

Mapowanie obrazu to bardzo ciekawa rzecz w kontekście tworzenia stron internetowych. Pozwala to sprawić, że grafiki na naszej stronie będą w pewien sposób interaktywne. Za pomocą kilku linijek kodu możemy sprawić, że obrazek na naszej stronie zostanie sporą mapą odsyłaczy, bądź odnośników do funkcji. Jedyne czego potrzebujemy to przygotowanej grafiki w odpowiednim rozmiarze (to bardzo ważne) i darmowego programu do obróbki grafiki – GIMPa. Oczywiście, tradycjonaliści mogą sobie odczytywać współrzędne z Painta, ale przyznajcie – komu by się chciało. Więc przechodząc już do rzeczy, przygotowujemy sobie grafikę i otwieramy GIMPa. Ładujemy nasz obraz i wchodzimy w zakładkę: Filtry -> Strony WWW -> Mapa obrazu. W tym momencie nasz interfejs wygląda tak:
p1
Do wyboru mamy 3 kształty – prostokąt, koło, wielokąt. Do prostszych projektów można używać pierwszych dwóch, lecz gdy chcemy, by nasze odnośniki miały dokładne kształty zalecam użyć wielokątów. A więc bierzemy się do zaznaczania!
p2
Po zakończeniu zaznaczania możemy wybrać do czego dany obszar będzie się odnosił – jak widać jest wiele opcji – w tym przypadku wybieram stronę WWW. To samo powtarzamy przy kolejnych figurach.
p3
Po wszystkim klikamy: Plik -> Zapisz jako… i zapisujemy jako plik z rozszerzeniem *.map. Otwieramy plik w edytorze tekstu i voila – mamy gotowy kod na stronę!
p4
Noo… prawie gotowy, musimy zmienić źródło obrazu z „[img] (zaimportowany]” na faktyczną ścieżkę do obrazu. I pamiętajmy – wartość po usemap i map name musi być taka sama! PS. W trzecim obszarze nie ma odnośnika do strony, bo znajdzie się takowy do funkcji JS – zresztą sprawdźcie sami niżej! img

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

Multimedia

Witam w szóstym kursie przygotowującym do Kwalifikacji E.14.  Jest to już ostatni kurs HTML w którym zajmiemy się multimediami. Filmy , muzyka i grafika uatrakcyjniają naszą witrynę więc czemu by ich nie wykorzystać.  Czytaj dalej Multimedia