Fala jest prawdopodobnie jednym z najtrudniejszych kształtów do wykonania w CSS. Zawsze staramy się to przybliżyć za pomocą właściwości takich jak border-radius i mnóstwo magicznych liczb, aż dostaniemy coś, co wydaje się bliskie. I to jeszcze zanim wpadniemy w faliste wzory, które są trudniejsze.
„SVG to!” możesz powiedzieć i prawdopodobnie masz rację, że jest to lepsza droga. Ale zobaczymy, że CSS może tworzyć fajne fale, a kod do tego nie musi być szalony. I zgadnij co? Mam generator online by było jeszcze bardziej trywialne!
Jeśli pobawisz się generatorem, zobaczysz, że CSS, który wypluwa, to tylko dwa gradienty i właściwość maski CSS — tylko te dwie rzeczy i możemy stworzyć dowolny kształt lub wzór fali. Nie wspominając już o tym, że możemy łatwo kontrolować rozmiar i krzywiznę fal, gdy jesteśmy na tym.
Niektóre wartości mogą wyglądać tak: „magiczne liczby” ale tak naprawdę kryje się za nimi logika, a my przeanalizujemy kod i odkryjemy wszystkie sekrety tworzenia fal.
Ten artykuł jest kontynuacją poprzedni gdzie zbudowałem wszelkiego rodzaju różne zygzakowate, z lunetą, zapiekane i tak, faliste granice. Gorąco polecam sprawdzić ten artykuł, ponieważ wykorzystuje tę samą technikę, którą omówimy tutaj, ale bardziej szczegółowo.
Matematyka za falami
Ściśle mówiąc, nie ma jednej magicznej formuły za falistymi kształtami. Każdy kształt z krzywymi w górę iw dół można nazwać falą, więc nie będziemy ograniczać się do skomplikowanej matematyki. Zamiast tego odtworzymy falę, korzystając z podstaw geometrii.
Zacznijmy od prostego przykładu z dwoma kształtami okręgów:
Mamy obok siebie dwa okręgi o tym samym promieniu. Czy widzisz tę czerwoną linię? Obejmuje górną połowę pierwszego koła i dolną połowę drugiego. Teraz wyobraź sobie, że bierzesz ten wers i powtarzasz go.
Już widzimy falę. Teraz wypełnijmy dolną część (lub górną), aby uzyskać następujące informacje:
Tada! Mamy kształt falisty, który możemy kontrolować za pomocą jednej zmiennej dla promieni okręgu. To jedna z najłatwiejszych fal, jakie możemy zrobić i to w niej się popisałem this poprzedni artykuł
Dodajmy trochę złożoności, robiąc pierwszą ilustrację i przesuwając trochę kółka:
Nadal mamy dwa okręgi o tych samych promieniach, ale nie są już wyrównane poziomo. W tym przypadku czerwona linia nie obejmuje już połowy obszaru każdego okręgu, lecz mniejszy obszar. Obszar ten jest ograniczony przerywaną czerwoną linią. Linia ta przecina punkt, w którym spotykają się oba okręgi.
Teraz weź tę linię i powtórz ją, a otrzymasz kolejną falę, gładszą.
Myślę, że masz pomysł. Kontrolując położenie i rozmiar okręgów, możemy stworzyć dowolną falę. Możemy nawet stworzyć dla nich zmienne, które będę nazywał P i S, Odpowiednio.
Zapewne zauważyłeś, że w generatorze online sterujemy falą za pomocą dwóch wejść. Odwzorowują się do powyższych zmiennych. S to „Wielkość fali” i P to „krzywizna fali”.
ja określam P as P = m*S gdzie m jest zmienną, którą dostosowujesz podczas aktualizowania krzywizny fali. Dzięki temu możemy mieć zawsze tę samą krzywiznę, nawet jeśli zaktualizujemy S.
m może być dowolną wartością pomiędzy 0 i 2. 0 da nam pierwszy szczególny przypadek, w którym oba okręgi są wyrównane poziomo. 2 jest rodzajem maksymalnej wartości. Możemy jechać większymi, ale po kilku testach stwierdziłem, że coś powyżej 2 wytwarza złe, płaskie kształty.
Nie zapominajmy o promieniu naszego okręgu! Można to również zdefiniować za pomocą S i P lubię to:
R = sqrt(P² + S²)/2Kiedy P jest równe 0, będziemy mieli R = S/2.
Mamy wszystko, aby zacząć konwertować to wszystko na gradienty w CSS!
Tworzenie gradientów
Nasze fale używają okręgów, a mówiąc o okręgach, mówimy o gradientach radialnych. A ponieważ dwa okręgi definiują naszą falę, logicznie będziemy używać dwóch gradientów radialnych.
Zaczniemy od konkretnego przypadku, w którym P jest równe 0. Oto ilustracja pierwszego gradientu:
Ten gradient tworzy pierwszą krzywiznę, wypełniając cały obszar dna — że tak powiem, „wodę” fali.
.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Połączenia --size zmienna definiuje promień i wielkość gradientu promieniowego. Jeśli porównamy to z S zmienna, to jest równa S/2.
Teraz dodajmy drugi gradient:
Drugi gradient to nic innego jak koło, które uzupełnia naszą falę:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%Jeśli zaznaczysz poprzedni artykuł zobaczysz, że po prostu powtarzam to, co już tam zrobiłem.
Śledziłem oba artykuły, ale konfiguracje gradientów nie są takie same.
Dzieje się tak, ponieważ możemy osiągnąć ten sam wynik przy użyciu różnych konfiguracji gradientów. Zauważysz niewielką różnicę w wyrównaniu, jeśli porównasz obie konfiguracje, ale sztuczka jest taka sama. Może to być mylące, jeśli nie znasz gradientów, ale nie martw się. Przy odrobinie praktyki przyzwyczaisz się do nich i sam przekonasz się, że inna składnia może prowadzić do tego samego rezultatu.
Oto pełny kod naszej pierwszej fali:
.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Teraz weźmy ten kod i dostosujmy go do miejsca, w którym wprowadzamy zmienną, która sprawia, że można go w pełni wykorzystać do tworzenia dowolnej fali. Jak widzieliśmy w poprzedniej sekcji, główną sztuczką jest przesuwanie kół, aby nie były już wyrównane, więc zaktualizujmy położenie każdego z nich. Pierwszą przeniesiemy w górę, a drugą w dół.
Nasz kod będzie wyglądał tak:
.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}wprowadziłem nowy --p zmienna, która jest używana do określenia środkowej pozycji każdego okręgu. Używa pierwszego gradientu 50% calc(-1*var(--p)), więc jego środek przesuwa się w górę, podczas gdy drugi jest używany calc(var(--size) + var(--p)) przesunąć go w dół.
Demo jest warte tysiąca słów:
Kręgi ani nie są wyrównane, ani nie stykają się ze sobą. Rozstawiliśmy je daleko od siebie, nie zmieniając ich promieni, więc straciliśmy naszą falę. Ale możemy to naprawić, używając tej samej matematyki, której użyliśmy wcześniej do obliczenia nowego promienia. Zapamietaj to R = sqrt(P² + S²)/2. W naszym przypadku, --size jest równe S/2; to samo dla --p co jest również równe P/2 ponieważ poruszamy się w obu kręgach. Tak więc odległość między ich punktami środkowymi jest dwukrotnie większa od wartości --p dla tego:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))To daje nam wynik 55.9px.
Nasza fala powraca! Podłączmy to równanie do naszego CSS:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}To jest prawidłowy kod CSS. sqrt() jest częścią specyfikacji, ale w chwili, gdy to piszę, przeglądarka nie obsługuje tego. Oznacza to, że potrzebujemy trochę JavaScript lub Sass, aby obliczyć tę wartość, dopóki nie uzyskamy szerszego zakresu sqrt() Wsparcie.
To jest cholernie fajne: wystarczy dwa gradienty, aby uzyskać fajną falę, którą można zastosować do dowolnego elementu za pomocą mask własność. Koniec z próbami i błędami — wystarczy zaktualizować dwie zmienne i gotowe!
Odwrócenie fali
A co jeśli chcemy, żeby fale szły w innym kierunku, gdzie wypełniamy „niebo” zamiast „wody”. Wierzcie lub nie, ale wystarczy zaktualizować dwie wartości:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%)
50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}Wszystko, co zrobiłem, to dodanie przesunięcia równego 100%, wyróżnione powyżej. Oto wynik:
Możemy rozważyć bardziej przyjazną składnię, używając wartości słów kluczowych, aby było to jeszcze łatwiejsze:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Używamy left i bottom słowa kluczowe, aby określić boki i przesunięcie. Domyślnie przeglądarka domyślnie left i top — dlatego używamy 100% aby przesunąć element na dół. W rzeczywistości przenosimy to z top by 100%, więc to naprawdę to samo, co powiedzenie bottom. O wiele łatwiejszy do odczytania niż matematyka!
Dzięki tej zaktualizowanej składni wszystko, co musimy zrobić, to zamienić się bottom dla top — lub odwrotnie — aby zmienić kierunek fali.
A jeśli chcesz uzyskać zarówno fale górne, jak i dolne, łączymy wszystkie gradienty w jednej deklaracji:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
mask:
/* Gradient 1 */
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 2 */
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
/* Gradient 3 */
radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 4 */
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}Jeśli sprawdzisz kod, zobaczysz, że oprócz łączenia wszystkich gradientów zmniejszyłem również ich wysokość z 100% do 51% tak, aby oba zakrywały połowę elementu. TAk, 51%. Potrzebujemy tego małego dodatkowego procentu na małe nakładanie się, które pozwoli uniknąć luk.
A co z lewą i prawą stroną?
To twoja praca domowa! Weź to, co zrobiliśmy z górną i dolną stroną i spróbuj zaktualizować wartości, aby uzyskać wartości z prawej i lewej strony. Nie martw się, to proste i jedyne, co musisz zrobić, to zamienić wartości.
Jeśli masz problemy, zawsze możesz skorzystać generator online aby sprawdzić kod i zwizualizować wynik.
Linie faliste
Wcześniej wykonaliśmy naszą pierwszą falę za pomocą czerwonej linii, a następnie wypełniliśmy dolną część elementu. Jak o tej falistej linii? To też jest fala! Jeszcze lepiej, jeśli możemy kontrolować jego grubość za pomocą zmiennej, abyśmy mogli ją ponownie wykorzystać. Zróbmy to!
Nie będziemy zaczynać od zera, ale raczej weźmiemy poprzedni kod i zaktualizujemy go. Pierwszą rzeczą, którą należy zrobić, to zaktualizować stopnie kolorów gradientów. Oba gradienty zaczynają się od koloru przezroczystego do nieprzezroczystego lub odwrotnie. Aby zasymulować linię lub obramowanie, musimy zacząć od przezroczystego, przejść do nieprzezroczystego, a następnie z powrotem do przezroczystego:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%Myślę, że już zgadłeś, że --b zmienna jest tym, czego używamy do kontrolowania grubości linii. Zastosujmy to do naszych gradientów:
Tak, wynik jest daleki od falistej linii. Ale przyglądając się uważnie, widzimy, że jeden gradient poprawnie tworzy dolną krzywiznę. Tak więc wszystko, co naprawdę musimy zrobić, to poprawić drugi gradient. Zamiast zachowywać pełne koło, zróbmy częściowy jeden taki jak drugi gradient.
Jeszcze daleko, ale mamy obie krzywizny, których potrzebujemy! Jeśli sprawdzisz kod, zobaczysz, że mamy dwa identyczne gradienty. Jedyną różnicą jest ich umiejscowienie:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g))
50% var(--size)/calc(4*var(--size)) 100%;
}Teraz musimy dostosować rozmiar i pozycję do ostatecznego kształtu. Nie potrzebujemy już, aby gradient był na pełnej wysokości, więc możemy go wymienić 100% z tym:
/* Size plus thickness */
calc(var(--size) + var(--b))Za tą wartością nie stoi żadna matematyczna logika. Musi być tylko wystarczająco duży dla krzywizny. Za chwilę zobaczymy jego wpływ na wzór. W międzyczasie zaktualizujmy również położenie, aby pionowo wyśrodkować gradienty:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}Nadal nie do końca tam:
Jeden gradient należy przesunąć nieco w dół, a drugi nieco w górę. Obaj muszą poruszać się o połowę swojej wysokości.
Jesteśmy prawie na miejscu! Potrzebujemy małej poprawki, aby promień miał idealne zachodzenie na siebie. Obie linie muszą być przesunięte o połowę granicy (--b) grubość:
Mamy to! Idealna falista linia, którą możemy łatwo dostosować, kontrolując kilka zmiennych:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g))
calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g))
50% calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}Wiem, że logika zajmuje trochę czasu. W porządku i jak powiedziałem, tworzenie falistego kształtu w CSS nie jest łatwe, nie wspominając o zawiłej matematyce, która się za tym kryje. Dlatego generator online ratuje życie — możesz łatwo uzyskać ostateczny kod, nawet jeśli nie rozumiesz w pełni logiki, która się za nim kryje.
Faliste wzory
Z stworzonej przez nas falistej linii możemy wykonać wzór!
O nie, kod wzorca będzie jeszcze trudniejszy do zrozumienia!
Zupełnie nie! Mamy już kod. Wszystko, co musimy zrobić, to usunąć repeat-x z tego co już mamy i tada.
Ładny falisty wzór. Pamiętasz równanie, które powiedziałem, że wrócimy?
/* Size plus thickness */
calc(var(--size) + var(--b))Cóż, to właśnie kontroluje odległość między liniami we wzorze. Możemy zrobić z tego zmienną, ale nie ma potrzeby większej złożoności. Nawet nie używam do tego zmiennej w generatorze. Może później to zmienię.
Oto ten sam wzór idący w innym kierunku:
Udostępniam kod w tym demo, ale chciałbym, abyś przeanalizował go i zrozumiał, jakie zmiany wprowadziłem, aby tak się stało.
Uproszczenie kodu
We wszystkich poprzednich wersjach demonstracyjnych zawsze definiujemy --size i --p niezależnie. Ale czy pamiętasz, jak wspomniałem wcześniej, że generator online ocenia? P jako równy m*S, Gdzie m kontroluje krzywiznę fali? Definiując stały mnożnik, możemy pracować z jedną konkretną falą, a kod może stać się łatwiejszy. Właśnie tego będziemy potrzebować w większości przypadków: określonego pofalowanego kształtu i zmiennej do kontrolowania jego rozmiaru.
Zaktualizujmy nasz kod i przedstawmy m zmienna:
.wave {
--size: 50px;
--R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Jak widać, nie potrzebujemy już --p zmienny. Wymieniłem to na var(--m)*var(--size)i odpowiednio zoptymalizował część matematyki. Teraz, jeśli chcemy pracować z konkretnym pofalowanym kształtem, możemy pominąć --m zmienną i zastąp ją stałą wartością. Spróbujmy .8 na przykład.
--size: 50px;
--R: calc(var(--size) * 1.28);
mask:
radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;Widzisz, jak kod jest teraz prostszy? Tylko jedna zmienna do kontrolowania Twojej fali, a ponadto nie musisz już na niej polegać sqrt() który nie obsługuje przeglądarki!
Możesz zastosować tę samą logikę do wszystkich pokazów, które widzieliśmy, nawet dla falistych linii i wzoru. Zacząłem od szczegółowego matematycznego wyjaśnienia i podałem ogólny kod, ale może się okazać, że będziesz potrzebować łatwiejszego kodu w prawdziwym przypadku użycia. To właśnie robię cały czas. Rzadko używam kodu generycznego, ale zawsze rozważam wersję uproszczoną, zwłaszcza, że w większości przypadków używam pewnych znanych wartości, które nie muszą być przechowywane jako zmienne. (Spoiler alert: Na koniec podzielę się kilkoma przykładami!)
Ograniczenia tego podejścia
Matematycznie stworzony przez nas kod powinien dać nam idealne pofalowane kształty i wzory, ale w rzeczywistości czeka nas kilka dziwnych wyników. Więc tak, ta metoda ma swoje ograniczenia. Na przykład generator online może generować słabe wyniki, zwłaszcza w przypadku linii falistych. Część problemu wynika z określonej kombinacji wartości, w której wynik jest zaszyfrowany, na przykład przy użyciu dużej wartości grubości obramowania w porównaniu z rozmiarem:
W pozostałych przypadkach problem związany z pewnym zaokrągleniem spowoduje niewspółosiowość i przerwy między falami:
To powiedziawszy, nadal uważam, że metoda, którą omówiliśmy, pozostaje dobra, ponieważ w większości przypadków wytwarza gładkie fale i możemy łatwo uniknąć złych wyników, grając z różnymi wartościami, dopóki nie osiągniemy idealnej.
Zamykając
Mam nadzieję, że po tym artykule nie będziesz już więcej błądził próbami i błędami, aby zbudować falisty kształt lub wzór. Dodatkowo do generatora online, masz wszystkie sekrety matematyki związane z tworzeniem dowolnej fali!
Artykuł kończy się tutaj, ale teraz masz potężne narzędzie do tworzenia fantazyjnych projektów wykorzystujących faliste kształty. Oto inspiracja, jak zacząć…
A ty? Użyj mojego generatora online (lub napisz kod ręcznie, jeśli nauczyłeś się już całej matematyki na pamięć) i pokaż mi swoje dzieła! Miejmy dobrą kolekcję w sekcji komentarzy.
