Kule CSS-hovereffekter som bruker bakgrunnsklipp, masker og 3D

Vi har gått gjennom en serie innlegg nå om interessante tilnærminger til CSS-hovereffekter. Vi startet med en mange eksempler som bruker CSS background egenskaper, og gikk deretter videre til text-shadow eiendom hvor teknisk sett brukte vi ingen skygger. Vi kombinerte dem også med CSS-variabler og calc() for å optimalisere koden og gjøre den enkel å administrere.

I denne artikkelen vil vi bygge videre på disse to artiklene for å lage enda mer komplekse CSS-sveveanimasjoner. Vi snakker om bakgrunnsklipp, CSS-masker og til og med å bli våte med 3D-perspektiver. Med andre ord, vi skal utforske avanserte teknikker denne gangen og flytte grensene for hva CSS kan gjøre med sveveeffekter!

---

Her er bare en smakebit på det vi lager:

Hover-effekter ved hjelp av background-clip

La oss snakke om background-clip. Denne CSS-egenskapen godtar en text søkeordverdi som lar oss bruke gradienter på tekst av et element i stedet for det faktiske bakgrunn.

Så, for eksempel, kan vi endre fargen på teksten ved å holde musepekeren på samme måte som vi ville brukt color egenskap, men på denne måten animerer vi fargeendringen:

Alt jeg gjorde var å legge til background-clip: text til elementet og transition de background-position. Trenger ikke være mer komplisert enn det!

Men vi kan gjøre det bedre hvis vi kombinerer flere gradienter med forskjellige bakgrunnsklippingsverdier.

I det eksemplet bruker jeg to forskjellige gradienter og to verdier med background-clip. Den første bakgrunnsgradienten klippes til teksten (takket være text verdi) for å angi fargen ved peker, mens den andre bakgrunnsgradienten lager den nederste understrekingen (takket være padding-box verdi). Alt annet er rett opp kopiert fra arbeidet vi gjorde i den første artikkelen av denne serien.

Hva med en sveveeffekt der linjen glir fra topp til bunn på en måte som ser ut som om teksten er skannet, og deretter farget inn:

Denne gangen endret jeg størrelsen på den første gradienten for å lage linjen. Så skyver jeg den med den andre gradienten som oppdaterer tekstfargen for å skape illusjonen! Du kan visualisere hva som skjer i denne pennen:

Vi har bare skrapet i overflaten av hva vi kan gjøre med vår background-clipping-krefter! Imidlertid er denne teknikken sannsynligvis noe du vil unngå å bruke i produksjon, ettersom Firefox er kjent for å ha en mange rapporterte feil Relatert til background-clip. Safari har også støtteproblemer. Det gir bare Chrome solid støtte for disse tingene, så kanskje ha den åpen mens vi fortsetter.

La oss gå videre til en annen sveveeffekt ved å bruke background-clip:

Du synes sannsynligvis at denne ser superenkel ut sammenlignet med det vi nettopp har dekket - og du har rett, det er ikke noe fancy her. Alt jeg gjør er å skyve en gradient mens jeg øker størrelsen på en annen.

Men vi er her for å se på avanserte sveveeffekter, ikke sant? La oss endre det litt slik at animasjonen blir annerledes når musepekeren forlater elementet. Samme sveveeffekt, men en annen slutt på animasjonen:

Kult ikke sant? la oss 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 bakgrunnslag - to gradienter og background-color definert ved hjelp av --_c variabel som i utgangspunktet er satt til transparent (#0000). Ved sveving endrer vi fargen til hvit og den --_c variabel til hovedfargen (--c).

Her er hva som skjer på det transition: Først bruker vi en overgang til alt, men vi utsetter color og background-color by 0.5s for å lage glideeffekten. Rett etter det endrer vi color og background-color. Du vil kanskje ikke merke noen visuelle endringer fordi teksten allerede er hvit (takket være den første gradienten) og bakgrunnen allerede er satt til hovedfargen (takket være den andre gradienten).

Så, når musen er ute, bruker vi en umiddelbar endring på alt (legg merke til 0s forsinkelse), bortsett fra color og background-color som har en overgang. Dette betyr at vi setter alle gradientene tilbake til deres opprinnelige tilstander. Igjen, du vil sannsynligvis ikke se noen visuelle endringer fordi teksten color og background-color allerede endret ved pekeren.

Til slutt bruker vi fading på farge og en background-color for å lage musen ut-delen av animasjonen. Jeg vet, det kan være vanskelig å forstå, men du kan bedre visualisere trikset ved å bruke forskjellige farger:

Hold musepekeren ovenfor mange ganger, og du vil se egenskapene som animerer ved hover og de som animerer på musen ut. Du kan da forstå hvordan vi nådde to forskjellige animasjoner for samme sveveeffekt.

La oss ikke glemme TØRR bytteteknikken vi brukte i de forrige artiklene i denne serien for å redusere kodemengden ved å bruke bare én variabel for bryteren:

.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 lurer på hvorfor jeg nådde etter RGB-syntaksen for hovedfargen, er det fordi jeg trengte å leke med alfa-transparensen. Jeg bruker også variabelen --_t å redusere en overflødig beregning som brukes i transition eiendom.

Før vi går til neste del her er flere eksempler på sveveeffekter jeg gjorde for en stund siden som er avhengige av background-clip. Det ville være for langt å detaljere hver enkelt, men med det vi har lært så langt kan du enkelt forstå koden. Det kan være en god inspirasjon å prøve noen av dem alene uten å se på koden.

Jeg vet jeg vet. Dette er sprø og uvanlige sveveeffekter, og jeg skjønner at de er for mye i de fleste situasjoner. Men dette er hvordan du kan øve og lære CSS. Husk, vi presser grensene av CSS sveveeffekter. Hover-effekten er kanskje en nyhet, men vi lærer nye teknikker underveis som helt sikkert kan brukes til andre ting.

Hover-effekter ved hjelp av CSS mask

Gjett hva? CSS mask egenskapen bruker gradienter på samme måte som background eiendom gjør det, så du vil se at det vi lager neste gang er ganske enkelt.

La oss starte med å lage en fancy understreking.

jeg bruker background for å lage en sikk-sakk bunnkant i den demoen. Hvis jeg ønsket å bruke en animasjon på den understrekingen, ville det vært kjedelig å gjøre det med bakgrunnsegenskaper alene.

Skriv inn CSS mask.

Koden kan se merkelig ut, men logikken er fortsatt den samme som vi gjorde med alle de tidligere bakgrunnsanimasjonene. De mask er sammensatt av to gradienter. Den første gradienten er definert med en ugjennomsiktig farge som dekker innholdsområdet (takket være content-box verdi). Den første gradienten gjør teksten synlig og skjuler den nederste sikk-sakk-kanten. content-box er den mask-clip verdi som oppfører seg på samme måte som background-clip

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

Den andre gradienten vil dekke hele området (takket være padding-box). Denne har en bredde som er definert ved hjelp av --_p variabel, og den vil bli plassert på venstre side av elementet.

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

Nå er alt vi trenger å gjøre å endre verdien av --_p ved å holde musepekeren for å lage en glidende effekt for den andre gradienten og avsløre understreken.

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

Følgende demo brukes med maskelagene som bakgrunn for å bedre se trikset som finner sted. Tenk deg at de grønne og røde delene er de synlige delene av elementet mens alt annet er gjennomsiktig. Det er det masken vil gjøre hvis vi bruker de samme gradientene med den.

Med et slikt triks kan vi enkelt lage mye variasjon ved ganske enkelt å bruke en annen gradientkonfigurasjon med mask eiendom:

Hvert eksempel i den demoen bruker en litt annen gradientkonfigurasjon for mask. Legg også merke til skillet i koden mellom bakgrunnskonfigurasjonen og maskekonfigurasjonen. De kan administreres og vedlikeholdes uavhengig.

La oss endre bakgrunnskonfigurasjonen ved å erstatte sikksakk-understreken med en bølget understreking i stedet:

Nok en samling av sveveeffekter! Jeg beholdt alle maskekonfigurasjonene og endret bakgrunnen for å lage en annen form. Nå kan du forstå hvordan jeg klarte det for å nå 400 sveveeffekter uten pseudo-elementer - og vi kan fortsatt ha flere!

Som, hvorfor ikke noe sånt som dette:

Her er en utfordring for deg: Grensen i den siste demoen er en gradient som bruker mask eiendom for å avsløre den. Kan du finne ut logikken bak animasjonen? Det kan se komplekst ut ved første øyekast, men det er veldig likt logikken vi har sett på for de fleste andre sveveeffekter som er avhengige av gradienter. Legg ut forklaringen din i kommentarfeltet!

Hover-effekter i 3D

Du tror kanskje det er umulig å lage en 3D-effekt med et enkelt element (og uten å ty til pseudo-elementer!), men CSS har en måte å få det til.

Det du ser der er ikke en ekte 3D-effekt, men snarere en perfekt illusjon av 3D i 2D-rommet som kombinerer CSS background, clip-pathog transform egenskaper.

Det første vi gjør er å definere variablene våre:

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

Deretter lager vi en gjennomsiktig kantlinje med bredder som bruker variablene ovenfor:

--_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øyre siden av elementet må begge være lik --b verdi mens bunnen og venstre side må være lik summen av --b og --d (hvilken er den --_s variabel).

For den andre delen av trikset må vi definere en gradient som dekker alle grenseområdene vi tidligere definerte. EN conic-gradient vil jobbe 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 legger til en annen gradient for den tredje delen av trikset. Denne vil bruke to semi-transparente hvite fargeverdier som overlapper den første forrige gradienten for å lage forskjellige nyanser av hovedfargen, noe som gir oss en illusjon av skyggelegging 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 siste trinnet er å bruke en CSS clip-path for å kutte hjørnene for den lange skyggefølelsen:

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 nettopp laget et 3D-rektangel uten annet enn to gradienter og en clip-path som vi enkelt kan justere ved hjelp av CSS-variabler. Nå, alt vi trenger å gjøre er å animere det!

Legg merke til koordinatene fra forrige figur (angitt i rødt). La oss oppdatere disse for å lage animasjonen:

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

Trikset er å skjule den nederste og venstre delen av elementet, slik at alt som er igjen er et rektangulært element uten dybde overhodet.

Denne pennen isolerer clip-path del av animasjonen for å se hva den gjør:

Siste touch er å flytte elementet i motsatt retning ved å bruke translate — og illusjonen er perfekt! Her er effekten ved å bruke forskjellige egendefinerte egenskapsverdier for varierende dybder:

Den andre sveveeffekten følger samme struktur. Alt jeg gjorde var å oppdatere noen verdier for å lage en øvre venstre bevegelse i stedet for en øverst til høyre.

Kombinere effekter!

Det fantastiske med alt vi har dekket er at de alle utfyller hverandre. Her er et eksempel der jeg legger til de text-shadow effekt fra den andre artikkelen i serien til background animasjonsteknikk fra den første artikkelen mens vi brukte 3D-trikset vi nettopp dekket:

Den faktiske koden kan være forvirrende i begynnelsen, men fortsett og disseker den litt videre - du vil legge merke til at det bare er en kombinasjon av de tre forskjellige effektene, ganske mye sammen.

La meg avslutte denne artikkelen med en siste sveveeffekt der jeg kombinerer bakgrunn, klippbane og en dash av perspective for å simulere en annen 3D-effekt:

Jeg brukte den samme effekten på bilder, og resultatet var ganske bra for å simulere 3D med et enkelt element:

Vil du se nærmere på hvordan den siste demoen fungerer? Jeg skrev noe om det.

Innpakning opp

Uff, vi er ferdige! Jeg vet, det er mye vanskelig CSS, men (1) vi er på den rette nettsiden for den slags ting, og (2) målet er å løfte vår forståelse av forskjellige CSS-egenskaper til nye nivåer ved å la dem samhandle med hverandre.

Du spør kanskje hva neste trinn er herfra nå som vi avslutter denne lille serien med avanserte CSS-hovereffekter. Jeg vil si at neste trinn er å ta alt vi har lært og bruke dem på andre elementer, som knapper, menyelementer, lenker osv. Vi holdt ting ganske enkelt så langt som å begrense triksene våre til et overskriftselement av den nøyaktige grunnen ; det faktiske elementet spiller ingen rolle. Ta konseptene og løp med dem for å skape, eksperimentere med og lære nye ting!

---

Kule CSS-hovereffekter som bruker bakgrunnsklipp, masker og 3D opprinnelig publisert på CSS-triks. Du burde få nyhetsbrevet.

• Myntsmart. Europas beste Bitcoin og Crypto Exchange.
• Platoblokkkjede. Web3 Metaverse Intelligence. Kunnskap forsterket. FRI TILGANG.
• CryptoHawk. Altcoin Radar. Gratis prøveperiode.
• Kilde: https://css-tricks.com/css-hover-effects-background-masks-3d/