8 Cechy CSS State-the-art (i jak ich używać)

CSS stale ewoluuje, a dodano hosta ekscytujących nowych funkcji, aby uzyskać specyfikację jeszcze bardziej potężną bronią w zestawie narzędzi projektanta Web.

CSS Siatka zajmuje układy do nowych poziomów, których nie widziano wcześniej, niestandardowe właściwości wprowadzają koncepcję zmiennych, podczas gdy zapytań funkcji sprawdzają obsługę przeglądarki. Zapytania multimedialne przesuwa poziom nowych właściwości dostępności, zmienne czcionki oferują maksymalną kreatywność z minimalnym kodem mieści się podczas scroll snapping eliminuje potrzebę JavaScript. Sprawdź nasze fajne Animacja CSS. przykłady, aby zobaczyć, co możesz utworzyć. Lub zbudować witrynę bez prób Budowniczowie stron internetowych. .

Dla tych, którzy chcą zdobyć kreatywność, kształty CSS dla unikalnych układów i hosta trybów mieszania i filtrów, aby wprowadzić efekty projektowe w stylu Photoshop. Przeczytaj, aby dowiedzieć się, w jaki sposób możesz korzystać z tych możliwych funkcji w najnowszych budowach. Ale pamiętaj, że kompleksowa strona internetowa oznacza, że ​​potrzebujesz hosting usługa, która może obsługiwać Twoje potrzeby.

01. Właściwości niestandardowe

Jeśli używasz preprocesora jak Sass, a nawet językiem programowania, takim jak javascript, bez wątpienia znasz koncepcję zmiennych - wartości zdefiniowanych do ponownego użycia w całym kodzie. Niestandardowe właściwości umożliwiają nam to zrobić w naszych CSS, bez potrzeby preprocesorów. Zmienne można ustawić na poziomie głównym (tworzenie zmiennych globalnych) lub zasłoniętych w selektorze. Następnie można je wywołać za pomocą składni var (-> - myvariablename). Na przykład, możemy ustawić zmienną o nazwie --kolor podstawowy lubię to:

 / * na elemencie korzeniowym (globalny
zmienna) * /
: root {
- -PrimaryColor: # F45942;
}
/ * Scoped do selektora * /
.my-komponent {
- -PrimaryColor: # 4171F4;
} 

Teraz możemy użyć tej zmiennej jako wartości właściwości:

 H1 {
Kolor: var (- -RimaryColor);
} 

Właściwości niestandardowe są dziedziczone, które mają bardzo przydatne implikacje. Jeden z nich to ich. Weź powyższy przykład: możemy zdefiniować zmienną globalną (# F45942 - jasny pomarańczowy czerwony) --kolor podstawowy Na poziomie korzenia, więc każda instancja, w której używamy tej zmiennej, wartość będzie czerwona. Ale jesteśmy również przedefiniując taką samą zmienną w selektorze, z inną wartością (# 4171F4 - średnio niebieski). Więc za każdą instancję, gdzie używamy --kolor podstawowy Zmienna w tym selektorze, obliczona wartość będzie niebieska.

Ustawianie domyślnych

Scoping zmiennych jest świetną cechą, ale może cię złapać przy okazji! Jeśli spróbujesz użyć zmiennej, która nie jest jeszcze zdefiniowana, wynikowa wartość spadnie z powrotem do domyślnej przeglądarki lub odziedziczonej wartości, a nie zmiennej zdefiniowanej w górę kaskady. W niektórych przypadkach może być właściwe ustawienie wartości domyślnej:

 H1 {
Kolor: var (---RimaryColor, niebieski);
} 

W jaki sposób właściwości niestandardowe różnią się od zmiennych przedprocesorowych?

Właściwości niestandardowe różnią się od zmiennych przedprocesorowych w kilku kluczowych sposobach. Zmienne przedprocesora są skompilowane przed wysłaniem kodu do przeglądarki. Przeglądarka nigdy nie widzi, że wartość jest zmienną, widzi to tylko wynik końcowy. Właściwości niestandardowe są obliczane w przeglądarce. Możesz je sprawdzić w nowoczesnych narzędziach deweloperskich, zmień zmienną i zobaczyć rozdzieloną wartość. Są zmiennymi dynamicznymi, co oznacza, że ​​ich wartości można zmienić w CSS lub w czasie wykonywania z JavaScript.

W przeciwieństwie do zmiennych preprocesorowych, niestandardowe właściwości nie mogą być używane w nazwach wyboru, klucze właściwości lub deklaracje zapytania multimedialne - tylko wartości właściwości CSS. Preprocesory CSS nadal mają mnóstwo korzyści, więc prawdopodobnie zobaczymy, jak trzymają się przez chwilę dłużej, ale prawdopodobnie będą używane częściej w połączeniu z właściwościami niestandardowymi.

02. Zapytania z funkcji

Zapytania są sposobem na przetestowanie, czy przeglądarka obsługuje określoną kombinację wartości właściwości CSS w pliku CSS. Praktycznie usuwają potrzebę bibliotek wykrywania funkcji, takich jak Moderizr. Składnia jest podobna do zapytania multimedialnego: używasz AT-Reguły @Supports. , po której następuje para wartości właściwości, owijając kod, który ma być wykonywany, jeśli przeglądarka spełnia określone warunki.

Zapytania są dobrze obsługiwane w nowoczesnych przeglądarkach, ale są stosunkowo nowe, a jeden "Gotcha" jest to, że niektóre przeglądarki, które mogą chcieć przetestować, aby wsparcie mogły nie obsługiwać zapytań. Często najlepszym sposobem obsługi tego jest najpierw dostarczenie fallback style (poza zapytaniem funkcji), a następnie zapakuj ulepszenia do podtrzymywania przeglądarek wewnątrz @Supports. reguła.

Bądź świadomy, wymagane są zapytania dotyczące funkcji, są używane tylko oszczędnie. Jedną z wielkich cech CSS jest to, że przeglądarki po prostu zignorują wszelkie właściwości lub wartości, których nie rozumieją. Najlepiej zatrudnić tylko zapytań funkcji, gdy nie radzi sobie z tym, że spowodowałby błąd wizualny, w przeciwnym razie możesz ustawić się na wiele dodatkowych prac.

Jak korzystać z zapytań funkcji

Aby przetestować na wsparcie pojedynczej wartości nieruchomości, możemy najpierw dostarczyć awarię. W tym przykładzie zapewniamy flexbox blackback dla przeglądarek, które nie obsługują układu siatki.

 .my-komponent {
Wyświetlacz: siatka;
}
@Supports (Display: Grid) {
.my-komponent {
Wyświetlacz: Flex;
}
} 

03. Queries Media

Prawdopodobnie będziesz przyzwyczajony do używania zapytań multimedialnych, aby wykryć szerokość i wysokość rzutni, oraz typ nośnika (najczęściej ekranu lub druku). Specyfikacja Queries Media LEVE5 przynosi nam kilka nowszych funkcji mediów do (opcjonalnie) test dla, które są już obsługiwane w niektórych przeglądarkach. Oferują te doskonałe korzyści dla dostępności.

Użytkownicy z zaburzeniami przedsionkowymi, a ci, którzy cierpią na chorobę ruchu, nie doceniają stron internetowych z dużą ilością ruchu, takich jak animacje i efekty przewijania paralaksy. Korzystając z Query Media Media Query możemy dostarczyć użytkownikom, którzy zrezygnują z alternatywy zredukowanej ruchu.

 .my-element {
Animacja: Shake 500ms Ease-out 5;
}
@media (prefero-zmniejszony ruch: Zmniejsz) {
.my-element {
Animacja: Brak;
}
} 

Staje się coraz bardziej popularne dla stron internetowych, aby zapewnić alternatywny motyw. Preferujący schemat umożliwia nam zapytanie, czy użytkownik ustawił preferencję szeroką systemową (przy użyciu słowa kluczowe, ciemne, lekkie lub bez preferencji) i odpowiednio pokazują odpowiedni schemat kolorów.

 / * Pytań multimediów 02 * /
ciało {
tło: gradient liniowy (do
dno, # b5faff, # ffe2b4);
}
@media (Prefer-Color-Scheme: Dark) {
ciało {
kolor biały;
tło: gradient liniowy (do
dno, # 0c1338, # 3E3599);
}
} 

04. Zmienne czcionki

Ogólnie rzecz biorąc, jeśli chcemy włączyć wiele różnych czcionek twarzy tej samej rodziny na naszej stronie, musimy załadować tę samą liczbę plików czcionek. Im więcej obciążonych plików czcionek, tym więcej dodajesz do swojej strony, z wpływem na wydajność - więc zwykle jest mądry, aby załadować maksymalnie trzy lub cztery pliki czcionek (w zależności od budżetu wydajności).

Zmienne czcionki zmienią to wszystko. Umożliwiają nam załadowanie jednego pliku czcionki dla całej rodziny czcionek. Chociaż ten plik będzie zazwyczaj większy niż pojedyncza czcionka, jeśli chcesz skorzystać z różnych ciężarów i stylów, a następnie zmiennej czcionki jest bardziej wydajnym rozwiązaniem. Jeśli kupiłeś całą rodzinę czcionki, pamiętaj, aby zapasować go bezpiecznie magazyn w chmurze Więc nie stracisz plików!

Oś odmiana

Nie tylko to, ale z zmiennymi czcionkami, nie ograniczamy się do małego podzbioru ciężarów czcionek. Podczas pracy z regularnymi czcionkami dostępnymi masami czcionek podano w wielokrotnościach 100. Zazwyczaj 400 może być regularną masą, 300 wagi i 700 śmiałej wagi - z różnymi rodzinami dostarczającymi większą wagę lub mniej. Zmienne czcionki mają osi zmienności, co zapewnia nam szereg wartości dla właściwości, takich jak ciężar czcionki. Czcionka może mieć oś 1-900, co zapewni nam dostęp do 900 różnych ciężarów!

Oś zmienności nie ogranicza się tylko do wagi. Zmienne czcionki mogą mieć różne osie dla x-wysokości, nachylenie, długości serifu i kontrast (aby wybrać zaledwie kilka przykładów) - co oznacza, że ​​pojedynczy plik czcionki może dać nam dostęp do setek, a nawet tysięcy odmian! Moglibyśmy nawet animować te właściwości, umożliwiając nam osiągnięcie naprawdę fajnych efektów. Mandy Michael ( https://codepen.io/mandymichael. ) ma cały ładunek kreatywnych demonstracji, które naprawdę przetestuje limity.

Obsługa przeglądarki dla zmiennych czcionek jest całkiem dobra, a wiele odlewników czcionek aktywnie rozwija nowe czcionki zmienne, które możesz zacząć korzystać teraz - chociaż często są one często przychodzą na premię, zwłaszcza dla bardziej w pełni wyposażonych rodzin czcionek. Jeśli chcesz po prostu zacząć grać z zmiennymi czcionkami, aby zobaczyć, co mogą zrobić, istnieje wiele witryn placów zabaw dla czcionek:

Bądź świadomy, jeśli chcesz użyć zmiennych czcionek, musisz teraz upewnić się, że używasz aktualnego systemu operacyjnego - nie będą działać na starszym OSS.

Ustawienia zmienności czcionek

Podczas gdy możemy łatwo zmienić masę czcionki za pomocą grubość czcionki Nieruchomość CSS, Ustawienia zmienności czcionek to nowa nieruchomość, która daje nam pełny dostęp do różnych osi odmiany czcionki. Obejmują one zarówno zarejestrowane osie, jak i osie niestandardowe.

Zarejestrowane osie

Istnieje pięć różnych zarejestrowanych osi, które odpowiadają różnym właściwościami CSS. Każdy z nich ma to, co jest znane jako "znacznik osi". Zarejestrowane osi to: Wht. (grubość czcionki), Wdth. (czcionka), slnt. (styl czcionki: ukośne / kąt), Ital. (W stylu czcionki: kursywa), opsze (czcionka-optyczna wielkość). Możemy uzyskać dostęp do tych osi przez właściwość CSS lub z Ustawienia zmienności czcionek .

Te osie niekoniecznie są uwzględnione w każdej czcionki zmiennej (niektóre mogą mieć tylko jedną lub dwie osi), ale prawdopodobnie będą najbardziej powszechne.

Custom Axes.

Osieki niestandardowe są osiami na zamówienie zawarte przez projektanta czcionki i może być cokolwiek w ogóle. Mogą one obejmować (na przykład) długość serifu, x-wysokość, nawet coś bardziej kreatywnego (i mniej typowa typowo-typowa), jak rotacja.

Oba typy osi muszą być wyrażone jako czterokolorowy znacznik. Zarejestrowane osie muszą być małymi literami, podczas gdy osie niestandardowe są wielkie. Oba mogą być łączone w nieruchomości Ustawienia odmiany czcionki. Ustawienia zmienności czcionek jest animowane, co może pozwolić na niektóre bardzo fajne efekty UI! Niektóre bardzo interesujące eksperymenty zostały wyprodukowane za pomocą czcionek ikony.

05. Efekty graficzne.

Jeśli jesteś zaznajomiony z narzędziami projektowymi, takimi jak Photoshop i Illustrator, możesz być świadomy trybów mieszania i sposobu ich użycia do wytwarzania różnych efektów na obrazy. Sposób pracy trybów mieszania jest łączenie dwóch lub więcej warstw razem za pomocą formuł matematycznych, aby obliczyć wynikową wartość dla każdego piksela. Warstwy mogą być wszystkim - obrazami, gradientami lub płaskimi kolorami. Niektóre tryby mieszania wytwarzają wynik przyciemniony (np. Mnożyć, co pomnoje wartości pikseli warstw), niektóre lżejsze (np. Ekran i nakładka). Nie musimy jednak rozumieć matematyki, aby jednak ich używać. Gra wokół różnych trybów mieszania może dać nam dobry wygląd, dla którego z nich wytwarza pożądane wyniki w połączeniu z różnymi warstwami.

Z właściwościami CSS Tryb mieszania i Tryb mieszania w tle , możemy osiągnąć efekty obrazu podobnego do Photoshopa w przeglądarce. Oba nieruchomości przyjmują te same wartości, ale działają nieco inaczej.

Tryb mieszania w tle

Tryb mieszania w tle łączy się razem warstwy tła elementu, do którego kierujemy się. Nasz element może mieć obrazy tła, kolory i gradienty, a wszystkie będą mieszane ze sobą bez wpływu na zawartość pierwszego planu. Możemy określić wiele wartości dla Tryb mieszania w tle , jeden dla każdej warstwy tła.

 .my-element {
Tło: URL (#Mji),
Liniowy gradient (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Rozmiar tła: okładka;
TRYB TRYB TRYBU: Ekran,
zwielokrotniać;
} 

Tryb mieszania

Tryb mieszania Wpływa na to, jak element mieszanki z rodzicem i rodzeństwem, w tym każdemu treści pierwszego planu i tła oraz pseudo-elementy. Niektóre ciekawe efekty kreatywne można osiągnąć przez mieszanie nałożonych pseudo-elementów (:: przed i :: po).

 .my-element {
Tło: RGB (244, 65, 106);
Tryb miks-melunkcyjny: pomnóż;
} 

Filtry CSS.

Filtry CSS mogą być również używane do tworzenia uderzających efektów wizualnych, używając filtr Wartości funkcji właściwości i filtra. W przeciwieństwie do trybów mieszanki stosują efekt graficzny bezpośrednio do elementu, które są kierowane, a element może mieć zastosowane wiele filtrów.

Konwertuj na skale szarości.

Możemy manipulować kolory elementu z większym stopniem kontroli niż poleganie na trybach mieszania. Filtry mogą konwertować obraz do skali szarości, dostosować jasność, kontrast i nasycenie, rozmycie elementu lub dodaj cień kropli. Mogą być również animowane i świetnie wyglądają z efektami wlewów.

Filtry SVG.

Filtry CSS są w rzeczywistości uproszczone wersje filtrów SVG. CSS. filtr Nieruchomość zajmuje również URL () Funkcja, umożliwiając nam przejść do adresu URL do filtra SVG. Filtry SVG są niezwykle wydajne i pozwalają na niektóre niesamowite efekty obrazu - ale są również znacznie bardziej skomplikowane niż funkcje filtrów CSS! Sara Soueidan ma wspaniałą serię artykułów na Codrops, jeśli jesteś zainteresowany nurkowaniem do kodowania własnych niestandardowych filtrów SVG. Sprawdź artykuł na https://tympanus.net/codrops/2019/01/15/svg-filters-101/

Przycinanie i maskowanie: poza prostokąty

Jesteśmy przyzwyczajeni do radzenia sobie w pudełkach w sieci, ale nie wszystko musi być prostokątne! Clipping i maskowanie są dwiema stronami tej samej monety i są różne sposoby, aby ukryć i pokazać różne części elementu, dzięki czemu tło pojawi się. Daje nam to moc wprowadzania interesujących i kreatywnych kształtów do naszych projektów.

Klip-ścieżka

The. klip-ścieżka () Właściwość pozwala nam "wyciąć" element, definiując ścieżkę. Potrzeba wielu podstawowych funkcji kształtów, Inset (), Circle (), Ellipse () lub Wielokąt () , co pozwala nam narastać bardziej złożone kształty wycinanki za pomocą par xy współrzędnych, aby zdefiniować ścieżkę. Alternatywnie możemy również przejść na ścieżce SVG za pomocą ścieżka() funkcja lub użycie URL () Aby zapewnić identyfikator ścieżki SVG.

Nie wewnątrz ścieżki

Wycinanie elementów klipsów wszystko poza ścieżką, którą definiujesz, ale sam element jest nadal prostokątem. Jeśli masz zawartość, która rozciąga się z granicy ścieżki klipsów, którą również zostanie obcięty - nie będzie owij się w kształcie.

Maska

maska Umożliwia nam pokazanie i ukrywanie części obrazu za pomocą obrazu (SVG lub przezroczystego PNG) lub gradientu jako maska. w odróżnieniu klip-ścieżka , Możemy dodać teksturę do naszych obrazów z maskowaniem, ponieważ źródło maski nie musi być ścieżką - pozwala na stopnie przejrzystości.

06. Kształty CSS.

Specyfikacja kształtów CSS pozwala nam owinąć tekst wokół pływających kształtów geometrycznych, tworząc kilka interesujących, podobnych do magazynów układów. Jest to możliwe przy użyciu kształt na zewnątrz własność. Podobny do klip-ścieżka , możemy nadać tej nieruchomości podstawową funkcję kształtu Koło (), Elipsa (), Inset (), Wielokąt () lub adres URL na ścieżkę SVG, aw rzeczywistości dwie prace w harmonii bardzo dobrze! kształt na zewnątrz Zostanie skutecznie owinąć nasze tekst, ale nie wpłynie na floated element. Jeśli chcemy, aby tekst wyglądał jak owij się wokół obrazu lub obiektu pływającego, możemy użyć tej samej wartości dla klip-ścieżka . Posługiwać się margines kształtu Aby dodać białe znaki między ścieżką kształtu a treścią owijającą ją. Spójrz na Rzeczy i wzmacniacz; Nonsens Strona, aby zobaczyć, jak kształty CSS służy do owinięcia tekstu wokół centralnego obrazu.

Firefox ma A. Edytor ścieżki kształtu W panelu Dev Narzędzia, które jest szczególnie przydatne do pracy z złożonymi kształtami. Jednak użyj ostrożnie. Zawijanie wiodącej krawędzi akapitu tekstu jest idealne dla efektu artystycznego, ale nie zawsze jest świetny dla doświadczenia użytkownika. Złożone postrzępione kształty mogą przeczytać bloki tekstu. W przypadku ważnych treści możesz chcieć sterować przezroczystość.

07. Scroll Swill.

Wiele stron internetowych wykorzystują biblioteki JavaScript, aby zapewnić śliską, rodzime doświadczenie przewijania podobne do aplikacji, gdzie treści "zatrzaski" do wskazówek jako przewijania użytkowników. Teraz, dzięki specyfikacji zatrzaskowej, możemy zrobić to prawo w naszym pliku CSS - nie ma potrzeby importowania w ciężkich modułach JS, aby mieścić Twoją stronę!

Aby wdrożyć SCROLL, potrzebujemy elementu, aby działać jako nasz kontener przewijania. Bezpośrednie dzieci z kontenera dyktują punkty, które zostaną wciśnięte, i mogą być wyrównane na różne sposoby w obszarze przystawki.

Przyciąganie przewijania może być jeszcze bardziej skuteczne w połączeniu z innym nowym wartością właściwości CSS - Pozycja: lepki . Ta wartość pozycji "kij" element do określonej pozycji podczas przewijania w jego pojemniku - kolejne zachowanie, które było wcześniej możliwe tylko z JavaScript. Sprawdź ten scroll Snap z pozycją: Kleisty i Przykład międzycinek .

08. CSS Grid i układy

Deweloperzy frontowe zhakowali układ z dowolnymi narzędziami, które były dostępne w tym czasie - ostatnio flexbox, który wiele nowoczesnych systemów sieciowych. Ale Flexbox nigdy nie był przeznaczony do budowy ścisłych siatek - jego celem jest elastyczność!

CSS Grid jest pierwszą specyfikacją, która jest zaprojektowana do układu dwuwymiarowego, umożliwiając nam pełną kontrolę nad budowaniem układu i umieszczanie elementów zarówno w rzędzie, jak i osi kolumnowej. Budowanie reagującego układu z siatką nie wymaga Calc () ani hakowania wokół negatywnych marginesów. Tajną bronią jest ks. Jednostka - nowa jednostka wyłączna do siatki. Rozmiary ks. Rozmiary siatki (wiersze i kolumny) jako proporcja dostępnej przestrzeni. Bierze pod uwagę wszelkie stałe ścieżki, rynny i zawartość, a następnie odpowiednio dystrybuuje pozostałą przestrzeń. Jen Simmons ułożył termin "wewnętrzna konstrukcja stron internetowych", aby opisać nową erę układu internetowego, w którym siatki.

Jak używać siatki CSS

Siatka wymaga elementu z wyświetlanym wartością właściwości ustawioną na siatkę, aby działać jako kontener siatki. Bezpośrednie dzieci zbiornika siatki są elementy, które można umieścić na siatce. Używamy właściwości szablon siatki i kolumny szablonów siatki zdefiniować utwory (wiersze i kolumny) siatki i kolumna-luka i szczelina rządowa zdefiniować rynny (luki między utworami).

 .Grid {
Wyświetlacz: siatka;
kolumny szablonów siatki: powtórz (4, 1fr);
Grid-Template-rzędy: Powtórz (4, 200px);
Gap: 20px;
} 

Używamy powtarzać() Funkcja utrzymania kodu bardziej zwięzła, jako alternatywa dla Longhand (np. kolumny szablonów siatki: 1fr 1fr 1fr 1fr ). Ten przykład używa również shorthand luka dla szczelina rządowa i kolumna-luka .

Powyższy kod daje nam cztery ścieżki rzędowe, każda wysoka i cztery ścieżki kolumnowe, które każdy wypełnia równą proporcję dostępnej przestrzeni, przy użyciu jednostki FR.

Warto zauważyć, że to nie jedyny sposób na tworzenie utworów siatki. Ukryte ścieżki można również utworzyć, umieszczając elementy siatki. Przydatne jest czytanie trochę o tym, jeśli używasz siatki, ponieważ płaci, aby uzyskać głębsze zrozumienie, jak siatka zachowuje się w różnych warunkach, i może ułatwić kodowanie układu.

Możemy umieścić przedmioty na siatce, odwołując się do numerów linii siatki, które są liniami numerycznymi, które siedzą między każdą ścieżką. Tutaj używamy skrótu kolumna siatki i siatka dla Grid-Column-Start , koniec kolumny , uruchamianie siatki i rzędy siatki . Opowiedzą przeglądarkę, w której linii nasza pozycja powinna rozpocząć się i kończyć na każdej osi.

 .Tem {
kolumna siatki: 1/4;
Grid-Row: 2;
} 

Grid zapewnia nam wiele różnych sposobów umieszczenia przedmiotów: możemy zamiast tego nazwać nasze linie siatki:

 .Grid {
Wyświetlacz: siatka;
Grid-szablon-kolumny: [Image-Start] 1fr
 1fr 1fr [Image-Start] 1fr;
Grid-Template-rzędy: 200px [Image-Start]
 200px 200px [Image-End] 200px;
Gap: 20px;
} 

Alternatywnie, The.. Szablon siatki Nieruchomość pozwala nam "narysować" układ siatki z tekstem.

 .Grid {
Wyświetlacz: siatka;
kolumny szablonów siatki: powtórz (4, 1fr);
Grid-Template-rzędy: Powtórz (4, 200px);
Gap: 20px;
Obszary szablonów siatki:
". . . . '
"Obraz obrazu obrazu."
"Obraz obrazu obrazu."
". . . . ';
} 

Korzystając z jednej z tych metod, możemy po prostu odwołać się do odpowiedniego obszaru siatki podczas umieszczania elementu siatki:

. Obraz {
obszar siatki: obraz;
} 

Ten artykuł został pierwotnie opublikowany w magazynie kreatywnego projektowania stron internetowych Projektant stron internetowych . Kup teraz 290.

• 10 najlepszych ram CSS w 2019 roku
• Jak dodać animację do SVG z CSS
• 52 narzędzia do projektowania stron internetowych, aby pomóc Ci pracować mądrzej w 2019 roku