Seje CSS-hovereffekter, der bruger baggrundsklipning, masker og 3D

Vi har nu gennemgået en række indlæg om interessante tilgange til CSS-hovereffekter. Vi startede med en en masse eksempler, der bruger CSS background egenskaber, og gik derefter videre til text-shadow ejendom hvor teknisk set brugte vi ingen skygger. Vi kombinerede dem også med CSS-variabler og calc() at optimere koden og gøre den nem at administrere.

I denne artikel vil vi bygge disse to artikler ud for at skabe endnu mere komplekse CSS-svæveanimationer. Vi taler om baggrundsklip, CSS-masker og endda at blive våde med 3D-perspektiver. Med andre ord, vi skal denne gang udforske avancerede teknikker og skubbe grænserne for, hvad CSS kan gøre med hover-effekter!

---

Her er blot en smagsprøve på, hvad vi laver:

Svæveeffekter ved hjælp af background-clip

Lad os snakke om background-clip. Denne CSS-ejendom accepterer en text søgeordsværdi der giver os mulighed for at anvende gradienter til tekst af et element i stedet for det faktiske baggrund.

Så for eksempel kan vi ændre farven på teksten, når vi svæver, som vi ville bruge color egenskab, men på denne måde animerer vi farveændringen:

Alt jeg gjorde var at tilføje background-clip: text til elementet og transition og background-position. Behøver ikke at være mere kompliceret end det!

Men vi kan gøre det bedre, hvis vi kombinerer flere gradienter med forskellige baggrundsklipningsværdier.

I det eksempel bruger jeg to forskellige gradienter og to værdier med background-clip. Den første baggrundsgradient klippes til teksten (takket være text værdi) for at indstille farven ved svævning, mens den anden baggrundsgradient skaber den nederste understregning (takket være padding-box værdi). Alt andet er direkte kopieret fra det arbejde, vi gjorde i den første artikel af denne serie.

Hvad med en svæveeffekt, hvor bjælken glider fra top til bund på en måde, der ser ud som om teksten er scannet, og derefter farvelagt:

Denne gang ændrede jeg størrelsen på den første gradient for at skabe linjen. Så glider jeg den med den anden gradient, der opdaterer tekstfarven for at skabe illusionen! Du kan visualisere, hvad der sker i denne pen:

Vi har kun ridset overfladen af, hvad vi kan gøre med vores background-clipping-kræfter! Denne teknik er dog sandsynligvis noget, du gerne vil undgå at bruge i produktionen, da Firefox er kendt for at have en mange rapporterede fejl i forbindelse med background-clip. Safari har også supportproblemer. Det efterlader kun Chrome med solid understøttelse af disse ting, så måske har det åbent, mens vi fortsætter.

Lad os gå videre til en anden svæveeffekt ved hjælp af background-clip:

Du synes sikkert, at denne ser super let ud sammenlignet med det, vi lige har dækket - og du har ret, der er ikke noget fancy her. Alt, hvad jeg gør, er at glide en gradient, mens jeg øger størrelsen på en anden.

Men vi er her for at se på avancerede svæveeffekter, ikke? Lad os ændre det lidt, så animationen er anderledes, når musemarkøren forlader elementet. Samme svæveeffekt, men en anden afslutning på animationen:

Cool ikke? lad os dissekere koden:

.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;
}

Vi har tre baggrundslag - to gradienter og background-color defineret vha --_c variabel, som oprindeligt er sat til transparent (#0000). Ved svævning ændrer vi farven til hvid og den --_c variabel til hovedfarven (--c).

Her er hvad der sker på det transition: Først anvender vi en overgang til alt, men vi forsinker color , background-color by 0.5s for at skabe den glidende effekt. Lige efter det ændrer vi color og background-color. Du bemærker muligvis ingen visuelle ændringer, fordi teksten allerede er hvid (takket være den første gradient), og baggrunden allerede er indstillet til hovedfarven (takket være den anden gradient).

Så, når musen er ude, anvender vi en øjeblikkelig ændring på alt (bemærk 0s forsinkelse), bortset fra color , background-color der har en overgang. Det betyder, at vi sætter alle gradienterne tilbage til deres oprindelige tilstande. Igen vil du sandsynligvis ikke se nogen visuelle ændringer, fordi teksten color , background-color allerede ændret ved at hovere.

Til sidst anvender vi fading til farve og en background-color for at oprette musen ud-delen af ​​animationen. Jeg ved godt, det kan være svært at forstå, men du kan bedre visualisere tricket ved at bruge forskellige farver:

Hold musemarkøren over ovenstående mange gange, og du vil se de egenskaber, der animerer på hover og dem, der animerer på musen ud. Du kan derefter forstå, hvordan vi nåede to forskellige animationer til den samme svæveeffekt.

Lad os ikke glemme den DRY switching teknik vi brugte i de tidligere artikler i denne serie for at hjælpe med at reducere mængden af ​​kode ved kun at bruge én variabel til switchen:

.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;
}

Hvis du undrer dig over, hvorfor jeg nåede ud efter RGB-syntaksen for hovedfarven, er det, fordi jeg havde brug for at lege med alfa-gennemsigtigheden. Jeg bruger også variablen --_t at reducere en overflødig beregning anvendt i transition ejendom.

Før vi går videre til næste del, er her flere eksempler på svæveeffekter, jeg lavede for et stykke tid siden, og som er afhængige af background-clip. Det ville være for langt at detaljere hver enkelt, men med det, vi har lært indtil videre, kan du nemt forstå koden. Det kan være en god inspiration at prøve nogle af dem alene uden at kigge på koden.

Jeg ved, jeg ved det. Disse er skøre og ualmindelige svæveeffekter, og jeg er klar over, at de er for meget i de fleste situationer. Men det er sådan man øver og lærer CSS. Husk, vi skubbe grænserne af CSS hover-effekter. Svæveeffekten er måske en nyhed, men vi lærer nye teknikker hen ad vejen, som helt sikkert kan bruges til andre ting.

Hover-effekter ved hjælp af CSS mask

Gæt hvad? CSS mask egenskaben bruger gradienter på samme måde som background ejendom gør, så du vil se, at det næste, vi laver, er ret ligetil.

Lad os starte med at bygge en fancy understregning.

Jeg bruger background for at skabe en zig-zag bundkant i den demo. Hvis jeg ville anvende en animation til den understregning, ville det være trættende at gøre det ved at bruge baggrundsegenskaber alene.

Indtast CSS mask.

Koden ser måske mærkelig ud, men logikken er stadig den samme, som vi gjorde med alle de tidligere baggrundsanimationer. Det mask er sammensat af to gradienter. Den første gradient er defineret med en uigennemsigtig farve, der dækker indholdsområdet (takket være content-box værdi). Den første gradient gør teksten synlig og skjuler den nederste zig-zag-kant. content-box er mask-clip værdi, der opfører sig det samme som background-clip

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

Den anden gradient vil dække hele området (takket være padding-box). Denne har en bredde, der er defineret ved hjælp af --_p variabel, og den vil blive placeret på venstre side af elementet.

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

Nu skal vi bare ændre værdien af --_p på svæv for at skabe en glidende effekt for den anden gradient og afsløre understregningen.

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

Følgende demo bruger maskelagene som baggrunde for bedre at se tricket finde sted. Forestil dig, at de grønne og røde dele er de synlige dele af elementet, mens alt andet er gennemsigtigt. Det er, hvad masken vil gøre, hvis vi bruger de samme gradienter med den.

Med sådan et trick kan vi nemt skabe en masse variation ved blot at bruge en anden gradientkonfiguration med mask ejendom:

Hvert eksempel i den demo bruger en lidt anderledes gradientkonfiguration for mask. Bemærk også adskillelsen i koden mellem baggrundskonfigurationen og maskekonfigurationen. De kan administreres og vedligeholdes uafhængigt.

Lad os ændre baggrundskonfigurationen ved at erstatte zig-zag-understregningen med en bølget understregning i stedet:

Endnu en samling af svæveeffekter! Jeg beholdt alle maskekonfigurationerne og ændrede baggrunden for at skabe en anden form. Nu kan du forstå, hvordan jeg kunne for at nå 400 svæveeffekter uden pseudo-elementer - og vi kan stadig have flere!

Som, hvorfor ikke noget som dette:

Her er en udfordring til dig: Grænsen i den sidste demo er en gradient ved hjælp af mask ejendom til at afsløre det. Kan du finde ud af logikken bag animationen? Det ser måske komplekst ud ved første øjekast, men det ligner meget den logik, vi har set på for de fleste andre svæveeffekter, der er afhængige af gradienter. Skriv din forklaring i kommentarerne!

Hover-effekter i 3D

Du tror måske, det er umuligt at skabe en 3D-effekt med et enkelt element (og uden at ty til pseudo-elementer!), men CSS har en måde at få det til at ske.

Det, du ser der, er ikke en rigtig 3D-effekt, men snarere en perfekt illusion af 3D i 2D-rummet, der kombinerer CSS background, clip-pathog transform egenskaber.

Den første ting vi gør er at definere vores variabler:

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

Derefter opretter vi en gennemsigtig kant med bredder, der bruger ovenstående variabler:

--_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);

Den øverste og højre side af elementet skal begge være lig med --b værdi, mens den nederste og venstre side skal svare til summen af --b , --d (som er --_s variabel).

Til den anden del af tricket skal vi definere en gradient, der dækker alle de grænseområder, vi tidligere har defineret. EN conic-gradient vil arbejde for det:

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;

Vi tilføjer en anden gradient til den tredje del af tricket. Denne vil bruge to semi-transparente hvide farveværdier, der overlapper den første tidligere gradient for at skabe forskellige nuancer af hovedfarven, hvilket giver os en illusion af skygge og dybde.

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

Det sidste trin er at anvende en CSS clip-path for at skære hjørnerne for at føle den lange skygge:

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

Det er alt! Vi har lige lavet et 3D-rektangel med kun to gradienter og en clip-path at vi nemt kan justere ved hjælp af CSS-variabler. Nu skal vi bare animere det!

Læg mærke til koordinaterne fra den foregående figur (angivet med rødt). Lad os opdatere dem for at oprette animationen:

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)) */
)

Tricket er at skjule den nederste og venstre del af elementet, så det eneste, der er tilbage, er et rektangulært element uden nogen som helst dybde.

Denne pen isolerer clip-path del af animationen for at se, hvad den laver:

Den sidste touch er at flytte elementet i den modsatte retning vha translate — og illusionen er perfekt! Her er effekten ved hjælp af forskellige brugerdefinerede egenskabsværdier for forskellige dybder:

Den anden svæveeffekt følger samme struktur. Alt, hvad jeg gjorde, var at opdatere et par værdier for at skabe en øverste venstre bevægelse i stedet for en øverste højre.

Kombinere effekter!

Det fantastiske ved alt, hvad vi har dækket, er, at de alle supplerer hinanden. Her er et eksempel, hvor jeg tilføjer og text-shadow virkning fra den anden artikel i serien til background animationsteknik fra den første artikel mens vi brugte 3D-tricket, vi lige har dækket:

Den faktiske kode kan være forvirrende i starten, men fortsæt og disseker den lidt længere - du vil bemærke, at det kun er en kombination af disse tre forskellige effekter, stort set smadret sammen.

Lad mig afslutte denne artikel med en sidste svæveeffekt, hvor jeg kombinerer baggrund, klipsti og et strejf af perspective for at simulere en anden 3D-effekt:

Jeg anvendte den samme effekt på billeder, og resultatet var ret godt til at simulere 3D med et enkelt element:

Vil du se nærmere på, hvordan den sidste demo fungerer? Jeg skrev noget om det.

Indpakning op

Øv, vi er færdige! Jeg ved godt, det er meget vanskelig CSS, men (1) vi er på den rigtige hjemmeside til den slags, og (2) målet er at skubbe vores forståelse af forskellige CSS-egenskaber til nye niveauer ved at give dem mulighed for at interagere med hinanden.

Du spørger måske, hvad det næste skridt er herfra, nu hvor vi lukker denne lille serie af avancerede CSS-hovereffekter ud. Jeg vil sige, at det næste trin er at tage alt det, vi har lært, og anvende dem på andre elementer, såsom knapper, menupunkter, links osv. Vi holdt tingene ret enkle, så vidt vi begrænsede vores tricks til et overskriftselement af netop den grund. ; det faktiske element er ligegyldigt. Tag koncepterne og løb med dem for at skabe, eksperimentere med og lære nye ting!

---

Seje CSS-hovereffekter, der bruger baggrundsklipning, masker og 3D oprindeligt udgivet den CSS-tricks. Du burde få nyhedsbrevet.

• Coinsmart. Europas bedste Bitcoin og Crypto Exchange.
• Platoblokkæde. Web3 Metaverse Intelligence. Viden forstærket. FRI ADGANG.
• CryptoHawk. Altcoin radar. Gratis prøveversion.
• Kilde: https://css-tricks.com/css-hover-effects-background-masks-3d/