W tym materiale pokaże krok po kroku, jak zbudować menu wielopoziomowe przy użyciu poznanych w poprzednich sekcjach technik HTML i CSS. Podczas starania się o prace na stanowisko związane z frontendem, takie zadanie może się pojawić do wykonania. Materiał podzieliłem na kilka mniejszych sekcji. Struktura projektu Każdy projekt zaczynamy od zbudowania szkieletu HTML dla naszej …
Podpowiedź Przed rozpoczęciem tego rozdziału, polecam zapoznać się z moim podstawowym kursem “Plan nauki Frontend Developer”, a dokładniej z rozdziałem “Zabawa z CSS”. Warto przećwiczyć podstawowe praktyki pisania kodu, co w przyszłości pomoże przy wykonywaniu zadań. × Odrzuć alert W poprzednim rozdziale poznaliśmy podstawy HTML i CSS. Był to jednak dopiero początek. Style CSS posiadają …
#2.1. Właściwości CSS – zaawansowane | #2. CSS – praktyka Read More »
Od dawna wiadomo, że trening czyni mistrza. Gdy znasz już podstawy posługiwania się zarówno językiem HTML, jak i CSS, przeprowadzę Cię przez proces tworzenia strony “O mnie”. Ten rozdział jest jednym dużym zadaniem. Projektowanie Projekt strony WWW tworzymy między innymi na dwa poniższe sposoby: Projekt strony WWW tworzymy na podstawie projektu graficznego dostarczonego od grafika …
#1.3. Prosta strona od zera | #1. Struktura HTML oraz stylizacja CSS Read More »
Podpowiedź Przed rozpoczęciem tego rozdziału, polecam zapoznać się z moim podstawowym kursem “Plan nauki Frontend Developer”, a dokładniej z rozdziałem “Podstawy CSS”. Warto przećwiczyć podstawowe praktyki pisania kodu, co w przyszłości pomoże przy wykonywaniu zadań. × Odrzuć alert CSS – co to i do czego nam będzie potrzebne? W poprzednim rozdziale pokazałem, że HTML odpowiada …
#1.2. Stylowanie z CSS | #1. Struktura HTML oraz stylizacja CSS Read More »
Gradient linear-gradient Gradient linear-gradient jest jedną z wartości właściwości background. Do działania potrzebuje dwóch wartości: koloru początkowego i koloru finalnego. Przykładowo, właściwość background: linear-gradient(red, green). Bardziej rozbudowana właściwość dzięki której utworzymy trójkolorowy gradient: background: linear-gradient(blue, red, green). Domyślnie przemieszczanie się gradientu jest z góry na dół. Możemy jednak zmieniać ten kierunek, np. background: linear-gradient(left, blue, …
Metoda blur() Metoda blur() (gdzie x to liczba) ustawia elementowi rozmycie zgodnie z liczbą pixeli podanych w deklaracji. Obsługiwaną jednostką są piksele, a im większa wartość, tym większe rozmycie nadamy elementowi. Aby nadać duże rozmycie właściwość skonstruujemy następująco: filter: blur(15px). Spójrz na poniższy przykład z zasady działania powyższej metody: https://youtu.be/6bwR7Gce1ac Metoda brightness() Metoda brightness() ma …
Keyframes – podstawy O animacjach CSS należy rozpocząć najlepiej od podstaw. Podstawą są właściwości, które pozwalają wprawić w ruch element czyli animacje. Deklarację animacji rozpoczynamy od @keyframes, następnie dodajemy jej nazwę i otwieramy nawiasy, np. @keyframes animacjaTestowa {…} Wewnątrz deklaracji dodajemy słowa kluczowe. Pełnią one role kroków. Możliwe keywords to: from oraz to oznaczające z …
Transformacje 3D – perspective Aby transformacje 3D były możliwe, trzeba spełnić następujący warunek – wymagana jest perspektywa. Nadać możemy ją poprzez dwie właściwości CSS. Pierwsza właściwość to transform: perspective;. Nadaje ona wybranemu elementowi “głębie”, która służy za perspektywę. Druga właściwość to: perspective: Xpx (x to liczba) ustawiana elementowi rodzica i dotyczy także elementów w nim …
Właściwość “translate()” Poznaliśmy już podstawy przejść w CSS. Teraz poznasz właściwości, które można z nimi połączyć. Na pierwszy ogień idzie wartość właściwości translate o nazwie translate(). translate(x,y) służy przemieszczaniu elementu zgodnie z podanymi parametrami w nawiasie (x – dla osi X, poziomej oraz y – dla osi Y, pionowej). Przykładowo, chcemy przemieścić element o 100px …
Działanie przejścia “transition-property” W tym materiale zobaczysz jak korzystać z przejść , tzn. animowanych zmian w różnych właściwościach CSS. Na pierwszy ogień dajmy transition-property. To podstawowa właściwość przejść określająca, które ze zmienionych wartości CSS mają być animowane. Przykład który możesz zobaczyć poniżej, rozjaśni możliwości właściwości: https://youtu.be/APRXyZSq9nE Czas trwania przejść “transition-duration” W powyższym materiale pokazałem właściwość …
