Frontend Developer

#2.1. Właściwości CSS – zaawansowane | #2. CSS – praktyka

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 »

#1.3. Prosta strona od zera | #1. Struktura HTML oraz stylizacja CSS

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 »

#1.2. Stylowanie z CSS | #1. Struktura HTML oraz stylizacja CSS

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 »

#74. CSS – gradienty

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, …

#74. CSS – gradienty Read More »

#73. CSS – filtry

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 …

#73. CSS – filtry Read More »

#72. Animacje CSS – ciąg dalszy.

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 …

#72. Animacje CSS – ciąg dalszy. Read More »

#71. 3D – tworzymy transformacje

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 …

#71. 3D – tworzymy transformacje Read More »

#70. 2D – tworzymy transformacje

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 …

#70. 2D – tworzymy transformacje Read More »

#69. CSS – przejścia

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ść …

#69. CSS – przejścia Read More »