Lahedad CSS-i hõljukefektid, mis kasutavad taustalõikamist, maske ja 3D-d

Oleme nüüd läbi käinud mitmeid postitusi huvitavate lähenemisviiside kohta CSS-i hõljutusefektidele. Alustasime a hulk näiteid, mis kasutavad CSS-i background omadused, seejärel liikus edasi lehele text-shadow vara kus me tehniliselt varje ei kasutanud. Samuti kombineerisime need CSS-i muutujatega ja calc() koodi optimeerimiseks ja hõlpsaks haldamiseks.

Selles artiklis koostame need kaks artiklit, et luua veelgi keerukamaid CSS-i hõljumise animatsioone. Me räägime taustalõikamisest, CSS-maskidest ja isegi jalgade märjaks saamisest 3D-perspektiiviga. Teisisõnu, uurime seekord täiustatud tehnikaid ja nihutame CSS-i piire hõljumise efektidega!

---

Siin on vaid väike osa meie tegemistest:

Hõljutusefektide kasutamine background-clip

Räägime background-clip. See CSS-i atribuut aktsepteerib a text märksõna väärtus mis võimaldab meil rakendada gradiente tekst elemendi tegeliku asemel tagapõhi.

Näiteks saame kursorit hõljutades muuta teksti värvi, nagu kasutaksime color omadus, kuid sel viisil animeerime värvimuutust:

Kõik, mida ma tegin, oli lisamine background-clip: text elemendile ja transition the,en background-position. See ei pea olema sellest keerulisem!

Kuid saame paremini hakkama, kui kombineerime mitu gradienti erinevate taustalõikeväärtustega.

Selles näites kasutan kahte erinevat gradienti ja kahte väärtust background-clip. Esimene taustagradient kärbitakse teksti külge (tänu text väärtus), et määrata värv hõljutamisel, samal ajal kui teine ​​taustagradient loob alumise allakriipsu (tänu padding-box väärtus). Kõik muu on otse kopeeritud töö, mida tegime esimeses artiklis sellest sarjast.

Kuidas oleks hõljumise efektiga, kus riba libiseb ülalt alla nii, et tekst on skannitud ja seejärel värvitud:

Seekord muutsin joone loomiseks esimese gradiendi suurust. Seejärel libistan selle teise gradiendiga, mis värskendab illusiooni loomiseks teksti värvi! Saate visualiseerida, mis selles pliiatsis toimub:

Oleme ainult kriimustanud, mida saame omaga teha background-clippingi volitused! Tõenäoliselt soovite seda tehnikat tootmises vältida, kuna Firefoxil on teadaolevalt a palju teatatud vigu seotud background-clip. Safaril on ka tugiprobleeme. See jätab ainult Chrome'ile nende asjade jaoks kindla toe, nii et võib-olla jäta see jätkamiseks lahti.

Liigume edasi teise hõljumise efekti juurde background-clip:

Tõenäoliselt arvate, et see tundub ülilihtne võrreldes sellega, mida me just käsitlesime – ja teil on õigus, siin pole midagi uhket. Kõik, mida ma teen, on ühe gradiendi libistamine, suurendades samal ajal teise suurust.

Kuid me oleme siin selleks, et vaadata täiustatud hõljumise efekte, eks? Muudame seda veidi, et animatsioon oleks erinev, kui hiirekursor elemendist lahkub. Sama hõljumise efekt, kuid animatsiooni lõpp on erinev:

Lahe eks? lahkame koodi:

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

Meil on kolm taustakihti – kaks gradienti ja background-color määratletud kasutades --_c muutuja, mis on algselt määratud läbipaistvaks (#0000). Hõljutades muudame värvi valgeks ja --_c muutuv põhivärvi järgi (--c).

Siin on, mis sellega seoses toimub transition: Esiteks rakendame üleminekut kõigele, kuid lükkame edasi color ja background-color by 0.5s libiseva efekti loomiseks. Vahetult pärast seda muudame color ja background-color. Te ei pruugi visuaalseid muutusi märgata, kuna tekst on juba valge (tänu esimesele gradiendile) ja taust on juba põhivärvile seatud (tänu teisele gradiendile).

Seejärel, kui hiir välja lülitatakse, rakendame kõigele kohese muudatuse (pange tähele 0s viivitus), välja arvatud color ja background-color millel on üleminek. See tähendab, et paneme kõik gradiendid tagasi nende algolekusse. Jällegi, tõenäoliselt ei näe te teksti tõttu visuaalseid muutusi color ja background-color juba kursori hõljumisel muudetud.

Viimasena rakendame pleekimise värvile ja a background-color animatsiooni hiire eemaldamise osa loomiseks. Ma tean, et sellest võib olla keeruline aru saada, kuid saate triki paremini visualiseerida, kasutades erinevaid värve:

Hõljutage ülaltoodud kursorit palju kordi ja näete atribuute, mis animeerivad kursorit hõljutades, ja neid, mis animeerivad hiirt väljas. Seejärel saate aru, kuidas jõudsime sama hõljutusefekti jaoks kahe erineva animatsioonini.

Ärgem unustagem meie kasutatud DRY lülitustehnika selle seeria eelmistes artiklites, et aidata vähendada koodi hulka, kasutades lüliti jaoks ainult ühte muutujat:

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

Kui mõtlete, miks ma põhivärvi jaoks RGB-süntaksi poole võtsin, siis sellepärast, et mul oli vaja mängida alfa-läbipaistvusega. Kasutan ka muutujat --_t et vähendada üleliigset arvutust, mida kasutatakse transition vara.

Enne järgmise osa juurde liikumist on siin veel näiteid hõljutusefektidest, mida ma mõni aeg tagasi tegin ja millele tuginen background-clip. Iga üksikasjade kirjeldamine oleks liiga pikk, kuid selle põhjal, mida oleme seni õppinud, saate koodist hõlpsasti aru. Võib olla hea inspiratsioon proovida mõnda neist üksi ilma koodi vaatamata.

Ma tean, ma tean. Need on pöörased ja ebatavalised hõljumise efektid ja ma mõistan, et enamikus olukordades on neid liiga palju. Kuid nii saab CSS-i harjutada ja õppida. Pea meeles, meie nihutades piire CSS-i hõljutusefektidest. Hõljumise efekt võib olla uudne, kuid me õpime selle käigus uusi tehnikaid, mida saab kindlasti kasutada muude asjade jaoks.

Hõljutage efekte CSS-i abil mask

Arva ära? CSS mask atribuut kasutab gradiente samamoodi background kinnisvara teeb, nii et näete, et see, mida me järgmisena teeme, on üsna lihtne.

Alustame uhke allajoonimisega.

ma kasutan background et luua demos siksakiline alumine piir. Kui ma tahaksin sellele allajoonimisele animatsiooni rakendada, oleks tüütu seda teha ainult taustaomadusi kasutades.

Sisestage CSS mask.

Kood võib tunduda kummaline, kuid loogika on endiselt sama, mis kõigi eelmiste taustaanimatsioonide puhul. The mask koosneb kahest gradiendist. Esimene gradient on määratletud läbipaistmatu värviga, mis katab sisuala (tänu content-box väärtus). See esimene gradient muudab teksti nähtavaks ja peidab alumise siksakilise äärise. content-box on mask-clip väärtus, mis käitub samamoodi nagu background-clip

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

Teine gradient katab kogu ala (tänu padding-box). Selle laius on määratletud kasutades --_p muutuja ja see paigutatakse elemendi vasakule küljele.

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

Nüüd on meil vaja ainult väärtust muuta --_p hõljutage kursorit, et luua teise gradiendi jaoks libisev efekt ja paljastada allajoon.

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

Järgmises demos kasutatakse maskikihte taustana, et trikk paremini näha. Kujutage ette, et roheline ja punane osa on elemendi nähtavad osad, samas kui kõik muu on läbipaistev. Seda teeb mask, kui kasutame sellega samu gradiente.

Sellise nipi abil saame hõlpsasti luua palju variatsioone, kasutades lihtsalt koos mask Vara:

Iga näide selles demos kasutab veidi erinevat gradiendi konfiguratsiooni mask. Pange tähele ka tausta konfiguratsiooni ja maski konfiguratsiooni eraldamist koodis. Neid saab iseseisvalt hallata ja hooldada.

Muudame tausta konfiguratsiooni, asendades siksakilise allajoone hoopis lainelise allajoonega:

Veel üks hõljukefektide kogu! Jätsin kõik maski konfiguratsioonid alles ja muutsin tausta, et luua teistsugune kuju. Nüüd saate aru, kuidas ma suutsin 400 hõljumise efekti saavutamiseks ilma pseudoelementideta — ja meil võib ikka rohkem olla!

Näiteks, miks mitte midagi sellist:

Siin on teile väljakutse: Viimase demo ääris on gradient, mis kasutab mask vara seda paljastada. Kas saate aru animatsiooni taga olevast loogikast? See võib esmapilgul tunduda keeruline, kuid on ülimalt sarnane loogikaga, mida oleme vaadanud enamiku muude gradientidele tuginevate hõljumise efektide puhul. Postita oma selgitus kommentaaridesse!

Hõljutusefektid 3D-s

Võib arvata, et 3D-efekti on võimatu luua ühe elemendiga (ja ilma pseudoelemente kasutamata!), kuid CSS-il on viis selle elluviimiseks.

See, mida te seal näete, ei ole tõeline 3D-efekt, vaid täiuslik 3D-illusioon 2D-ruumis, mis ühendab CSS-i. background, clip-pathja transform omadused.

Esimene asi, mida me teeme, on oma muutujate määratlemine:

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

Seejärel loome läbipaistva äärise laiustega, mis kasutavad ülaltoodud muutujaid:

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

Elemendi ülemine ja parem külg peavad olema võrdsed --b väärtus, samas kui alumine ja vasak pool peavad olema võrdne summaga --b ja --d (mis on --_s muutuja).

Triki teise osa jaoks peame määratlema ühe gradiendi, mis katab kõik eelnevalt määratletud piirialad. A conic-gradient töötab selle nimel:

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;

Triki kolmanda osa jaoks lisame veel ühe gradiendi. See kasutab kahte poolläbipaistvat valget värvi väärtust, mis kattuvad esimese eelmise gradiendiga, et luua põhivärvi erinevaid toone, andes meile illusiooni varjutusest ja sügavusest.

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

Viimane samm on rakendada a CSS clip-path nurkade lõikamiseks selle pika varju tundmiseks:

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

See on kõik! Tegime just 3D-ristküliku, millel pole muud kui kaks gradienti ja a clip-path mida saame CSS-i muutujate abil hõlpsasti kohandada. Nüüd jääb meil vaid see animeerida!

Pange tähele eelmise joonise koordinaate (tähistatud punasega). Värskendame neid animatsiooni loomiseks:

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

Trikk on peita elemendi alumine ja vasakpoolne osa, nii et järele jääb vaid ristkülikukujuline element, millel puudub igasugune sügavus.

See pliiats isoleerib clip-path animatsiooni osa, et näha, mida see teeb:

Viimane puudutus on liigutada elementi kasutades vastassuunas translate - ja illusioon on täiuslik! Siin on efekt erinevate kohandatud atribuutide väärtuste kasutamisel erineva sügavuse jaoks:

Teine hõljumise efekt järgib sama struktuuri. Kõik, mida ma tegin, on värskendada mõnda väärtust, et luua ülemise parempoolse liikumise asemel vasak ülaosa.

Efektide kombineerimine!

Kõige selle juures, mida oleme käsitlenud, on suurepärane see, et need kõik täiendavad üksteist. Siin on näide, kuhu ma lisan the,en text-shadow mõju teisest artiklist sarjas kuni background animatsioonitehnika esimesest artiklist 3D-trikki kasutades, mida me just käsitlesime:

Tegelik kood võib alguses segadust tekitada, kuid lahkake seda veidi edasi – märkate, et see on kõigest nende kolme erineva efekti kombinatsioon, mis on üsna kokku segatud.

Lubage mul lõpetada see artikkel viimase hõljumise efektiga, kus kombineerin tausta, lõiketee ja kriipsu perspective teise 3D-efekti simuleerimiseks:

Rakendasin sama efekti piltidele ja tulemus oli päris hea ühe elemendiga 3D simuleerimiseks:

Kas soovite lähemalt vaadata, kuidas see viimane demo töötab? Kirjutasin selle peale midagi.

Pakke kuni

Oeh, oleme valmis! Ma tean, see on palju keerulist CSS-i, kuid (1) oleme selliste asjade jaoks õigel veebisaidil ja (2) eesmärk on viia meie arusaam erinevatest CSS-i omadustest uuele tasemele, võimaldades neil suhelda üksteist.

Võib-olla küsite, milline on järgmine samm siit nüüd, kui sulgeme selle väikese täiustatud CSS-i hõljumise efektide seeria. Ütleksin, et järgmine samm on võtta kõik õpitu ja rakendada neid muude elementide puhul, nagu nupud, menüüelemendid, lingid jne. Pidasime asjad üsna lihtsaks, kuna piirasime oma nipid pealkirjaelemendiga just sel põhjusel. ; tegelik element ei oma tähtsust. Võtke kontseptsioonid ja jookske nendega, et luua, katsetada ja õppida uusi asju!

---

Lahedad CSS-i hõljukefektid, mis kasutavad taustalõikamist, maske ja 3D-d algselt avaldatud CSS-nipid. Sa peaksid hankige uudiskiri.

• Münditark. Euroopa parim Bitcoini ja krüptobörs.
• Platoblockchain. Web3 metaversiooni intelligentsus. Täiustatud teadmised. TASUTA PÄÄS.
• CryptoHawk. Altcoini radar. Tasuta prooviversioon.
• Allikas: https://css-tricks.com/css-hover-effects-background-masks-3d/