CSS: Perspektywa
od Podstaw
9 godz. 11 min · HTML i CSS · Full-stack i Programowanie
Wojciech PołowniakSr. Fullstack EngineerCzego się nauczysz
- Najważniejsze koncepcje CSS
- Praktyczne przykłady zastosowania
- Kompendium wiedzy o nowych technikach
- Preprocesory CSS
- Flexbox oraz Grid
- Podstawy tworzenia animacji
- Architektura CSS
- I wiele więcej!
CSS na miarę lat 20 XXI wieku
Web 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ę!
Architektura CSS
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.
Tworzenie layoutów przy współczesnych metodach pozycjonowania
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.
Przyśpiesz swoją stronę
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.
Preprocesory CSS
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!
Fundamenty animacji w CSS
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)
Dla kogo jest ten kurs?
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 pokrótce opowiem o
perspektywie w czasie i to jest taki przykład który przedstawia trójwymiarową
kostkę w samym CSS bez żadnego dziela i jesteśmy w stanie pokazać dowolną ścianę
tejże kostki tego sześcianu w HTML u zmieniając tylko klasę z.
Front naszą naszych na przykład i wtedy nam się to ładnie animacje i
możemy dowolną ścianę tego sześcianu pokazywać jak to jest zrobione.
Na samym początku
musimy mieć kontener który będzie jakby raperem niewidzialny na całą naszą kostkę
na którym będziemy ustawiać właśnie tą perspektywę.
Perspektywa o której mowa generalnie
będzie sprawiała nie tyle samą animację trójwymiarową czy faktycznie ułożenie tych
elementów bo za to odpowiadają inne właściwości ale perspektywa tutaj pozwala
nam ustawić jakby kamerę w odpowiednim miejscu.
Na stronie internetowej jeżeli zmniejszymy
tę perspektywę powiedzmy do stu czyli to jest poniżej szerokości i
wysokości naszej kostki to widzimy że znajdujemy się jakby wewnątrz tej kostki.
Jeżeli zrobimy teraz tę animację rajd.
Shaun White.
No to widzimy że to się nam obraca tak jakbyśmy byli faktycznie w środku.
Oczywiście można to jeszcze troszkę
zmniejszyć żeby to się wydawało troszkę takie
dłuższe i generalnie takie efekty możemy w samym CBS uzyskać.
No i wróćmy do tej początkowej wartości bo faktycznie pracujemy przy kostce.
Nie chcemy być wewnątrz niej a na zewnątrz jak to jest zrobione.
Generalnie każdy z tych naszych ścian ma dokładnie tą samą szerokość co klub a klub
ma tę samą szerokość co kontener czyli Kontener ma na sztywno 200 pikseli podane
i pojedynczo kluby są w pozycjonowania w nim absolutnie względem tego kontenera.
Każdy z pojedynczych dwóch wewnątrz
również mógłby mieć po prostu tutaj ustawione 100 proc.
Nie muszą to być wartości piksela.
Mogą to być równie dobrze wartości te w ramach I efekt będzie taki sam.
I to co tutaj jest całym klubu tej
animacji to po pierwsze fakt że każda ze ścian ma inną transformację.
Czyli tutaj ustawiamy rotację zero
w osi X i tak naprawdę to jest ta klasyczna ściana frontowa.
Dodatkowo przesunięcie w tej osi o 100 pikseli do przodu.
Jest to jakby na głębokość tylko w
kontekście transformacji trójwymiarowych możemy tutaj mówić
w kontekście Web DW.
Przykładowo indeks właśnie stąd ma swoją nazwę ponieważ operuje on na osi.
Jeśli byśmy tutaj np.
na naszym kontenerze ustawili opaskę na 0
to będziemy widzieli jak te ściany się układają.
Oczywiście nie na opis nie na samym kontenerze tylko na Kubie.
I wtedy będziemy widzieli jak każdy z tych ścian.
Tutaj konkretnie ma być lepiej.
Przepraszam widzimy każdą z tych ścian ona jest
zadeklarowana i jak ona wygląda bez nawet animacji.
Więc jeśli byśmy pozbyli się większości tych ścianek żeby było po
prostu prościej no to zobaczymy że nasza kostka ma w sobie
tę główną ścianę pomarańczową i ta z tyłu jest po prostu obrót o 180 stopni.
W osi X.
Jeżeli byśmy zrobili taką animację.
Szał.
Back to faktycznie widzimy że tych ścian bocznych jest.
Brak czyli faktycznie ich nie widzimy
ale te elementy ułożyły się tak jakbyśmy się tego spodziewali.
Czyli jeżeli zwrócimy sobie.
Powiedzmy ścianę prawą.
I ukrywamy.
Przednią i tylną możemy też w sumie lewą komentować.
Tutaj musimy.
I te dwa komentujemy.
No to widzimy że te dwie ściany są
odwrócone w ten sposób ponieważ w osi X ustaliliśmy im tutaj 90 stopni bądź minus
90 gdzie zero jest to klasyczne takie obrzucanie domyślne.
Jeżeli my je same o minus 90 stopni no to ten element wtedy się nam z płaszcza
tutaj szły na siebie dlatego tego nie widać.
Ale jeśli byśmy tego trasy Lata ZET to nasz element by się zupełnie nie
wyświetlał ponieważ elementy CSS owe dowolne HTML Lewy element
jako taki nie ma swojej głębokości więc to są takie płaskie kartki które jak obronimy
to są na tyle cienkie że faktycznie ich nie widać.
W związku z czym my najpierw obracają tą
kartkę tą naszą ścianę tak aby była zaprezentowana tutaj pośrodku.
No i my po samym obrocie przesuwamy to w
800 o 100 pikseli oraz po obrocie dla tej kostki.
To jest jakby kierunek w prawo więc mamy to przesunięcie.
Dzięki zachowanej perspektywie mamy tutaj taki efekt.
No i generalnie na kolejnych kostkach
musimy zrobić dokładnie to samo tylko dla innych OSI czyli dla osi
górnej i dolnej musimy to obrócić w osi X dla osi lewej i prawej.
Wracamy w y i generalnie aby przedstawić daną ściankę czyli pokazać ją na naszym.
Jałcie.
Wystarczy że komentujemy te właściwości.
Za piszemy.
I faktycznie widać jak ta ścianka się obraca co robi klasa szkoły np.
left to ona nastawia po prostu na głównym
klubie czyli na papierze na wszystkie elementy trasy Lata.
Więc musimy podać tutaj wartość odwrotną
do tego co chcemy pokazać czyli jeśli robiliśmy show back no to musimy tutaj w
show back pokazać wartość odwrotną czyli tu jest x minus 180 i daliśmy taką wartość
dlatego że bank ma obrót o 180 stopni więc my obracając cały kontener
o taką wartość przeciwną po prostu sprawimy że będzie on teraz na froncie.
I generalnie perspektywa nie jest czymś co się często
używa chyba że faktycznie chcemy stworzyć np.
obracają się kartę z jakimś opisem produktu czy chcemy zrobić ciekawą.
Galerię zdjęć jako nasze portfolio i te właściwości oczywiście będą działać
tylko jeśli będziemy dynamicznie zmieniać te klasy na przykład za pomocą skryptu
albo stworzymy do tego osobne animacje.
Friends czyli show powiedzmy left.
To działa dlatego ponieważ jest zmiana
wartości trans którą a nie za pomocą tranzytowym i.
Jest to animacja liniowa.
Ostatnim blokiem który wymaga tego aby ten przykład działał jest Transformer Still
prezes w 3D i on robi tyle że w przypadku kiedy element jest obracanie to nie jest
on przez dany kontener jeżeli sobie komentujemy.
I damy sobie tutejszą radę.
No to widzimy że tej animacji zupełnie
tutaj nie ma i ona nam znika ponieważ tak jak wspominałem
elementy odwrócone w ten sposób że widzimy ich bog wcale nie mają żadnej szerokości
silnika transport rezerw 3D pozwoli nam na to że będą te ściany widać ponieważ
zachowamy elementy które się przenikają się ze sobą nawzajem.
Ten przykład też omawianym kiedyś hoduje w związku z czym jeśli potrzebujesz więcej
informacji na ten temat odsyłam cie na mój kanał na YouTube.
Natomiast najważniejsze informacje o tym filmie to transfer Still perspektyw
form i obracania odpowiednie wartości wzdłuż każdej z osi.