od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerWeb dev nigdy nie stoi w miejscu - włączając w to CSS. Czołowe przeglądarki różną się implementacją różnych funkcjonalności, a coraz to nowe właściwości wchodzące do specyfikacji są w stanie postawić stylowanie do góry nogami. W tym kursie poznasz przegląd różnych technik i technologii które zmienią Twoje patrzenie na CSSa - zdecydowanie na lepsze! Koniec z tworzeniem hacków w JavaScript aby osiągnąć efekty takie jak wykresy kołowe czy płynne przewijanie. Poznasz też różne właściwości CSS które są w stanie przyśpieszyć Twoją witrynę!
Na pewnym etapie rozwoju jako Front-End developer, bądź wraz z rozwojem naszego produktu - standardowe podejście do CSSa może nie wystarczyć. W tym kursie poznasz 5 ciekawych architektur CSSa, poznasz ich podstawowe koncepty oraz moje opinie na ich temat. Dzięki temu, tworząc swój następny projekt, będziesz w stanie stworzyć architekturę CSSa bazując na sprawdzonych fundamentach.
CSS Grid i CSS Flexbox to właściwości które powinien znać każdy Front-end developer. Jeśli nie chcesz spędzać wielu godzin na poznawanie tych technologii z osobna, w tym kursie znajdziesz podstawowe informacje na temat tych dwóch technologii - w pigułce. Poznasz różnice między nimi oraz dowiesz się, co zmieniło się w nich w ostatnim czasie.
Jeśli borykasz się z problemami wydajnościowymi na swojej stronie internetowej, ten kurs wskaże Ci techniki które pomogą Ci zmniejszyć czas ładowania, jak i ogólną wydajność Twojej witryny - czy to początkowe ładowanie, czy klatkująca animacja.
Czy nie wiesz jak zacząć z preprocesorami? Po co są nam one potrzebne? A może nie wiesz jak wpasowują się w obecne trendy tworzenia stron? Ten kurs odpowie na Twoje pytania! Dodatkowo, dowiesz się jak skonfigurować jeden z najbardziej popularnych preprocesorów CSS, oraz poznasz jego kluczowe funkcje czy składnie.Jako dodatek, dowiesz się jak dzielić Twoje zmienne SCSS wraz z Twoim kodem JavaScript!
Animacje CSSowe są już z nami od lat, ale jak konkretnie się za nie zabrać? Co trzeba zrobić, aby rozpocząć przygodę z animacjami? Jeśli nie wiesz, to w zaledwie kilku lekcjach poznasz narzędzia i składnie do tworzenia przejść i animacji ograniczonych tylko przez Twoją wyobraźnię* (i możliwości CSSa)
Aby móc efektywnie korzystać z tego kursu, powinieneś posiadać średnio zaawansowaną wiedzę z kategorii Front End. Przyda się również umiejętność poszerzania pojedynczych zagadnień na własną rękę, ponieważ wiele z poruszanych w tym kursie tematów można by zgłębiać godzinami. Nie zaszkodzi również podstawowa wiedza o JavaScript. Postaram się wprowadzić Cię w różne obszary CSSa potrzebne w codziennej pracy jako Front-End developer. Doświadczeni developerzy znajdą w tym kursie powtórkę najistotniejszych informacji na temat współczesnego CSSa, jak i ciekawe zagadnienia o których często się zapomina.
Część tej lekcji będę mówił troszkę obrzęd mordach czyli sposobie dzięki któremu
możemy mieszać różne warstwy elementów HTML owych które są nad sobą
tak aby tworzyć nowe doznania wizualne w związku z czym ja tutaj stworzyłem sobie
Diva który ma na sobie Belgrad i miecz ze zdjęciem.
Mnie i moich przyjaciół na wakacjach.
Oczywiście mógłbym to zrobić za pomocą znaczników i MG np.
wewnątrz Tiger tak aby było to bardziej dostępne rozwiązanie.
Natomiast dla uproszczenia umieścił to w ten sposób.
No i generalnie
mody działają na zasadzie tak jak już wspomniałem łączenia warstw ze sobą.
Jest kilka rodzajów modów
i w zależności od tego co chcemy osiągnąć powinniśmy używać jednego albo drugiego.
Ja szczerze mówiąc nie jestem
ekspertem ale wiem jak mniej więcej one
działają w związku z czym to co możemy zrobić z prędkościami to.
Ulepszyć nasze zdjęcia na przykład na
naszym blogu czy na naszym portfolio zdjęć.
Już po stronie przeglądarki my możemy
wrzucić nie filtrowanie zdjęcia na nasz serwer WWW i pozwolić manipulacją.
Zostać zablokowany przez CSS a i
przykładowo normalnie to zdjęcie wyglądało w ten sposób.
Jest to ładne zdjęcie natomiast dzięki
Brand modą możemy nadać mu taki Instagram mowy wręcz Phil takie odczucie głębi
i takiego kinematografii wideo Video i jak można sprawdzić jak to się dzieje.
Generalnie jeżeli komentujemy sobie na
chwilkę ten mecz to zobaczymy jak wyglądają bez tego zdjęcia.
No i widzimy że tutaj na pseudo elementach
które są w pozycjonowanie na sobie absolutnie mamy dwa gradient
jeden gradient jest to ten gradient który przy mnie troszkę nie bo i
faktycznie trawę i dzieje się to po prostu dlatego bo tutaj dajemy ciemny gradient a
tutaj przechodzimy w jaśniejsze kolory i przez to że korzystamy tutaj z Mix Plant
Point over Lay no to te jaśniejsze kolory zostaną.
Połączone razem z tym naszym zdjęciem dzięki czemu ta sekcja zostanie rozliczona
a nie bo zostanie przecież Mona i dzięki temu mamy taki efekt.
No i do tego dochodzi jeszcze drugi pseudo
element który nadaje ten czerwony akcent od dołu stymulujące przebicie światła tak.
Jakby to zdjęcie zostało faktycznie w ten sposób wykonane.
Dodatkowo na samym zdjęciu
podbili kontrast oraz mówiliśmy troszkę o którym już mówiłem w poprzedniej lekcji
aby zdjęcie wydawało się trochę bardziej żywe i generalnie zastosowanie modów jest
raczej takie aby podkręca doświadczenia wizualne różnych mediów
takich jak obrazki czy video jest cała strona która opisuje różne filtry CSS owe
w połączeniu z układami nazywa się CSS gram.
Jeśli odwiedzimy tę stronę no to faktycznie będziemy widzieli
różne możliwości tutaj jest filtr czyli takie jest domyślne zdjęcie.
No i tutaj mamy różne filtry uzyskane tylko i wyłącznie za pomocą negatywnych
CSS owych właściwości bez żadnego Photoshopa czy innych programów
graficznych które pozwalają nam odrabiać obrazy laserowe.
W związku z czym jeżeli jesteś zainteresowany fotografią i
pragniesz stworzyć swoją stronę internetową ze swoim portfolio to na pewno
CSS jest dobrym połączeniem pomiędzy pasją do fotografii a tworzeniem stron
internetowych w sposób wydajny i współczesny.
Link do strony CSS gram umieszcza oczywiście w źródłach zachęcam abyś
przejrzał różne filtry i załadować sobie bibliotekę do własnego projektu.
Jeżeli faktycznie masz taką potrzebę.