Fajne efekty CSS Hover, które wykorzystują przycinanie tła, maski i 3D

Przeszliśmy teraz przez serię postów na temat interesujących podejść do efektów najechania CSS. Zaczęliśmy od kilka przykładów wykorzystujących CSS background niska zabudowa, a następnie przeszedł do text-shadow nieruchomość, gdzie technicznie nie użyliśmy żadnych cieni. Połączyliśmy je również ze zmiennymi CSS i calc() aby zoptymalizować kod i ułatwić zarządzanie.

W tym artykule zbudujemy te dwa artykuły, aby stworzyć jeszcze bardziej złożone animacje najechania CSS. Mówimy o przycinaniu tła, maskach CSS, a nawet o moczeniu stóp dzięki perspektywom 3D. Innymi słowy, tym razem zamierzamy zbadać zaawansowane techniki i przesunąć granice tego, co CSS może zrobić z efektami najechania!

---

Oto tylko przedsmak tego, co robimy:

Efekty najechania za pomocą background-clip

Porozmawiajmy o background-clip. Ta właściwość CSS akceptuje a text wartość słowa kluczowego co pozwala nam zastosować gradienty do XNUMX elementu zamiast rzeczywistego tło.

Na przykład możemy zmienić kolor tekstu po najechaniu kursorem, tak jak za pomocą color właściwość, ale w ten sposób animujemy zmianę koloru:

Wszystko, co zrobiłem, to dodać background-clip: text do żywiołu i transition dotychczasowy background-position. Nie musi być bardziej skomplikowane!

Ale możemy zrobić lepiej, jeśli połączymy wiele gradientów z różnymi wartościami przycinania tła.

W tym przykładzie używam dwóch różnych gradientów i dwóch wartości z background-clip. Pierwszy gradient tła jest przycinany do tekstu (dzięki text wartość), aby ustawić kolor po najechaniu kursorem, podczas gdy drugi gradient tła tworzy dolne podkreślenie (dzięki padding-box wartość). Wszystko inne jest prosto skopiowane z praca, którą wykonaliśmy w pierwszym artykule z tej serii.

Co powiesz na efekt najechania, w którym pasek przesuwa się od góry do dołu w taki sposób, jakby tekst był skanowany, a następnie pokolorowany:

Tym razem zmieniłem rozmiar pierwszego gradientu, aby utworzyć linię. Następnie przesuwam go z innym gradientem, który aktualizuje kolor tekstu, aby stworzyć iluzję! Możesz zwizualizować to, co dzieje się w tym piórze:

Tylko zarysowaliśmy powierzchnię tego, co możemy zrobić z naszym background-clipuprawnienia pingowania! Jednak ta technika jest prawdopodobnie czymś, czego chciałbyś uniknąć w produkcji, ponieważ wiadomo, że Firefox ma dużo zgłoszonych błędów związany z background-clip. Safari ma również problemy z obsługą. To pozostawia tylko Chrome z solidną obsługą tych rzeczy, więc może otwórz go, gdy będziemy kontynuować.

Przejdźmy do innego efektu najechania za pomocą background-clip:

Prawdopodobnie myślisz, że ten wygląda bardzo łatwo w porównaniu z tym, co właśnie omówiliśmy – i masz rację, nie ma tu nic wymyślnego. Wszystko, co robię, to przesuwanie jednego gradientu, jednocześnie zwiększając rozmiar drugiego.

Ale jesteśmy tutaj, aby przyjrzeć się zaawansowanym efektom najechania, prawda? Zmieńmy to trochę, aby animacja była inna, gdy kursor myszy opuszcza element. Ten sam efekt najechania, ale inne zakończenie animacji:

Fajnie, prawda? przeanalizujmy kod:

.hover { --c: #1095c1; /* the color */ color: #0000; background: linear-gradient(90deg, #fff 50%, var(--c) 0) calc(100% - var(--_p, 0%)) / 200%, linear-gradient(var(--c) 0 0) 0% 100% / var(--_p, 0%) no-repeat, var(--_c, #0000); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; transition: 0s, color .5s, background-color .5s;
}
.hover:hover { color: #fff; --_c: var(--c); --_p: 100%; transition: 0.5s, color 0s .5s, background-color 0s .5s;
}

Mamy trzy warstwy tła — dwa gradienty i background-color zdefiniowany za pomocą --_c zmienna, która jest początkowo ustawiona na przezroczystą (#0000). Po najechaniu myszą zmieniamy kolor na biały, a --_c zmienna do głównego koloru (--c).

Oto, co się z tym dzieje transition: Najpierw stosujemy przejście do wszystkiego, ale opóźniamy color i background-color by 0.5s aby stworzyć efekt poślizgu. Zaraz po tym zmieniamy color oraz background-color. Możesz nie zauważyć żadnych wizualnych zmian, ponieważ tekst jest już biały (dzięki pierwszemu gradientowi), a tło jest już ustawione na główny kolor (dzięki drugiemu gradientowi).

Następnie, po wyjechaniu myszką, wprowadzamy natychmiastową zmianę do wszystkiego (zwróć uwagę na 0s opóźnienie), z wyjątkiem color i background-color które mają przejście. Oznacza to, że przywracamy wszystkie gradienty do ich stanów początkowych. Ponownie, prawdopodobnie nie zobaczysz żadnych zmian wizualnych, ponieważ tekst color i background-color już się zmieniło po najechaniu.

Na koniec stosujemy blaknięcie do koloru i a background-color aby utworzyć część animacji wysuwaną kursorem myszy. Wiem, że może to być trudne do zrozumienia, ale możesz lepiej zwizualizować tę sztuczkę, używając różnych kolorów:

Najedź kursorem na powyższe wiele razy, a zobaczysz właściwości, które są animowane po najechaniu myszą i te, które są animowane po wyłączeniu myszy. Możesz wtedy zrozumieć, w jaki sposób osiągnęliśmy dwie różne animacje dla tego samego efektu najechania.

Nie zapomnijmy zastosowana przez nas technika przełączania DRY w poprzednich artykułach z tej serii, aby pomóc zmniejszyć ilość kodu, używając tylko jednej zmiennej dla przełącznika:

.hover { --c: 16 149 193; /* the color using the RGB format */ color: rgb(255 255 255 / var(--_i, 0)); background: /* Gradient #1 */ linear-gradient(90deg, #fff 50%, rgb(var(--c)) 0) calc(100% - var(--_i, 0) * 100%) / 200%, /* Gradient #2 */ linear-gradient(rgb(var(--c)) 0 0) 0% 100% / calc(var(--_i, 0) * 100%) no-repeat, /* Background Color */ rgb(var(--c)/ var(--_i, 0)); -webkit-background-clip: text, padding-box, padding-box; background-clip: text, padding-box, padding-box; --_t: calc(var(--_i,0)*.5s); transition: var(--_t), color calc(.5s - var(--_t)) var(--_t), background-color calc(.5s - var(--_t)) var(--_t);
}
.hover:hover { --_i: 1;
}

Jeśli zastanawiasz się, dlaczego sięgnąłem po składnię RGB dla koloru głównego, to dlatego, że musiałem pobawić się przezroczystością alfa. Ja też używam zmiennej --_t w celu zmniejszenia zbędnych obliczeń stosowanych w transition własność.

Zanim przejdziemy do następnej części, oto więcej przykładów efektów zawisu, które zrobiłem jakiś czas temu, a które opierają się na background-clip. Szczegółowo każdy z nich byłby zbyt długi, ale dzięki temu, czego nauczyliśmy się do tej pory, możesz łatwo zrozumieć kod. Może być dobrą inspiracją, aby wypróbować niektóre z nich samodzielnie, bez patrzenia na kod.

Wiem wiem. To szalone i nietypowe efekty zawisu i zdaję sobie sprawę, że w większości sytuacji są zbyt duże. Ale tak ćwiczyć i uczyć się CSS. Pamiętaj, my przesuwanie granic efektów najechania CSS. Efekt najechania może być nowością, ale po drodze uczymy się nowych technik, które z pewnością można wykorzystać do innych rzeczy.

Efekty najechania za pomocą CSS mask

Zgadnij co? CSS mask właściwość wykorzystuje gradienty w taki sam sposób, w jaki background właściwość ma, więc zobaczysz, że to, co robimy dalej, jest całkiem proste.

Zacznijmy od wymyślnego podkreślenia.

używam background aby utworzyć zygzakowatą dolną granicę w tym demo. Gdybym chciał zastosować animację do tego podkreślenia, byłoby żmudnym robienie tego za pomocą samych właściwości tła.

Wprowadź CSS mask.

Kod może wyglądać dziwnie, ale logika jest nadal taka sama, jak w przypadku wszystkich poprzednich animacji w tle. The mask składa się z dwóch gradientów. Pierwszy gradient jest zdefiniowany nieprzezroczystym kolorem, który pokrywa obszar zawartości (dzięki content-box wartość). Ten pierwszy gradient sprawia, że ​​tekst jest widoczny i ukrywa dolne zygzakowate obramowanie. content-box jest mask-clip wartość, która zachowuje się tak samo jak background-clip

linear-gradient(#000 0 0) content-box

Drugi gradient obejmie cały obszar (dzięki padding-box). Ten ma szerokość zdefiniowaną za pomocą --_p zmienna i zostanie umieszczona po lewej stronie elementu.

linear-gradient(#000 0 0) 0 / var(--_p, 0%) padding-box

Teraz wystarczy zmienić wartość --_p po najechaniu kursorem, aby utworzyć efekt przesuwania dla drugiego gradientu i odsłonić podkreślenie.

.hover:hover { --_p: 100%; color: var(--c);
}

Poniższe demo używa warstw masek jako tła, aby lepiej zobaczyć, jaka ma miejsce sztuczka. Wyobraź sobie, że zielone i czerwone części są widocznymi częściami elementu, podczas gdy wszystko inne jest przezroczyste. To właśnie zrobi maska, jeśli użyjemy z nią tych samych gradientów.

Dzięki takiej sztuczce możemy łatwo stworzyć wiele wariacji, po prostu używając innej konfiguracji gradientu z mask własność:

Każdy przykład w tym demo używa nieco innej konfiguracji gradientu dla mask. Zwróć też uwagę na separację w kodzie między konfiguracją tła a konfiguracją maski. Mogą być zarządzane i utrzymywane niezależnie.

Zmieńmy konfigurację tła, zastępując podkreślenie zygzakowate podkreśleniem falistym:

Kolejna kolekcja efektów najechania! Zachowałem wszystkie konfiguracje masek i zmieniłem tło, aby stworzyć inny kształt. Teraz możesz zrozumieć, jak mogłem aby osiągnąć 400 efektów najechania bez pseudoelementów — a wciąż możemy mieć więcej!

Na przykład, dlaczego nie coś takiego:

Oto wyzwanie dla Ciebie: Granica w tym ostatnim demo jest gradientem przy użyciu mask własności, aby to ujawnić. Czy potrafisz zrozumieć logikę animacji? Na pierwszy rzut oka może się to wydawać skomplikowane, ale jest bardzo podobne do logiki, którą przyjrzeliśmy się dla większości innych efektów najechania, które opierają się na gradientach. Opublikuj swoje wyjaśnienie w komentarzach!

Efekty najechania w 3D

Możesz pomyśleć, że nie da się stworzyć efektu 3D z jednego elementu (i bez uciekania się do pseudoelementów!), ale CSS ma na to sposób.

To, co widzisz, nie jest prawdziwym efektem 3D, ale raczej idealną iluzją 3D w przestrzeni 2D, która łączy CSS background, clip-path, transform Właściwości.

Pierwszą rzeczą, którą robimy, jest zdefiniowanie naszych zmiennych:

--c: #1095c1; /* color */
--b: .1em; /* border length */
--d: 20px; /* cube depth */

Następnie tworzymy przezroczystą ramkę o szerokościach wykorzystujących powyższe zmienne:

--_s: calc(var(--d) + var(--b));
color: var(--c);
border: solid #0000; /* fourth value sets the color's alpha */
border-width: var(--b) var(--b) var(--_s) var(--_s);

Górna i prawa strona elementu muszą być równe --b wartość, podczas gdy dolna i lewa strona muszą być równe sumie --b i --d (który jest --_s zmienna).

W drugiej części sztuczki musimy zdefiniować jeden gradient, który obejmuje wszystkie zdefiniowane wcześniej obszary graniczne. A conic-gradient będzie działać na to:

background: conic-gradient( at left var(--_s) bottom var(--_s), #0000 90deg,var(--c) 0 ) 0 100% / calc(100% - var(--b)) calc(100% - var(--b)) border-box;

Dodajemy kolejny gradient do trzeciej części triku. Ten użyje dwóch półprzezroczystych wartości koloru białego, które nakładają się na pierwszy poprzedni gradient, aby stworzyć różne odcienie koloru głównego, dając nam iluzję cieniowania i głębi.

conic-gradient( at left var(--d) bottom var(--d), #0000 90deg, rgb(255 255 255 / 0.3) 0 225deg, rgb(255 255 255 / 0.6) 0
) border-box

Ostatnim krokiem jest zastosowanie CSS clip-path aby skrócić rogi, aby uzyskać wrażenie długiego cienia:

clip-path: polygon( 0% var(--d), var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, 0% 100%
)

To wszystko! Właśnie stworzyliśmy prostokąt 3D z tylko dwoma gradientami i clip-path które możemy łatwo dostosować za pomocą zmiennych CSS. Teraz wszystko, co musimy zrobić, to go animować!

Zwróć uwagę na współrzędne z poprzedniego rysunku (wskazane na czerwono). Zaktualizujmy je, aby stworzyć animację:

clip-path: polygon( 0% var(--d), /* reverses var(--d) 0% */ var(--d) 0%, 100% 0%, 100% calc(100% - var(--d)), calc(100% - var(--d)) 100%, /* reverses 100% calc(100% - var(--d)) */ 0% 100% /* reverses var(--d) calc(100% - var(--d)) */
)

Sztuczka polega na ukryciu dolnej i lewej części elementu, aby pozostał tylko prostokątny element bez jakiejkolwiek głębokości.

Ten długopis izoluje clip-path część animacji, aby zobaczyć, co robi:

Ostatnim akcentem jest przesunięcie elementu w przeciwnym kierunku za pomocą translate — a iluzja jest doskonała! Oto efekt przy użyciu różnych wartości właściwości niestandardowych dla różnych głębokości:

Drugi efekt najechania ma tę samą strukturę. Wszystko, co zrobiłem, to zaktualizowanie kilku wartości, aby utworzyć ruch w lewym górnym rogu zamiast w prawym górnym.

Łącząc efekty!

Niesamowitą rzeczą we wszystkim, co omówiliśmy, jest to, że wszystkie się uzupełniają. Oto przykład, w którym dodaję dotychczasowy text-shadow efekt z drugiego artykułu w serii do background technika animacji z pierwszego artykułu podczas korzystania z triku 3D omówiliśmy właśnie:

Rzeczywisty kod może początkowo być mylący, ale przejdź dalej i przeanalizuj go trochę dalej — zauważysz, że jest to po prostu kombinacja tych trzech różnych efektów, w dużym stopniu zmieszanych ze sobą.

Pozwólcie, że zakończę ten artykuł efektem ostatniego najechania, w którym łączę tło, ścieżkę przycinania i kreskę perspective aby zasymulować inny efekt 3D:

Ten sam efekt zastosowałem do obrazów i wynik był całkiem dobry do symulacji 3D z jednym elementem:

Chcesz bliżej przyjrzeć się, jak działa to ostatnie demo? Napisałem coś na ten temat.

Zamykając

Uf, skończyliśmy! Wiem, że jest to bardzo skomplikowane CSS, ale (1) jesteśmy na właściwej stronie do tego typu rzeczy i (2) celem jest przeniesienie naszego zrozumienia różnych właściwości CSS na wyższy poziom poprzez umożliwienie im interakcji z nawzajem.

Być może zastanawiasz się, jaki jest następny krok od tego momentu, gdy kończymy tę małą serię zaawansowanych efektów najechania CSS. Powiedziałbym, że następnym krokiem jest wzięcie wszystkiego, czego się nauczyliśmy, i zastosowanie ich do innych elementów, takich jak przyciski, pozycje menu, linki itp. Utrzymaliśmy rzeczy raczej proste, o ile ograniczyliśmy nasze sztuczki do elementu nagłówka właśnie z tego powodu ; rzeczywisty element nie ma znaczenia. Weź koncepcje i biegaj z nimi, aby tworzyć, eksperymentować i uczyć się nowych rzeczy!

---

Fajne efekty CSS Hover, które wykorzystują przycinanie tła, maski i 3D pierwotnie opublikowany w dniu Sztuczki CSS. Powinieneś pobierz biuletyn.

• Coinsmart. Najlepsza w Europie giełda bitcoinów i kryptowalut.
• Platoblockchain. Web3 Inteligencja Metaverse. Wzmocniona wiedza. DARMOWY DOSTĘP.
• CryptoJastrząb. Radar Altcoin. Bezpłatna wersja próbna.
• Źródło: https://css-tricks.com/css-hover-effects-background-masks-3d/