20 najlepszych samouczków CSS3, aby poprawić swoje umiejętności tworzenia stron internetowych

Kaskadowe 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ę, bycie na bieżąco 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.

Rozpoczęcie pracy z frontendowym tworzeniem stron internetowych i projektowaniem stron internetowych z pewnością stało się łatwiejsze w ostatnich latach. 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 pracować krok po kroku, aby w pełni zastosować to, czego się nauczysz.

Naszym dzisiejszym celem jest omówienie najbardziej znanych i nowoczesnych samouczków CSS3 od wiodących 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ć, najlepiej jest pozwolić sobie na 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ęć własnych upodobań w projektach internetowych, czasami musimy wziąć pod uwagę rzeczy. Czy rozmiar pliku obrazu jest odpowiedni dla naszego projektu? Czy możemy dodawać filtry za pomocą CSS, a nie za pomocą zewnętrznych aplikacji, takich jak Photoshop? Co tak naprawdę możemy zrobić z CSS, aby nasze zdjęcia wyglądały lepiej? Una Kravets zabiera nas w 15 minutową podróż. Opowiada 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 nam 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 jako sposobu na poszerzenie swoich elementów portfolio. W tym samouczku George opowiada nam o procesie upewniania się, że tworzone przez nas siatki będą w równym stopniu reagowały na aplikacje desktopowe i mobilne.

Naucz się układu CSS

Projekty stron internetowych to wszystko o układach. Tworzymy layout, a następnie wykorzystujemy inne dostępne elementy i funkcje, aby go ostylować, na jego podstawie budować. I jest to znany fakt, że wiele układów do projektowania stron internetowych jest całkowicie zależnych od CSS. Nauka CSS pozwala nam dowiedzieć się więcej o układach stron internetowych i ich działaniu. Ale jeśli nie masz jeszcze tej wiedzy, Mikito Takada napisał książkę online, która jest podzielona na 5 różnych rozdziałów na temat tego, jak prawidłowo tworzyć układy za pomocą CSS3. Mówi o pozycjonowaniu, a także o wyrównywaniu różnych elementów pudełka, aby rozpocząć tworzenie elementów siatki, teraz bardziej szczegółowo omawia pozycjonowanie i dostępne funkcje. Ostatnie dwa rozdziały poświęca Flexboxowi (funkcja CSS). Jest tam również opis najlepszych wskazówek i trików stylizacyjnych CSS z jego własnej podróży jako projektanta stron internetowych.

Uwagi dotyczące odświeżania CSS

Notatki i przewodniki po stylu są siłą napędową wielu projektantów stron internetowych. Bardzo ważne jest, abyśmy pamiętali o odłożeniu naszych własnych ulubionych zasobów nutowych, 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 także 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 we wzorcach projektowych CSS3 — te uwagi przydadzą się, nawet jeśli od razu nie czujesz się w ten sposób.

Zmienne: szkielet architektury CSS

Preprocesory naprawdę wystartowały w ostatnich latach, proste frameworki i zestawy narzędzi, które pozwalają projektantom rozszerzać podstawową funkcjonalność CSS3 o takie rzeczy jak domieszki, funkcje i zmienne. Rodzaj funkcji, których zwykle oczekujesz w zakodowanym na sztywno języku programowania, takim jak JavaScript. Prawdopodobnie każdy powinien być biegły w CSS3, aby móc płynnie kodować bez użycia 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 sporządzają raport na temat tego, 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ąć używać go we własnych projektach internetowych.

Wszystko, co wiem o responsywnej typografii internetowej z CSS

Kiedy ludzie myślą o responsywnym projektowaniu stron internetowych, przez większość czasu myślą o przekształceniu standardowej witryny w coś, co będzie dobrze współpracować z urządzeniami mobilnymi. Nie jest to fałszywe zrozumienie, ale z pewnością jest w tym coś więcej. Zell Liew napisał genialny artykuł na temat pracy z responsywną typografią internetową i tego, co pociąga za sobą ustanowienie solidnych podstaw dla wzorców typografii na wszystkich typach urządzeń. Nie trzeba dodawać, że sekcja komentarzy do samouczków również stała się bardzo pomocna. To wszystko dzięki dodatkowemu wkładowi innych projektantów społecznościowych.

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 tak naprawdę 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ę

Jest nieuniknione, że CSS 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 nam, jak 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 tak łatwy.

Wzorce wyświetlania treści

Treść jest wszystkim. Nawet te strony, które nie mają odpowiednich umiejętności prezentacji stron internetowych, a mimo to są w stanie utrzymać wysoką jakość treści, są zazwyczaj tymi, do których ludzie będą najczęściej się odwoływać. Dobrymi tego przykładami są witryny takie jak Reddit i Hacker News — witryny o dużej zawartości treści, bez rzeczywistych ograniczeń w zakresie projektowania witryn. Wzorce wyświetlania treści nie dotyczą wzorców wyświetlania, ale sposobu, w jaki ogólny projekt elementu treści współdziała ze sobą, aby zapewnić przeglądanie, które w pełni integruje się między wyświetlaną treścią a rzeczywistą treścią. Ten samouczek Dana Malla jest jednym z najbardziej zwięzłych przewodników po wzorcach wyświetlania treści, a jego raport z doświadczeń mówi sam za siebie — pracował nad projektami przeprojektowania witryn takich jak TechCrunch, a nawet musimy przyznać, że nowy projekt TechCrunch jest dość elegancki!

Animowanie przyciętych elementów w SVG

Animacje SVG i CSS3 są obecnie jednymi z 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ę, jak naśladować te dokładne animacje przy użyciu rodzimych języków w przeglądarce. Dennis Gaebel Jr przedstawia nam przegląd wykorzystania przycinania CSS w celu uzyskania oszałamiających efektów animacji, a także 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 za pomocą łatwego do zrozumienia kodu. Ogólnie rzecz biorąc, „ekspresyjny” nie jest niczym nowym, a programiści mówili o tym od lat, ale za każdym razem, gdy nowa funkcja jest wypuszczana na wolności, programistom, a zwłaszcza projektantom, zajmuje trochę czasu, aby dostosować się do ich ekspresyjnego przepływu pracy, więc czasami projekty mogą być bałaganiarskie i uwikłane w zbyt wiele funkcji próbujących 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 ich razem 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 zarówno na komputerach stacjonarnych, jak 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, umożliwiając dynamiczną funkcjonalność. Preprocesory robią to już od jakiegoś czasu, a wielu już dostosowało się do idei używania preprocesora na stałe, ale nieuchronnie wszystkie te funkcje (dostępne w standardzie) trafią do nowoczesnych przeglądarek, ponieważ nic nie jest lepsze niż programowanie w natywne środowisko, 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ściach i z wielu dobrych powodów. Jeden z tych powodów skończył się, ponieważ Twitter zdecydował się zamienić przycisk „Ulubione” na ikonę „Miłość”. 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 będzie 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 do dziś muszą liczyć się z faktem, ż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. Czcionki ikon wciąż są uczone przez innych. Ale ta funkcja staje się bardzo popularna na nowoczesnych rynkach deweloperskich, gdzie programiści chcą tworzyć środowiska, które są płynne i przyjemne w pracy.

Powiększenie produktu CSS — bez JavaScript

W eCommerce jest to przybliżenie, ale także powiększenie, które pozwala klientom przybliżyć się do produktu i zbadać jego mniej widoczne dla oka aspekty. To zdecydowanie fajny efekt, ale dla wielu jest to niezbędne do sukcesu ich biznesu. Michael Weaver to haker CSS3, który wpadł na pomysł stworzenia widżetu powiększającego bez użycia kodu JavaScript, co udało mu się z powodzeniem, a teraz każdy może przeglądać jego 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 tabeli 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 na temat korzystania z funkcji Flexbox 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ść trudne. To ma sens, samouczek może obejmować tylko tyle dla 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ści 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 jest kompletnym samouczkiem 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 tworzyć CSS, będzie w stanie 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 dać Codecademy spróbować. Nawet sekcja z referencjami jest pełna recenzji, w jaki sposób ludzie byli w stanie znaleźć świetną i dobrze płatną pracę po zakoń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 przydzielone przez osoby, które stoją za każdym kursem edukacyjnym. Takie platformy stały się bardzo popularne i są teraz dostępne dla prawie każdego języka programowania. Bez wątpienia bardzo skuteczny sposób na naukę.

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 naprawdę 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.