W poprzednim artykule przyjrzałem się zdolności CSS Grid do tworzyć złożone układy, korzystając z możliwości automatycznego umieszczania. Poszedłem o krok dalej w innym artykule, który dodano efekt powiększenia najechania na obrazy w układzie siatki. Tym razem chcę zagłębić się w inny rodzaj siatki, który działa z kształtami.
Na przykład, co jeśli obrazy nie są idealnie kwadratowe, ale mają kształt sześciokątów lub rombów? Uwaga, spoiler: możemy to zrobić. W rzeczywistości zamierzamy połączyć techniki CSS Grid, które omówiliśmy, i wrzucić trochę CSS clip-path i mask magia do tworzenia fantazyjnych siatek obrazów o dowolnym kształcie, jaki możesz sobie wyobrazić!
Zacznijmy od jakiegoś znacznika
Większość układów, którym się przyjrzymy, może na pierwszy rzut oka wydawać się łatwe do osiągnięcia, ale wyzwaniem jest ich osiągnięcie za pomocą ten sam znacznik HTML. Możemy użyć wielu owijek, divs i tak dalej, ale celem tego posta jest użycie tej samej i najmniejszej ilości kodu HTML, a mimo to otrzymanie wszystkich różnych siatek, które chcemy. W końcu czym jest CSS, jeśli nie sposobem na oddzielenie stylizacji od znaczników? Nasza stylizacja nie powinna zależeć od znaczników i na odwrót.
To powiedziawszy, zacznijmy od tego:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Kontener z obrazami to wszystko, czego tutaj potrzebujemy. Nic więcej!
Siatka CSS sześciokątów
Jest to również czasami określane jako siatka „plaster miodu”.
Istnieje już wiele innych postów na blogu, które pokazują, jak to zrobić. Cholera, ja napisał jeden tutaj na CSS-Tricks! Ten artykuł jest nadal dobry i zagłębia się w tworzenie responsywnego układu. Ale w tym konkretnym przypadku będziemy polegać na znacznie prostszym podejściu CSS.
Najpierw użyjmy clip-path na obrazach, aby utworzyć kształt sześciokąta i umieszczamy je wszystkie w tym samym obszarze siatki, aby nakładały się na siebie.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Jeszcze nic nadzwyczajnego. Wszystkie obrazy są sześciokątami i znajdują się nad sobą. Wygląda więc na to, że wszystko, co mamy, to pojedynczy element obrazu w kształcie sześciokąta, ale tak naprawdę jest ich siedem.
Następnym krokiem jest zastosowanie tłumaczenia do obrazów, aby poprawnie umieścić je na siatce.
Zauważ, że nadal chcemy, aby jeden z obrazów pozostał na środku. Reszta jest umieszczona wokół niego za pomocą CSS translate i dobra, staromodna geometria. Oto próbne formuły, które wymyśliłem dla każdego obrazu w siatce:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Kilka obliczeń i optymalizacji później (pomińmy tę nudną część, prawda?) otrzymujemy następujący CSS:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Może będzie łatwiej, gdy dostaniemy prawdziwe funkcje trygonometryczne w CSS!
Każdy obraz jest tłumaczony przez --_x i --_y zmienne oparte na tych formułach. Tylko drugi obraz (nth-child(2)) jest niezdefiniowane w żadnym selektorze, ponieważ jest to ten w środku. Może to być dowolny obraz, jeśli zdecydujesz się użyć innej kolejności. Oto kolejność, której używam:
Za pomocą zaledwie kilku linijek kodu otrzymujemy fajną siatkę obrazów. Do tego dodałem mały efekt najechania na obrazy, aby rzeczy były bardziej wyszukane.
Zgadnij co? Możemy uzyskać kolejną siatkę sześciokątną, po prostu aktualizując kilka wartości.
Jeśli sprawdzisz kod i porównasz go z poprzednim, zauważysz, że po prostu zamieniłem wartości wewnątrz clip-path i przełączyłem się między --x i --y. To wszystko!
Siatka CSS rombów
Romb to takie wymyślne słowo określające kwadrat obrócony o 45 stopni.
Ten sam kod HTML, pamiętasz? Najpierw zaczynamy od zdefiniowania siatki obrazów 2×2 w CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Pierwszą rzeczą, która może przykuć twoją uwagę, jest grid własność. Jest dość rzadko używany, ale jest bardzo pomocny, ponieważ jest skrótem, który pozwala zdefiniować pełną siatkę w jednej deklaracji. Nie jest to najbardziej intuicyjna — i nie wspominając o czytelnej — właściwość, ale jesteśmy tutaj, aby uczyć się i odkryj nowe rzeczy, więc użyjmy go zamiast wypisywać wszystkie indywidualne właściwości siatki.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Definiuje to dwie kolumny równe --s zmienna i ustawia wysokość wszystkich wierszy na --s również. Ponieważ mamy cztery obrazy, automatycznie otrzymamy siatkę 2×2.
Oto inny sposób, w jaki moglibyśmy to napisać:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…które można zmniejszyć za pomocą grid stenografia:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Po ustawieniu siatki obracamy ją i obrazki za pomocą CSS transforms i otrzymujemy to:
Zwróć uwagę, jak obracam je obie o 45deg, ale w przeciwnym kierunku.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Obracanie obrazów w kierunku ujemnym zapobiega ich obracaniu wraz z siatką, dzięki czemu pozostają proste. Teraz stosujemy clip-path aby wyciąć z nich romb.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Prawie skończyliśmy! Musimy skorygować rozmiar obrazu, aby dopasować je do siebie. W przeciwnym razie są oddalone od siebie tak, że nie wyglądają jak siatka obrazów.
Obraz znajduje się w granicach zielonego okręgu, który jest wpisanym okręgiem obszaru siatki, w którym umieszczony jest obraz. Chcemy powiększyć obraz, aby zmieścił się w czerwonym okręgu, który jest ograniczonym okręgiem obszaru siatki.
Nie martw się, nie wprowadzę już nudnej geometrii. Wszystko, co musisz wiedzieć, to to, że związek między promieniem każdego okręgu jest pierwiastkiem kwadratowym z 2 (sqrt(2)). Jest to wartość, której potrzebujemy, aby zwiększyć rozmiar naszych obrazów, aby wypełnić obszar. Użyjemy 100%*sqrt(2) = 141% i gotowe!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}Podobnie jak w przypadku siatki sześciokątnej, możemy sprawić, że rzeczy będą bardziej wyrafinowane dzięki temu ładnemu efektowi powiększenia najechania:
Siatka CSS o trójkątnych kształtach
Prawdopodobnie już wiesz, że najważniejszą sztuczką jest odgadnięcie clip-path aby uzyskać pożądane kształty. W przypadku tej siatki każdy element ma swój własny clip-path wartość, podczas gdy dwie ostatnie siatki działały ze spójnym kształtem. Tym razem to tak, jakbyśmy pracowali z kilkoma różnymi trójkątnymi kształtami, które łączą się, tworząc prostokątną siatkę obrazów.
Umieszczamy je w siatce 3×2 z następującym CSS:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Oto, co otrzymujemy:
Ostatnim akcentem jest wyrównanie szerokości środkowej kolumny 0 aby pozbyć się przestrzeni między obrazami. Ten sam problem z odstępami, jaki mieliśmy z siatką rombu, ale z innym podejściem do kształtów, których używamy:
grid-template-columns: auto 0 auto;Musiałem bawić się clip-path wartości, aby upewnić się, że wszystkie wydają się pasować do siebie jak puzzle. Oryginalne obrazy nakładają się, gdy środkowa kolumna ma zerową szerokość, ale po pocięciu obrazów iluzja jest idealna:
Siatka CSS do pizzy
Zgadnij co? Możemy uzyskać kolejną fajną siatkę, po prostu dodając border-radius i overflow do naszej siatki lub trójkątnych kształtów.
Siatka CSS puzzli
Tym razem pobawimy się CSS mask właściwość, aby obrazy wyglądały jak kawałki układanki.
Jeśli nie korzystałeś mask w Gradienty CSS, Gorąco polecam ten inny artykuł Napisałem na ten temat, bo to pomoże w tym, co będzie dalej. Dlaczego gradienty? Ponieważ tego właśnie używamy, aby uzyskać okrągłe nacięcia w kształtach puzzli.
Konfiguracja siatki powinna być teraz prosta, więc zamiast tego skupmy się na mask część.
Jak pokazano w powyższym demo, do stworzenia ostatecznego kształtu potrzebujemy dwóch gradientów. Jeden gradient tworzy okrąg (zielona część), a drugi tworzy odpowiednią krzywą podczas wypełniania górnej części.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Dwie zmienne kontrolują kształt. The --g zmienna to nic innego jak przerwa w siatce. Musimy wziąć pod uwagę lukę, aby prawidłowo umieścić nasze kółka, aby idealnie się pokrywały, gdy cała układanka jest złożona. The --r zmienna kontroluje wielkość okrągłych części kształtu puzzli.
Teraz bierzemy ten sam CSS i aktualizujemy w nim kilka wartości, aby utworzyć trzy inne kształty:
Mamy kształty, ale nie nakładające się krawędzie, których potrzebujemy, aby pasowały do siebie. Każdy obraz jest ograniczony do komórki siatki, w której się znajduje, więc ma sens, dlaczego kształty są w tej chwili pomieszane:
Musimy stworzyć przelew, zwiększając wysokość/szerokość obrazów. Z powyższego rysunku musimy zwiększyć wysokość pierwszego i czwartego obrazu, a szerokość drugiego i trzeciego. Prawdopodobnie już zgadłeś, że musimy je zwiększyć za pomocą --r zmienna.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Jesteśmy coraz bliżej!
Stworzyliśmy nakładanie się, ale domyślnie nasze obrazy nakładają się po prawej stronie (jeśli zwiększymy szerokość) lub na dole (jeśli zwiększymy wysokość). Ale nie tego chcemy w przypadku drugiego i czwartego obrazu. Rozwiązaniem jest użycie place-self: end na tych dwóch obrazach i nasz pełny kod wygląda tak:
Oto kolejny przykład, w którym używam gradientu stożkowego zamiast gradientu promieniowego. Daje nam to trójkątne elementy układanki, zachowując ten sam kod HTML i CSS.
Ostatni! Tym razem używam clip-path a ponieważ jest to właściwość, którą możemy animować, uzyskujemy fajny efekt myszy, po prostu aktualizując właściwość niestandardową, która kontroluje kształt.
Zamykając
To wszystko w tej pierwszej części! Łącząc to, czego już nauczyliśmy się o CSS Grid, z kilkoma dodanymi clip-path i mask magii, udało nam się stworzyć układy siatki zawierające różne rodzaje kształtów. I za każdym razem używaliśmy tych samych znaczników HTML! A sam znacznik to nic innego jak pojemnik z garścią elementów graficznych!
W drugiej części zamierzamy zbadać bardziej złożone siatki z bardziej fantazyjnymi kształtami i efektami najechania.
Mam zamiar wziąć udział w demonstracji rozszerzających się paneli graficznych, które wspólnie stworzyliśmy w ten inny artykuł:
…i przekształć go w zygzakowate panele graficzne! A to tylko jeden przykład spośród wielu, które odkryjemy w następnym artykule.
