20 najlepszych samouczków CSS3, aby poprawić swoje umiejętności tworzenia stron internetowych
Opublikowany: 2022-05-06Kaskadowe arkusze stylów (CSS) stają się czymś więcej niż tylko językiem stylizacji sieci. Powoli staje się w pełni zdolnym językiem, który poradzi sobie z dynamicznymi aspektami projektowania. Pod wieloma względami CSS może zastąpić tradycyjny HTML i JavaScript w celu uzyskania interaktywności i niezależności od zewnętrznych bibliotek i fragmentów kodu. Wszystkie style, które widzimy dzisiaj w sieci, są bezpośrednio przez CSS. Ponieważ standard wciąż rośnie i poprawia się, trzymanie się wszystkiego jest ważniejsze niż kiedykolwiek. Przeglądarki internetowe renderowały CSS, podobnie jak HTML, co czasami może oznaczać, że starsze przeglądarki nie obsługują nowych funkcji.
W ostatnich latach rozpoczęcie pracy z frontendowym tworzeniem stron internetowych i projektowaniem stron internetowych stało się łatwiejsze. Widzimy znacznie więcej samouczków, przewodników i kursów, na które można się zapisać. Ale ostatecznie sprowadza się to do chęci pracy z nowo nauczonymi umiejętnościami i zastosowania ich w rzeczywistych projektach. CSS jest jednym z tych języków skryptowych, które wymagają od użytkownika użycia określonych wzorców i opcji układu w celu zastosowania do języków takich jak JavaScript i HTML. Budując nową stronę internetową z HTML i CSS, najlepiej jest pracować krok po kroku, aby w pełni zastosować to, czego się nauczyłeś.
Dzisiaj naszym celem jest omówienie najbardziej znanych i nowoczesnych samouczków CSS3 od czołowych programistów i projektantów front-end. Wszystkie samouczki są oparte na najnowszych standardach, aby pomóc Ci stać się lepszym projektowaniem stron internetowych. Na końcu posta wspomnimy również o kilku zasobach szkoleniowych CSS3 do dalszej nauki. Jak każdy język programowania, aby lepiej coś zrozumieć, powinniśmy pozwolić sobie na pewne powtarzalne kodowanie, za pośrednictwem dynamicznej platformy online lub w naszych osobistych edytorach kodu.
Edycja obrazów w CSS
Używanie obrazów w projektowaniu stron internetowych ma sens, ale historia staje się bardziej techniczna. Chociaż fajnie jest używać zdjęć, które Ci się podobają w projektach internetowych, czasami musimy wziąć pod uwagę pewne rzeczy. Czy rozmiar pliku obrazu jest odpowiedni dla naszego projektu? Czy możemy dodawać filtry przez CSS, a nie przez zewnętrzne aplikacje, takie jak Photoshop? Co możemy zrobić z CSS, aby nasze zdjęcia wyglądały lepiej? Una Kravets zabiera nas w 15 minutową podróż. Mówi w nim o edycji obrazów CSS i o tym, jak możemy przekształcić CSS, aby działał bardziej jak samodzielna platforma oprogramowania do edycji obrazów, a nie tylko sposób manipulowania aspektami projektu.
Używanie nowoczesnego CSS do budowania responsywnej siatki graficznej
Kontynuując temat obrazów, oto George Martsoukos. Przedstawia prosty, lekki samouczek, jak używać nowoczesnych funkcji CSS3 do tworzenia responsywnych siatek obrazów. Siatki obrazów (lub czasami nazywane galeriami) służą do wyświetlania treści wizualnych w kontekście siatki. Tego rodzaju siatki stają się przydatne dla tych, którzy udostępniają swoje zdjęcia lub używają siatki obrazów do rozszerzenia elementów swojego portfolio. W tym samouczku George przedstawia nam proces upewniania się, że tworzone przez nas siatki będą w równym stopniu reagowały na aplikacje desktopowe i mobilne.
Uwagi dotyczące odświeżania CSS
Notatki i przewodniki po stylach są siłą napędową wielu projektantów stron internetowych. Musimy pamiętać, aby odłożyć na bok nasze ulubione zasoby notatek, aby łatwiej było je wykorzystać w przyszłości. A jeśli chodzi o CSS3, CSS Refresh Notes jest jednym z ulubionych w społeczności GitHub; setki gwiazd i mnóstwo wkładu społeczności na temat tego, jak rozszerzyć ten zasób, aby był najlepszy. CSS Refresh Notes skupia się na najważniejszych aspektach rozwoju CSS3. Pozwala również projektantom szybko sięgać do notatek referencyjnych dla większości funkcji CSS3. Niezależnie od tego, czy potrzebujesz pomocy w kwestii pozycjonowania, czy selektorów, na przykład zapytań o media w celu responsywnego projektowania lub jak najlepiej wykorzystać SVG w swoich wzorcach projektowych CSS3 — te uwagi przydadzą się, nawet jeśli nie czujesz się w ten sposób.
Zmienne: szkielet architektury CSS
W ostatnich latach pojawiły się preprocesory, proste frameworki i zestawy narzędzi, które pozwalają projektantom rozszerzać podstawową funkcjonalność CSS3 o domieszki, funkcje i zmienne. Zwykle spodziewałbyś się zobaczyć tego rodzaju funkcje w zakodowanym na sztywno języku programowania, takim jak JavaScript. Prawdopodobnie każdy powinien być biegły w CSS3, aby kodować bez płynnego korzystania z preprocesorów. Jednak takie rzeczy, jak czas rozwoju, pozostają ważne. Zmienne pomagają używać CSS3 w bardziej dynamicznym środowisku. Dlatego Karen Menezes zebrała jedną z najbardziej obszernych treści na ten temat, jakie kiedykolwiek znajdziesz.
Projektowanie układu strony produktu za pomocą Flexbox
Flexbox to nowy tryb układu CSS3, którego celem jest pomoc projektantom w optymalizacji ich projektów dla różnych urządzeń. Nowa funkcja jest wciąż całkiem nowa i obca wielu osobom, ale korzystanie z Flexbox staje się coraz bardziej popularne w dziedzinach takich jak eCommerce. Ten samouczek CSS3 pochodzi od zespołu z Shopify, gdzie informują o tym, jak udało im się stworzyć jeden z najnowszych szablonów Shopify za pomocą Flexbox, jak przebiegał proces i jak wyglądał efekt końcowy. Znając reputację Shopify na rynku eCommerce i korzystając z samouczka, może to być jeden z najbardziej przydatnych przewodników, które pomogą Ci lepiej zrozumieć Flexbox i jak zacząć z niego korzystać we własnych projektach internetowych.
Najprostszy pokaz slajdów CSS
Pokaz slajdów z CSS3? To musi być niemożliwe! Takie koncepcje są zwykle skierowane do języków takich jak JavaScript czy jQuery. Te języki ułatwiają tworzenie dynamicznych treści w podróży. Ale co z CSS3? Jonathan Snook nie obiecuje nam niczego nowego, zamiast tego daje nam przykład tego, jak możemy wykorzystać efekty animacji CSS3 do tworzenia pokazów slajdów bez konieczności korzystania z zewnętrznych zasobów, takich jak na przykład JavaScript. Jego mały samouczek wprowadzający do animacji CSS3 jest doskonałym przykładem tego, jak kreatywność przezwycięża wątpliwości.
Moduły CSS — rozwiązywanie problemów CSS na dużą skalę
CSS nieuchronnie przekroczy swoje obecne ograniczenia, podobnie jak JavaScript. Patrząc wstecz na bardzo starą przeszłość CSS, przeszliśmy długą drogę od możliwości manipulowania kolorami i wyglądem elementów, obecnie CSS zapewnia znacznie bardziej złożony zestaw narzędzi dla programistów, którzy chcą przebywać w jednym języku, aby wykonywać wszystkie swoje zadania rozwojowe. Moduły CSS pomagają programistom w lepszym dopasowaniu ich kodu CSS, który można następnie skalować, gdy aplikacja lub projekt zaczyna wymykać się spod kontroli. W tym wspaniałym samouczku Tom Cornilliac wyjaśnia, w jaki sposób możemy łączyć różne arkusze stylów i używać ich jako modułów do naszych projektów, które uruchamiamy za pomocą frameworków, takich jak React. Kto by pomyślał, że importowanie arkuszy stylów i dostęp do ich predefiniowanych funkcji będzie łatwy.
Animowanie przyciętych elementów w SVG
Animacje SVG i CSS3 należą do najpopularniejszych tematów w tworzeniu stron internetowych. Dzieje się tak dzięki temu, że zaczynamy odchodzić od konieczności używania ciężkich obrazów i plików animacji do wyświetlania naszych treści, a zamiast tego projektanci uczą się naśladować te dokładne animacje przy użyciu rodzimych języków w przeglądarce. Dennis Gaebel Jr przedstawia podsumowanie wykorzystania przycinania CSS w celu uzyskania oszałamiających efektów animacji i korzystania z oszałamiających wizualizacji wektorowych.
Ekspresyjny CSS
Ekspresyjny to termin ukuty w społeczności programistów od dłuższego czasu. Jest to termin luźno zapożyczony z pojęcia ekspresyjności w językach programowania. Język programowania jest ogólnie uważany za ekspresyjny, jeśli pozwala w naturalny sposób wyrażać myśli w kodzie, który jest łatwy do zrozumienia. Generalnie „ekspresyjny” nie jest niczym nowym. Deweloperzy mówili o tym od lat. Mimo to, za każdym razem, gdy nowa funkcja jest wypuszczana na wolność, programistom, a zwłaszcza projektantom, zajmuje trochę czasu, aby dostosować się do ich ekspresyjnego przepływu pracy, więc czasami projekty mogą stać się bałaganem i uwikłane w zbyt wiele funkcji, które próbują działać jednocześnie. Expressive to lekkie podejście do pisania kodu, które działa dobrze, dobrze wygląda i jest łatwe w utrzymaniu. Użyj tego jako przewodnika po stylu i nie zapomnij wyrazić wdzięczności autorowi; Jana Polacka.
Animacja w Responsive Design
Jak już dowiedzieliśmy się w artykule, animacje i responsywność to dwa bardzo gorące tematy dla projektantów, a połączenie tych dwóch staje się coraz bardziej interesujące dla tych, którzy chcą naprawdę przetestować granice nowoczesnych możliwości tworzenia stron internetowych. Val Head opublikował bardzo wnikliwy artykuł na temat używania animacji CSS3 w responsywnych projektach stron internetowych i jak najlepiej prezentować te animacje tam, gdzie nie tracą na wartości. Zajmuje artykuł z kilkoma prezentacjami demonstracyjnymi z innych odnoszących sukcesy witryn internetowych, które ustanowiły swoje animacje na komputerach stacjonarnych i urządzeniach mobilnych.
Dlaczego jestem podekscytowany natywnymi zmiennymi CSS
Niestandardowe właściwości CSS, znane również jako zmienne, pomagają twórcom CSS3 przyspieszyć proces tworzenia CSS3 poprzez umożliwienie dynamicznych funkcji. Preprocesory robią to już od jakiegoś czasu. Wielu już dostosowało się do idei stałego używania preprocesora. Jednak nieuchronnie wszystkie te funkcje (dostępne w standardzie) znajdą się w nowoczesnych przeglądarkach. Nie ma nic lepszego niż programowanie w natywnym środowisku, nie martwiąc się o utrzymanie i niezawodność zewnętrznego oprogramowania. Inżynier Google, Philip Walton, poświęcił swój cenny czas na zebranie bardzo wnikliwej pracy na temat nowej funkcji CSS i dlaczego społeczność powinna przyjąć taką zmianę i nie martwić się głupimi rzeczami, takimi jak wygląd składni.
Animacja serca na Twitterze w pełnym CSS
Twitter był WSZYSTKICH wiadomości i z wielu dobrych powodów. Jednym z tych powodów było to, że Twitter zdecydował się zamienić przycisk „Ulubione” na ikonę „Kocham”. Jest to odważne, ale konieczne posunięcie, aby stworzyć bardziej zorientowaną na społeczność atmosferę wokół witryny. Ogłoszenie zostało ogłoszone na jednym z oficjalnych kont Twittera, za pośrednictwem animowanego obrazu GIF. Przedstawiał fajną animację „pluska serca” wraz z tekstem. Projektant Nicolas Escoffier był zainteresowany sprawdzeniem, czy byłby w stanie zhakować podobną animację za pomocą samego CSS3 i zgadnij co — udało mu się, a społeczność nie może być bardziej szczęśliwa!
Poważnie, używaj czcionek ikon
SVG czyni internet lepszym miejscem. Mimo że programiści muszą brać pod uwagę fakt, że wielu nadal przegląda sieć z przestarzałych wersji mobilnych systemów operacyjnych, a taki wgląd wymaga od programisty dodatkowej pracy, aby wszystko działało. Inni wciąż uczą się czcionek ikon. Jednak ta funkcja staje się bardzo popularna na nowoczesnych rynkach deweloperskich, na których deweloperzy chcą tworzyć płynne i przyjemne wrażenia z pracy.
Powiększenie produktu CSS — bez JavaScript
W eCommerce powiększanie i powiększanie pozwalają klientom przybliżyć się do produktu i zbadać jego mniej widoczne aspekty. To fajny efekt, ale dla wielu jest to podstawa sukcesu ich biznesu. Michael Weaver jest hakerem CSS3, który wpadł na pomysł stworzenia widżetu powiększającego bez użycia kodu JavaScript. To wyczyn, którego dokonał. Teraz każdy może przeglądać swój kod i tworzyć podobne widżety na swoich stronach.
Naprawdę responsywne tabele przy użyciu CSS3 Flexbox
Tabele pomagają nam dostosować nasze informacje w bardziej przyjazny sposób. Czasami dobrze wystylizowany element stołu nawet nie pojawia się jako jeden. Ale dzięki rozszerzalności jQuery, HTML5 i JavaScript możemy sprawić, by nasze tabele działały bardziej jak dokumenty Excela niż cokolwiek innego. Vasan Subramanian opublikował obszerny samouczek dotyczący korzystania z funkcji Flexbox w CSS3 do tworzenia oszałamiających i responsywnych tabel do następnego projektu witryny lub aplikacji.
Zoptymalizuj dostarczanie CSS
Ostatni samouczek CSS3 będzie dotyczył szybkości i tego, jak lepiej zakodować nasze arkusze stylów, aby przynajmniej zagwarantować pewien wzrost szybkości ponad zwykłe. Optymalizuj dostarczanie CSS to techniczny przewodnik po stylu, który pokazuje, jak pisać natywny kod CSS bez narażania zasobów. Pisanie CSS powinno być zabawne, o czym jest ten samouczek.
Zasoby szkoleniowe dla nowoczesnego CSS3
Bez odpowiednich podstaw uczenie się z samouczków może czasami wydawać się dość zniechęcające. Ma to sens, samouczek może obejmować tylko tyle konkretnego tematu, zanim wyczerpie się go, samouczki są dla tych, którzy zbudowali coś wcześniej i chcą rozszerzyć te projekty o nowe funkcje, ciekawe koncepcje i inne inspirowane możliwościami przez społeczność. Aby pomóc Ci lepiej zrozumieć samouczki CSS3, o których mówiliśmy w poście, wymienimy kilka naprawdę świetnych i bezpłatnych zasobów do nauki CSS3 (także nowoczesnego) online.
Kompletny samouczek CSS3
Ponownie podkreślamy potrzebę zaprezentowania zasobów samouczków, które pomogą Ci dowiedzieć się wszystkiego o CSS. Ten zasób to kompletny samouczek CSS3, który mówi o funkcjach CSS3 i ich zastosowaniach w świecie rzeczywistym. Ten samouczek w pełni omówił selektory, zaawansowane selektory, modele pudełkowe, teksty i czcionki oraz inne funkcje, z mnóstwem przykładów, z którymi możesz zacząć się bawić. Każdy, kto zaczyna programować CSS, będzie mógł szybko zorientować się w swoich postępach z zaledwie kilku prostych projektów.
Samouczek CSS
W3Schools jest kolebką rozwoju front-endu dla początkujących. Ten zasób pomógł milionom programistów w lepszym zrozumieniu niektórych części HTML i CSS. Oferuje również bezpłatne treści edukacyjne, których nie znajdziesz nigdzie indziej. W3Schools to idealne miejsce do nauki CSS dla tych, którzy naprawdę nie mają doświadczenia z Internetem i chcą dość szybko przyspieszyć.
HTML i CSS
Nie możesz uczyć się CSS3 lub HTML5 od podstaw i nie spróbować Codecademy. Nawet sekcja z referencjami jest pełna recenzji, w jaki sposób ludzie byli w stanie znaleźć świetną i dobrze płatną pracę po ukończeniu nauki w Codecademy. Wiele witryn z samouczkami uczy bezpośredniej składni za pomocą przykładów kodu. Z drugiej strony Codecademy „zmusza” cię do zabawy z kodem. Odbywa się to poprzez bezpośrednie i interaktywne zadania przydzielane przez osoby stojące za każdym kursem edukacyjnym. Takie platformy stały się bardzo popularne i są obecnie dostępne dla prawie każdego języka programowania. Bardzo skuteczny sposób na naukę, bez wątpienia.
Naucz się układu CSS
W tym poście dowiedzieliśmy się już wcześniej, że układ jest podstawą CSS3. Ale teraz nadszedł czas, aby wziąć tę koncepcję na przejażdżkę. Spójrzmy na futurystyczny przykład tego, jak działają właściwości układu CSS3 i co możemy z nimi zrobić. Przydziel sobie kilka dni na ukończenie tego samouczka. Następnie będziesz na solidnym średnim poziomie zrozumienia właściwości układu i ich użycia.
CSS – nauka sieci
Mozilla Developer Network pozostaje jednym z wiodących źródeł wszystkich rzeczy związanych z HTML5, CSS3 i JavaScript. Całkowicie kierowany przez społeczność, MDN oferuje przewodniki po stylach dla wszystkich wymienionych języków, w sposób najbardziej odpowiedni dla Twojego tempa nauki, a przede wszystkim ogólnego zrozumienia CSS3.