Maski CSS, shape-outside i perspektywa 3D z demami na żywo | We.Inc
Wygaszaj obrazy gradientami mask-image, wycinaj kształty maskami SVG, oblewaj tekstem koła za pomocą shape-outside, porównaj clip-path z maską i zbuduj scenę z perspektywą 3D.
Maska CSS ukrywa części elementu na podstawie przezroczystości obrazu: mask-image: linear-gradient(black, transparent) wygasza go ku dołowi. shape-outside sprawia, że sąsiedni tekst opływa koło lub wielokąt zamiast prostokąta. perspective na rodzicu nadaje obróconym dzieciom prawdziwą głębię. Zbuduj maskę na placu zabaw i ją skopiuj.
Które narzędzie do jakiego zadania
Cel
Właściwość
Krawędź
Miękkie wygaszenie lub reflektor
mask-image z gradientem
Miękka, dowolna nieprzezroczystość
Wycięcie w kształcie ikony lub logo
mask-image z SVG
Podąża za kanałem alfa obrazu
Twarde cięcie geometryczne
Zawsze ostra
Tekst opływający kształt
shape-outside na elemencie float
Wpływa na układ tekstu
Głębia dla obrotów 3D
perspective na rodzicu
To w ogóle nie jest cięcie
Zacznij od placu zabaw z maskami: wybierz wygaszenie, reflektor lub wycięty kształt, przesuwaj go po przykładowym obrazie i skopiuj CSS z prefiksem -webkit-. Pod nim znajdziesz edytowalne przykłady opływania tekstem, porównania clip-path z maską i małej sceny 3D, wszystkie działające bez JavaScript.
Wybierz typ maski: liniowe wygaszenie, radialny reflektor lub kształt SVG.
Dostosuj kierunek, pozycję, rozmiar i miękkość. Podgląd odświeża się natychmiast.
Skopiuj CSS. Zawiera zarówno mask-image, jak i -webkit-mask-image, więc działa też w starszych wersjach Safari i Chromium.
Przewiń w dół do shape-outside, porównań clip-path i sceny z perspektywą, a każdy z przykładów edytuj na miejscu.
W mask-image domyślnie liczy się tylko kanał alfa. Czarny i każdy inny nieprzezroczysty kolor oznaczają widoczne, przezroczysty oznacza ukryte.
Używaj mask-size, mask-position i mask-repeat tak samo jak właściwości background. Maska SVG się powtarza, chyba że ustawisz mask-repeat: no-repeat.
shape-outside działa tylko na elementach pływających (float). Połącz go z takim samym clip-path, jeśli chcesz, by sam element też wyglądał jak ten kształt.
Dodaj shape-margin, aby opływający tekst trzymał się nieco z dala od krzywej.
Najczęściej zadawane pytania
Czym różni się clip-path od maski?
clip-path rysuje geometryczny kontur i wszystko poza nim jest odcinane ostrą krawędzią. mask-image używa obrazu lub gradientu, więc krawędzie mogą być miękkie i częściowo przezroczyste. Ścieżki przycinania są prostsze dla wielokątów i kół; maski to wybór do wygaszeń, rozmytych reflektorów i wycięć w kształcie logo.
Czy nadal potrzebuję -webkit-mask-image?
Właściwości mask bez prefiksu stały się Baseline pod koniec 2023 roku. Dodanie obok wersji z -webkit- nic nie kosztuje i sprawia, że efekt działa u odwiedzających ze starszymi wersjami Safari i Chromium.
Dlaczego mój shape-outside nie działa?
Sprawdź trzy rzeczy: element musi mieć float, potrzebuje szerokości i wysokości, a jeśli jako kształtu używasz obrazu, musi on pochodzić z tego samego origin lub być serwowany z nagłówkami CORS. Tekst opływa też tylko po stronie przeciwnej do floata.
Jak wygasić krawędź przewijanej listy?
Nałóż maskę na kontener przewijania: mask-image: linear-gradient(to bottom, black 85%, transparent). Ostatnie linie zanikają, sugerując, że jest więcej treści, a maska przewija się razem z kontenerem, a nie z treścią.
Jaką wartość powinna mieć perspective?
To odległość od widza do płaszczyzny z = 0. Dla kart naturalnie wygląda około 600px do 1200px. Mniejsze wartości, jak 300px, przesadnie podkreślają głębię i mocno zniekształcają bliższe krawędzie.
Jak maska decyduje, co jest widoczne
Przeglądarka nakłada obraz maski na element i odczytuje jego przezroczystość piksel po pikselu. Tam, gdzie maska jest w pełni nieprzezroczysta, element wyświetla się normalnie, tam, gdzie jest w pełni przezroczysta, element znika, a częściowa przezroczystość daje częściową widoczność.
Ponieważ gradienty są obrazami, każdy gradient liniowy, radialny czy stożkowy to gotowa maska. Kilka masek można nakładać warstwowo, oddzielając je przecinkami, i łączyć za pomocą mask-composite, na przykład aby wybić dziurę w wygaszeniu.
Opływanie kształtów tekstem
shape-outside przyjmuje proste kształty, takie jak circle(), ellipse(), polygon() i inset(), słowo kluczowe pudełka, na przykład margin-box, albo obraz, którego przezroczyste piksele definiują kształt. Za krzywą podąża tylko treść inline płynąca obok floata.
Sam float przy rysowaniu nadal zajmuje swój prostokąt. Aby zdjęcie wyglądało na okrągłe, a nie tylko odpychało tekst po okręgu, dodaj do tego samego elementu clip-path: circle(50%) lub border-radius: 50%.
Maski z gradientem: wygaszenia i reflektory
Wygaszenie dołu bloku
W pełni widoczny do 50 procent wysokości, potem płynne wygaszenie do zera.
Radialny reflektor
Gradient radialny pozostawia widoczne miękkie koło i ukrywa resztę wzoru.
Maski SVG i data URI
Wytnij element w kształt gwiazdy
SVG jest wstawione jako data URI, więc dodatkowy plik nie jest potrzebny. mask-size: contain utrzymuje całą gwiazdę w pudełku.
Zmień kolor pliku ikony za pomocą maski
Plik ikony dostarcza tylko kształt; kolor ustawia background-color, więc jeden SVG obsługuje każdy motyw i stan hover.
shape-outside: tekst opływający kształty
Opłyń tekstem koło
Float odpycha tekst przez shape-outside i wygląda na okrągły dzięki border-radius. shape-margin dodaje trochę oddechu.
Opłyń tekstem ukośny wielokąt
Ten sam wielokąt steruje zarówno widocznym cięciem (clip-path), jak i przepływem tekstu (shape-outside).
clip-path a maska
To samo koło, ostra i miękka krawędź
Lewe używa clip-path: circle(). Prawe używa maski z gradientem radialnym z rozmytą krawędzią, czego clip-path nie potrafi.
Porównanie clip-path i maski
Wejście
Prosty kształt lub SVG <clipPath>
Dowolny obraz: gradient, PNG, SVG
Krawędzie
Ostre
Miękkie lub ostre
Częściowa przezroczystość
Nie
Tak
Animowalność
Kształty o tej samej liczbie punktów
mask-position i mask-size
Mała scena z perspektywą 3D
Pochylone karty we wspólnej przestrzeni 3D
perspective na scenie i preserve-3d na grupie umieszczają trzy karty w jednej przestrzeni; translateZ przesuwa każdą na inną głębokość.
Ściągawka właściwości mask
Właściwości składowe mask i ich działanie
Właściwość
Domyślnie
Przeznaczenie
Obraz lub gradient używany jako maska
Użycie kanału alfa lub luminancji maski
Rozmiar maski, jak background-size
Położenie maski
Kafelkowanie obrazu maski
Pudełko, od którego mierzona jest pozycja
Obszar, na który działa maska
Jak łączą się warstwy masek: add, subtract, intersect, exclude
Koło
Gwiazda
Serce
Plama
Plac zabaw z maskami
Typ maski
Liniowe wygaszenie
Reflektor
Kształt SVG
Element z maską. Szachownica pokazuje, gdzie jest ukryty.