CSS: CSS Shapes
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.
Cześć tej lekcji opowiem ci o ships czyli o kształtach w cs.
Załóżmy że mamy stronę internetową która
zachęca nas do zdrowego jedzenia i zachęca nas do jedzenia warzyw i owoców.
I tutaj mamy jakiś paragraf tekstu
na którym chcielibyśmy wyświetlić dodatkowe obrazki.
Tutaj w naszym kodzie źródłowym umieściła dodatkowo trzy obrazki.
A na NASA winogrona i pomidora.
No i powiedzmy że chcemy umieścić pomidora w tym miejscu i MG SOS wybierzemy tutaj.
To matoł.
Red.
To.
Piszemy.
I faktycznie on się dodał Oczywiście
musimy go troszkę skurczyć więc dodamy klasę S i to.
No i na to Matoł możemy ustawić jakieś max powiedzmy 20.
Zobaczymy jak to wygląda i faktycznie jakoś tam się już ułożył
możemy mu nawet troszkę zmniejszyć powiedzmy do 10.
No i faktycznie element tutaj nam się.
Jeśli chcielibyśmy aby
tekst o pływał ten element no to oczywiście możemy do tego użyć lotów do
tego floty zostały stworzone a nie do pozycjonowania naszych klejnotów więc
jeżeli chcemy ułożyć obrazek w tekście no to Flota od tego służy.
No ale widzimy że niestety nie wyciął się ładnie ten pomidor no bo obrazek jest
kwadratowy na tekst go pływa też kwadratową pomimo tego że tutaj mamy
tą czarną przestrzeń bo obrazek jest przezroczysty więc to co możemy zrobić to
możemy użyć właściwości Ship Outside i podać tutaj różne właściwości mamy np.
content box
set naprawdę różne właściwości.
No i zacznijmy może od serial jak to piszemy.
To widzimy że już nasz pomidor jest opisywany przez tekst w miarę rzetelnie.
Oczywiście moglibyśmy próbować podawać obrazek czy cały poligon
ale możemy też po prostu pobrać z Chrome Web Store czy odpowiednio innego Store dla
Waszej przeglądarki rozszerzenie Shape edytor.
No i dzięki niemu
już zainstalowanym w zakładce jest event biznes no to mamy też zakładkę ships.
No i jesteśmy w stanie wyświetlić sobie taki.
Pomocny jeżeli zaznaczył że ten element to faktycznie po jego za znaczeniu możemy
sobie podejrzeć jak ten szajs tutaj nam się układa.
Możemy go dodatkowo przesunąć czyli jeżeli
byśmy chcieli aby troszkę inaczej wyglądało to możemy skurczyć to gładko.
I nawet ograniczyć je tylko do czegoś takiego.
Upewnić się żyć na tą głodówkę nic tam nie
wchodzi i eksportować sobie tyle bezpośrednio stąd możemy tak naprawdę
kopiować sobie Ship Outside The Sun bezpośrednio tutaj.
No i będziemy mieli tą właściwość poza pisaniu.
Oczywiście to zaaplikował.
No oczywiście moglibyśmy tutaj to bardziej
dostosowywać czyli powiększać sobie te elementy
tego Ship out Sida.
Jeżeli sobie go zaznaczył.
Weźmiemy jeszcze raz.
Zastanawiam się czemu się teraz nie pokazał.
Może odświeżyć stronę.
Dirk.
Widocznie rozszerzenie nie jest jeszcze na tyle.
Dobrze rozwinięty albo ja coś tutaj źle
zrobiłem ale generalnie jesteśmy w stanie manipulować tymi wartościami tutaj.
Definitywnie nam się teraz nie chce to
pokazać ale generalnie jeżeli chcielibyśmy dodać kolejny obrazek czyli powiedzmy MG
Class IS Grave tak naprawdę powinno być Archives no ale trzymamy się konwencji
nazewnictwa z X tutaj i ustawiamy sobie PRL.
No to oczywiście pamiętamy ale nie możemy umieszczać obrazków na naszych stronach.
Wpisujemy
Greatest.
Zapisujemy i możemy je faktycznie też
oscylować również w tym Outside czyli grab.
Analogicznie możemy troszkę inny rozmiar dodać tutaj widzimy.
On wygląda w ten sposób dajemy mu flotę na rajd za.
Więc one się na sam koniec dodały.
No ale możemy sobie zamiast Ship out Side
serial na nim dać coś innego coś bardziej konkretnego i Stosowanego.
Definitywnie teraz nie chce mi się to
pokazać prawdopodobnie musiałbym załadować przeglądarkę.
W każdym razie mamy możliwość
dostosowywania pojedynczych kształtów za pomocą tego rozszerzenia.
Ja spróbuję może jeszcze odświeżyć chociażby tą stronę.
I jeszcze raz.
Zobaczymy czy to coś zmieniło SHAPE z.
A teraz ruszyło z powrotem.
No i moglibyśmy tutaj sobie zmienić na przykład poligon.
Jeśli to włączymy i zmienimy na poligon w naszym kodzie.
Zapraszamy.
Zobaczmy czy teraz to zadziała czy nie
oddajemy poligon spróbujmy jeszcze raz odświeżyć i zamknąć kursy.
Poligon musi już przyjąć wartości więc w
ten sposób tego nie zrobimy możemy sobie skopiować z internetu tak naprawdę CSS.
Sharp.
Out said poligon.
Możemy go skopiować tylko dlatego aby.
Mieć wartość jakąś domyślną którą my sobie
stosujemy już za pomocą tego rozszerzenia więc tutaj mamy tą wartość
poligon zapisujemy zamykamy otwieramy.
I dostosowuje to do naszych potrzeb za pomocą rozszerzenia ships.
I tutaj możemy sobie po prostu przeciągnąć na tyle elementów na ile chcemy.
No i oczywiście jeżeli byśmy tutaj dali więcej punktów.
Nie wiem czy z poziomu tego rozszerzenia
możemy dodawać pojedyncze punkty oczywiście widać że możemy.
No to możemy sobie faktycznie to pozycjonowanie tak jakbyśmy chcieli żeby
to się trenerowi działo w większej ilości tekstu.
Więc generalnie.
Port Said jest właściwością która jest całkiem dobrze wspierana pomimo tego
jakie możliwości daje w kontekście pozycjonowania obrazków na tekście.
I ja szczerze mówiąc jestem zaskoczony że tak późno ją poznałem dlatego oczywiście
chciałem się z Wami podzielić tą właściwością.
Jeśli już tylko skończę pozycjonowanie w te winogrona.
Powiedzmy że zapisze to w ten sposób.
Przekonujemy z powrotem do naszego kodu źródłowego
i poza pisaniem możemy dodać więcej paragrafów tekstu.
No to nasz tekst
będzie ładnie pływał te winogrona w taki sposób jaki jeszcze przed paru laty.
O tym myśli więc jesteśmy w stanie pozycjonowania.
Obrazki w tekście za pomocą faktów to jest
przeznaczenie główne faktów i jesteśmy w stanie dostosowywać kształt
tego jak ten tekst pływa dane kształty za pomocą Shape Outside i CSS ships.
Edytor to rozszerzenie z którego na pewno warto skorzystać jeżeli pracujecie.
No i juz możecie sprawdzić jak Outside
jest wspierany w waszych przeglądarkach czy generalnie globalnie.
Na świecie.
She said.
No i widzimy że wsparcie ma 93 proc.
więc jest tak naprawdę porównywalne do gry troszkę gorsze bo Grid ma 94.
Ale jeżeli używać
Grada no to są też całkiem spore szanse że możecie korzystać z Outside.
I tyle w tej lekcji.
Zachęcam was do eksperymentów i.