css

#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 »

#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 »

#68. Animacje CSS – wprowadzenie

Wprowadzenie do animacji Przez najbliższe osiem tygodni (zaplanowałem 8 postów) pokaże Ci jak tworzyć animacje CSS i efekty graficzne zachowując odpowiednie praktyki i kompatybilność z wszystkimi przeglądarkami. Odkryjemy dogłębnie zasady działania przejść w CSS i transformacji 2D oraz0 3D. Dodam również rozbudowany materiał o filtrach i gradientach. Sporą częścią materiału stanowić będą animacje CSS, w …

#68. Animacje CSS – wprowadzenie Read More »

#20. Strona ze zdjęciami🖼

Cześć. Podsumujemy naszą wiedzę z tematyki budowy layoutu. Poniżej dodaję ćwiczenie do rozwiązania. Powodzenia Ćwiczenie Stwórz nowy projekt w codesandbox. Stworzymy podstawowy szkielet strony HTML. Dodaj diva z klasą “hero”. W nim umieść nagłówek h1 z treścią”Witam!”. Zamknij diva. Kolejnego diva dodaj z klasą “container”. Zamknij diva. Pod nim dodaj diva z klasą “footer”. W …

#20. Strona ze zdjęciami🖼 Read More »

#6. Poznajmy bliżej CSS

Jak pracowaliśmy ze stylami… Podstawy podstaw początkującego klikacza kodu mamy za sobą❕ W jednym pliku html tworzyliśmy kod, w którym znajdowały się teksty i obrazki sformatowane, dzięki atrybutowi ‘style’. Od tej chwili pracujemy tak… 🔽 Zacznijmy od wyjaśnienia co oznacza skrót: CSS Cascading Style Sheets – Kaskadowe arkusze stylów CSS to język reguł określających wygląd …

#6. Poznajmy bliżej CSS Read More »