W porządku, więc kiedy ostatnio się zameldowaliśmy, używaliśmy CSS Grid i łączyliśmy je z CSS clip-path i mask techniki tworzenia siatek o fantazyjnych kształtach.
Oto tylko jedna z fantastycznych siatek, które wspólnie stworzyliśmy:
Gotowy do drugiej rundy? Nadal pracujemy z CSS Grid, clip-path, mask, ale pod koniec tego artykułu przedstawimy różne sposoby rozmieszczania obrazów na siatce, w tym kilka efektów najechania kursorem, które zapewniają autentyczne, interaktywne wrażenia podczas oglądania obrazów.
I zgadnij co? Używamy te same znaczniki, których użyliśmy ostatnio. Oto znowu:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Podobnie jak w poprzednim artykule, potrzebujemy tylko kontenera z obrazami w środku. Nic więcej!
Zagnieżdżona siatka obrazu
Ostatnim razem nasze siatki były, cóż, typowymi siatkami obrazów. Poza schludnymi kształtami, którymi je zamaskowaliśmy, były to dość standardowe symetryczne siatki, jeśli chodzi o to, jak umieściliśmy obrazy w środku.
Spróbujmy zagnieździć obrazek na środku siatki:
Zaczynamy od ustawienia siatki 2✕2 dla czterech obrazów:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
}Jeszcze nic skomplikowanego. Następnym krokiem jest wycięcie rogu naszych obrazów, aby stworzyć miejsce na zagnieżdżony obraz. Mam już szczegółowy artykuł na temat jak ciąć rogi za pomocą clip-path i mask. Możesz również użyć my generator online aby uzyskać CSS do maskowania narożników.
Potrzebujemy tutaj wyciąć rogi pod kątem równym 90deg. Możemy użyć tego samego technika stożkowo-gradientowa z tego artykułu, aby to zrobić:
.gallery > img {
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) { --_a: 90deg; }
.gallery > img:nth-child(2) { --_a: 180deg; }
.gallery > img:nth-child(3) { --_a: 0deg; }
.gallery > img:nth-child(4) { --_a:-90deg; }Moglibyśmy użyć clip-path metoda wycinania narożników z tego samego artykułu, ale maskowanie gradientami jest tutaj bardziej odpowiednie, ponieważ mamy taką samą konfigurację dla wszystkich obrazów — wystarczy nam obrót (zdefiniowany zmienną --_a) uzyskujemy efekt, więc maskujemy od wewnątrz, a nie od zewnętrznych krawędzi.
Teraz możemy umieścić zagnieżdżony obraz w zamaskowanej przestrzeni. Najpierw upewnijmy się, że mamy piąty element obrazu w kodzie HTML:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
</div>Będziemy polegać na starym dobrym pozycjonowaniu absolutnym, aby je tam umieścić:
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Połączenia inset właściwość pozwala nam na umieszczenie obrazu w centrum za pomocą jednej deklaracji. Znamy rozmiar obrazu (zdefiniowany zmienną --s) i wiemy, że rozmiar kontenera wynosi 100%. Robimy trochę matematyki, a odległość od każdej krawędzi powinna być równa (100% - var(--s))/2.
Możesz się zastanawiać, dlaczego używamy clip-path w ogóle tutaj. Używamy go z zagnieżdżonym obrazem, aby uzyskać spójną lukę. Gdybyśmy go usunęli, zauważylibyście, że nie mamy takiej samej przerwy między wszystkimi obrazami. W ten sposób wycinamy trochę z piątego obrazu, aby uzyskać odpowiednie odstępy wokół niego.
Ponownie kompletny kod:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gap between images */
display: grid;
gap: var(--g);
grid-template-columns: repeat(2, auto);
position: relative;
}
.gallery > img {
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
mask: conic-gradient(from var(--_a), #0000 90deg, #000 0);
}
.gallery > img:nth-child(1) {--_a: 90deg}
.gallery > img:nth-child(2) {--_a:180deg}
.gallery > img:nth-child(3) {--_a: 0deg}
.gallery > img:nth-child(4) {--_a:-90deg}
.gallery > img:nth-child(5) {
position: absolute;
inset: calc(50% - .5*var(--s));
clip-path: inset(calc(var(--g) / 4));
}Teraz wielu z was może się również zastanawiać: po co te wszystkie skomplikowane rzeczy, skoro możemy umieścić ostatni obraz na górze i dodać do niego ramkę? To ukryłoby obrazy pod zagnieżdżonym obrazem bez maski, prawda?
To prawda, a otrzymamy:
Nie maskNie clip-path. Tak, kod jest łatwy do zrozumienia, ale ma małą wadę: kolor obramowania musi być taki sam jak głównego tła, aby iluzja była idealna. Ta mała wada wystarczy mi, aby uczynić kod bardziej złożonym w zamian za rzeczywistą przezroczystość niezależną od tła. Nie mówię, że podejście do granicy jest złe lub złe. Poleciłbym to w większości przypadków, gdy tło jest znane. Ale jesteśmy tutaj, aby odkrywać nowe rzeczy i, co najważniejsze, budować komponenty, które nie zależą od ich środowiska.
Wypróbujmy tym razem inny kształt:
Tym razem utworzyliśmy zagnieżdżony obraz jako okrąg zamiast kwadratu. To łatwe zadanie z border-radius Ale musimy użyć okrągłe wycięcie dla pozostałych obrazów. Tym razem jednak będziemy polegać na radial-gradient() zamiast a conic-gradient() aby uzyskać ten ładny, zaokrąglony wygląd.
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2), #000 calc(51% + var(--g)/2));
}
.gallery > img:nth-child(1) { --_a: calc(100% + var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(2) { --_a: calc(0% - var(--g)/2) calc(100% + var(--g)/2); }
.gallery > img:nth-child(3) { --_a: calc(100% + var(--g)/2) calc(0% - var(--g)/2); }
.gallery > img:nth-child(4) { --_a: calc(0% - var(--g)/2) calc(0% - var(--g)/2); }Wszystkie obrazy używają tej samej konfiguracji, co w poprzednim przykładzie, ale za każdym razem aktualizujemy punkt środkowy.
Powyższy rysunek przedstawia punkt środkowy każdego okręgu. Mimo to w rzeczywistym kodzie zauważysz, że uwzględniam również lukę, aby zapewnić, że wszystkie punkty znajdują się w tej samej pozycji (środek siatki), aby uzyskać ciągły okrąg, jeśli je połączymy.
Teraz, gdy mamy nasz układ, porozmawiajmy o efekcie najechania. Jeśli nie zauważyłeś, fajny efekt najechania zwiększa rozmiar zagnieżdżonego obrazu i odpowiednio dostosowuje wszystko inne. Zwiększenie rozmiaru jest stosunkowo łatwym zadaniem, ale aktualizacja gradientu jest bardziej skomplikowana, ponieważ domyślnie gradientów nie można animować. Aby to przezwyciężyć, użyję font-size hack, aby móc animować gradient radialny.
Jeśli sprawdzisz kod gradientu, zobaczysz, że dodaję 1em:
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));Wiadomo, że em jednostki są względne w stosunku do elementu rodzica font-size, więc zmieniając font-size ukończenia .gallery zmieni również obliczoną em value — to sztuczka, której używamy. Animujemy font-size od wartości 0 do określonej wartości, w wyniku czego gradient jest animowany, dzięki czemu wycinana część jest większa, zgodnie z rozmiarem zagnieżdżonego obrazu, który staje się coraz większy.
Oto kod, który wyróżnia części zaangażowane w efekt najechania:
.gallery {
--s: 200px; /* controls the image size */
--g: 10px; /* controls the gaps between images */
font-size: 0; /* initially we have 1em = 0 */
transition: .5s;
}
/* we increase the cut-out by 1em */
.gallery > img {
mask:
radial-gradient(farthest-side at var(--_a),
#0000 calc(50% + var(--g)/2 + 1em), #000 calc(51% + var(--g)/2 + 1em));
}
/* we increase the size by 2em */
.gallery > img:nth-child(5) {
width: calc(var(--s) + 2em);
}
/* on hover 1em = S/5 */
.gallery:hover {
font-size: calc(var(--s) / 5);
}Połączenia font-size trik jest pomocny, jeśli chcemy animować gradienty lub inne właściwości, których nie można animować. Własności niestandardowe zdefiniowane za pomocą @property mogą rozwiązać taki problem, ale wsparcie dla tego wciąż brakuje w momencie pisania.
Odkryłem font-size sztuczka z ! podczas próby rozwiązania wyzwanie na Twitterze.
Inny kształt? Chodźmy!
Tym razem przycięliśmy zagnieżdżony obraz do kształtu rombu. Pozwolę ci przeanalizować kod jako ćwiczenie, aby dowiedzieć się, jak się tu dostaliśmy. Zauważysz, że struktura jest taka sama jak w naszych przykładach. Jedyne różnice to sposób, w jaki używamy gradientu do tworzenia kształtu. Kop i ucz się!
Okrągła siatka obrazu
Możemy połączyć to, czego nauczyliśmy się tutaj i w poprzednich artykułach, aby stworzyć jeszcze bardziej ekscytującą siatkę obrazów. Tym razem ustawmy wszystkie obrazy w naszej siatce jako okrągłe i po najechaniu kursorem rozwińmy obraz, aby odsłonić całą rzecz, która obejmuje resztę zdjęć.
Struktura HTML i CSS siatki nie jest niczym nowym, więc pomińmy tę część i zamiast tego skupmy się na okrągłym kształcie i efekcie najechania, jaki chcemy.
Będziemy używać clip-path i jego circle() funkcja do — zgadłeś! — wyciąć okrąg z obrazów.
Ten rysunek ilustruje clip-path używany do pierwszego obrazu. Lewa strona pokazuje stan początkowy obrazu, a prawa pokazuje stan po najechaniu kursorem. Możesz użyć to narzędzie online grać i wizualizować clip-path wartości.
W przypadku pozostałych obrazów możemy zaktualizować środek okręgu (70% 70%), aby uzyskać następujący kod:
.gallery > img:hover {
--_c: 50%; /* same as "50% at 50% 50%" */
}
.gallery > img:nth-child(1) {
clip-path: circle(var(--_c, 55% at 70% 70%));
}
.gallery > img:nth-child(2) {
clip-path: circle(var(--_c, 55% at 30% 70%));
}
.gallery > img:nth-child(3) {
clip-path: circle(var(--_c, 55% at 70% 30%));
}
.gallery > img:nth-child(4) {
clip-path: circle(var(--_c, 55% at 30% 30%));
}Zwróć uwagę, jak definiujemy clip-path wartości jako rezerwa wewnątrz var(). W ten sposób możemy łatwiej aktualizować wartość po najechaniu myszą, ustawiając wartość --_c zmienny. Podczas używania circle(), domyślna pozycja punktu środkowego to 50% 50%, więc możemy to pominąć, aby uzyskać bardziej zwięzły kod. Dlatego widzisz, że my tylko ustawiamy 50% zamiast 50% at 50% 50%.
Następnie zwiększamy rozmiar naszego obrazu po najechaniu kursorem do całkowitego rozmiaru siatki, aby móc zakryć inne obrazy. Zapewniamy również z-index ma wyższą wartość na obrazie po najechaniu kursorem, więc jest najwyższym w naszym kontekst układania.
.gallery {
--s: 200px; /* controls the image size */
--g: 8px; /* controls the gap between images */
display: grid;
grid: auto-flow var(--s) / repeat(2, var(--s));
gap: var(--g);
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
cursor: pointer;
z-index: 0;
transition: .25s, z-index 0s .25s;
}
.gallery > img:hover {
--_c: 50%; /* change the center point on hover */
width: calc(200% + var(--g));
z-index: 1;
transition: .4s, z-index 0s;
}
.gallery > img:nth-child(1){
clip-path: circle(var(--_c, 55% at 70% 70%));
place-self: start;
}
.gallery > img:nth-child(2){
clip-path: circle(var(--_c, 55% at 30% 70%));
place-self: start end;
}
.gallery > img:nth-child(3){
clip-path: circle(var(--_c, 55% at 70% 30%));
place-self: end start;
}
.gallery > img:nth-child(4){
clip-path: circle(var(--_c, 55% at 30% 30%));
place-self: end;
}Co się dzieje z
place-selfwłasność? Dlaczego tego potrzebujemy i dlaczego każdy obraz ma określoną wartość?
Czy pamiętasz problem, który mieliśmy w poprzednim artykule, kiedy? tworzenie siatki puzzli? Zwiększyliśmy rozmiar obrazów, aby utworzyć przepełnienie, ale przepełnienie niektórych obrazów było nieprawidłowe. Naprawiliśmy je za pomocą place-self własność.
Ten sam problem tutaj. Zwiększamy rozmiar obrazów, aby każdy z nich przepełniał swoje komórki siatki. Ale jeśli nic nie zrobimy, wszystkie przepełnią się po prawej i dolnej stronie siatki. Potrzebujemy:
- pierwszy obraz do przepełnienia prawej dolnej krawędzi (zachowanie domyślne),
- drugi obraz do przepełnienia lewej dolnej krawędzi,
- trzeci obraz, aby przepełnić prawą górną krawędź, oraz
- czwarty obraz przepełni lewą górną krawędź.
Aby to uzyskać, musimy poprawnie umieścić każdy obraz za pomocą place-self własność.
Jeśli nie znasz place-self, to skrót od justify-self i align-self aby umieścić element poziomo i pionowo. Gdy przyjmuje jedną wartość, obie linie trasowania używają tej samej wartości.
Rozszerzanie paneli obrazu
W poprzednim artykule, stworzyłem fajny efekt powiększenia, który dotyczy siatki obrazów, w której możemy kontrolować wszystko: liczbę wierszy, liczbę kolumn, rozmiary, współczynnik skali itp.
Szczególnym przypadkiem były klasyczne panele rozwijane, gdzie mamy tylko jeden rząd i kontener o pełnej szerokości.
Weźmy ten przykład i połączymy go z kształtami!
Zanim przejdziemy dalej, gorąco polecam przeczytanie mojego inny artykuł aby zrozumieć, jak działają sztuczki, które zamierzamy omówić. Sprawdź to, a my skupimy się tutaj na tworzeniu kształtów paneli.
Zacznijmy od uproszczenia kodu i usunięcia niektórych zmiennych
Potrzebujemy tylko jednego wiersza, a liczba kolumn powinna być dostosowana do liczby obrazów. Oznacza to, że nie potrzebujemy już zmiennych dla liczby wierszy (--n) i kolumny (--m ) ale musimy użyć grid-auto-flow: column, umożliwiając siatce automatyczne generowanie kolumn w miarę dodawania nowych obrazów. Rozważymy stałą wysokość naszego kontenera; domyślnie będzie to pełna szerokość.
Przytnijmy obrazy w pochyły kształt:
clip-path: polygon(S 0%, 100% 0%, (100% - S) 100%, 0% 100%);Po raz kolejny każdy obraz jest zawarty w swojej komórce siatki, więc między obrazami jest więcej miejsca, niż byśmy chcieli:
Musimy zwiększyć szerokość obrazów, aby utworzyć nakładanie się. Wymieniamy min-width: 100% w min-width: calc(100% + var(--s)), Gdzie --s to nowa zmienna, która kontroluje kształt.
Teraz musimy naprawić pierwszy i ostatni obraz, aby wylewały się ze strony bez przerw. Innymi słowy, możemy usunąć skos z lewej strony pierwszego obrazu i skos z prawej strony ostatniego obrazu. Potrzebujemy nowego clip-path specjalnie dla tych dwóch obrazów.
Musimy również naprawić przelew. Domyślnie wszystkie obrazy będą przepełnione po obu stronach, ale w przypadku pierwszego potrzebujemy przepełnienia po prawej stronie, podczas gdy w przypadku ostatniego obrazu potrzebujemy przepełnienia w lewo.
.gallery > img:first-child {
min-width: calc(100% + var(--s)/2);
place-self: start;
clip-path: polygon(0 0,100% 0,calc(100% - var(--s)) 100%,0 100%);
}
.gallery > img:last-child {
min-width: calc(100% + var(--s)/2);
place-self: end;
clip-path: polygon(var(--s) 0,100% 0,100% 100%,0 100%);
}Efektem końcowym jest ładny, rozszerzający się panel pochylonych obrazów!
Możemy dodać dowolną liczbę obrazów, a siatka dostosuje się automatycznie. Dodatkowo musimy kontrolować tylko jedną wartość, aby kontrolować kształt!
Moglibyśmy stworzyć ten sam układ z flexboxem, ponieważ mamy do czynienia z pojedynczym rzędem elementów. Tutaj jest moja realizacja.
Jasne, skośne obrazy są fajne, ale co z zygzakowatym wzorem? Już drażniłem się z tym o koniec ostatniego artykułu.
Wszystko, co tu robię, to zastępowanie clip-path w mask… i zgadnij co? Mam już szczegółowy artykuł na temat tworząc ten zygzakowaty kształt — nie wspominając o internetowym generator, aby uzyskać kod. Widzisz, jak wszystko się łączy?
Najtrudniejszą częścią jest upewnienie się, że zygzaki są idealnie wyrównane, a do tego musimy dodać przesunięcie dla każdego :nth-child(odd) element obrazu.
.gallery > img {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
100% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y,
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0% calc(50% + var(--_p, 0%))/51% calc(2*var(--s)) repeat-y;
}
/* we add an offset to the odd elements */
.gallery > img:nth-child(odd) {
--_p: var(--s);
}
.gallery > img:first-child {
mask:
conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%))/100% calc(2*var(--s));
}
.gallery > img:last-child {
mask:
conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg)
0 calc(50% + var(--_p, 0%)) /100% calc(2*var(--s));
}Zwróć uwagę na użycie --_p zmienna, która powróci do 0% ale będzie równy --_s dla dziwnych obrazów.
Oto demo, które ilustruje problem. Najedź, aby zobaczyć, jak przesunięcie — zdefiniowane przez --_p — naprawia wyrównanie.
Zwróć także uwagę, jak używamy innej maski dla pierwszego i ostatniego obrazu, tak jak w poprzednim przykładzie. Potrzebujemy tylko zygzaka po prawej stronie pierwszego obrazu i lewej stronie ostatniego obrazu.
A dlaczego nie zaokrąglone boki? Zróbmy to!
Wiem, że kod może wydawać się przerażający i trudny do zrozumienia, ale wszystko, co się dzieje, to kombinacja różnych sztuczek, które omówiliśmy w tym i innych artykułach, którymi już się dzieliłem. W tym przypadku używam tej samej struktury kodu, co kształty zygzakowate i pochyłe. Porównaj to z tymi przykładami, a nie znajdziesz żadnej różnicy! To są te same sztuczki w mój poprzedni artykuł o efekcie powiększenia. Następnie używam mojego inne pisanie i mój generator online aby uzyskać kod maski, która tworzy te zaokrąglone kształty.
Jeśli pamiętasz, co zrobiliśmy dla zygzaka, użyliśmy tej samej maski dla wszystkich obrazów, ale potem musieliśmy dodać przesunięcie do nieparzystych obrazów, aby stworzyć idealne nakładanie się. W tym przypadku potrzebujemy innej maski dla obrazów o numerach nieparzystych.
Pierwsza maska:
mask:
linear-gradient(-90deg,#0000 calc(2*var(--s)),#000 0) var(--s),
radial-gradient(var(--s),#000 98%,#0000) 50% / calc(2*var(--s)) calc(1.8*var(--s)) space repeat;
Drugi:
mask:
radial-gradient(calc(var(--s) + var(--g)) at calc(var(--s) + var(--g)) 50%,#0000 98% ,#000)
calc(50% - var(--s) - var(--g)) / 100% calc(1.8*var(--s))
Jedyny wysiłek, jaki tutaj wykonałem, to aktualizacja drugiej maski, aby zawierała zmienną przerwy (--g), aby stworzyć przestrzeń między obrazami.
Ostatnim akcentem jest naprawienie pierwszego i ostatniego obrazu. Podobnie jak we wszystkich poprzednich przykładach, pierwszy obraz wymaga prostej lewej krawędzi, a ostatni wymaga prostej prawej krawędzi.
W przypadku pierwszego obrazu zawsze znamy maskę, którą musi mieć, czyli:
.gallery > img:first-child {
mask:
radial-gradient(calc(var(--s) + var(--g)) at right, #0000 98%, #000) 50% / 100% calc(1.8 * var(--s));
}
W przypadku ostatniego obrazu zależy to od liczby elementów, więc ma znaczenie, czy ten element jest :nth-child(odd) or :nth-child(even).
.gallery > img:last-child:nth-child(even) {
mask:
linear-gradient(to right,#0000 var(--s),#000 0),
radial-gradient(var(--s),#000 98%,#0000) left / calc(2*var(--s)) calc(1.8*var(--s)) repeat-y
}
.gallery > img:last-child:nth-child(odd) {
mask:
radial-gradient(calc(var(--s) + var(--g)) at left,#0000 98%,#000) 50% / 100% calc(1.8*var(--s))
}To wszystko! Trzy różne układy, ale za każdym razem te same sztuczki CSS:
- struktura kodu, aby stworzyć efekt powiększenia;
- maska lub ścieżka przycinania do tworzenia kształtów
- osobna konfiguracja dla nieparzystych elementów w niektórych przypadkach, aby upewnić się, że mamy idealne zachodzenie na siebie
- specyficzna konfiguracja dla pierwszego i ostatniego obrazu, aby zachować kształt tylko z jednej strony.
A oto wielkie demo z nimi wszystkimi razem. Wystarczy dodać klasę, aby aktywować układ, który chcesz zobaczyć.
A oto ta z implementacją Flexbox
Zamykając
Uf, skończyliśmy! Wiem, że jest wiele sztuczek CSS i przykładów między tym artykułem a ostatnim, nie wspominając o wszystkich innych sztuczkach, o których tu wspomniałem z innych artykułów, które napisałem. Poskładanie wszystkiego do kupy zajęło mi trochę czasu, a nie musisz rozumieć wszystkiego od razu. Jedno czytanie da ci dobry przegląd wszystkich układów, ale może być konieczne przeczytanie artykułu więcej niż raz i skupienie się na każdym przykładzie, aby zrozumieć wszystkie sztuczki.
Czy zauważyłeś, że w ogóle nie zmieniliśmy kodu HTML poza być może liczbą obrazów w znacznikach? Wszystkie utworzone przez nas układy mają ten sam kod HTML, który jest niczym innym jak listą obrazów.
Zanim zakończę, zostawię wam ostatni przykład. To „kontra” między dwiema postaciami z anime z fajnym efektem najechania.
A ty? Czy możesz stworzyć coś na podstawie tego, czego się nauczyłeś? To nie musi być skomplikowane — wyobraź sobie coś fajnego lub zabawnego, jak to zrobiłem z tym pojedynkiem anime. Może to być dla Ciebie dobre ćwiczenie, a możemy zakończyć doskonałą kolekcją w sekcji komentarzy.
