Coola CSS-hovringseffekter som använder bakgrundsklippning, masker och 3D

Vi har gått igenom en serie inlägg nu om intressanta tillvägagångssätt för CSS-hovringseffekter. Vi började med en massa exempel som använder CSS background egenskaper, gick sedan vidare till text-shadow egendom var tekniskt sett använde vi inga skuggor. Vi kombinerade dem också med CSS-variabler och calc() för att optimera koden och göra den lätt att hantera.

I den här artikeln kommer vi att bygga vidare på dessa två artiklar för att skapa ännu mer komplexa CSS-hovringsanimationer. Vi pratar om bakgrundsklippning, CSS-masker och till och med att bli blöta om fötterna med 3D-perspektiv. Med andra ord, vi ska utforska avancerade tekniker den här gången och tänja på gränserna för vad CSS kan göra med hovringseffekter!

---

Här är bara ett smakprov på vad vi gör:

Hover-effekter med hjälp av background-clip

Låt oss prata om background-clip. Denna CSS-egendom accepterar en text nyckelordsvärde som tillåter oss att tillämpa gradienter på text av ett element istället för det faktiska bakgrund.

Så, till exempel, kan vi ändra färgen på texten när vi svävar på samma sätt som vi skulle använda color egenskap, men så här animerar vi färgändringen:

Allt jag gjorde var att lägga till background-clip: text till elementet och transition d background-position. Behöver inte vara mer komplicerat än så!

Men vi kan bli bättre om vi kombinerar flera gradienter med olika bakgrundsklippvärden.

I det exemplet använder jag två olika gradienter och två värden med background-clip. Den första bakgrundsgradienten klipps till texten (tack vare text värde) för att ställa in färgen vid hovring, medan den andra bakgrundsgradienten skapar den nedre underlinjen (tack vare padding-box värde). Allt annat är direkt kopierat från arbetet vi gjorde i den första artikeln av den här serien.

Vad sägs om en svävningseffekt där stapeln glider uppifrån och ned på ett sätt som ser ut som att texten skannas och sedan färgläggs:

Den här gången ändrade jag storleken på den första gradienten för att skapa linjen. Sedan skjuter jag den med den andra gradienten som uppdaterar textfärgen för att skapa illusionen! Du kan visualisera vad som händer i den här pennan:

Vi har bara skrapat på ytan av vad vi kan göra med vår background-clipping krafter! Den här tekniken är dock troligen något du vill undvika att använda i produktionen, eftersom Firefox är känt för att ha en många rapporterade buggar relaterade till background-clip. Safari har också supportproblem. Det lämnar bara Chrome med solidt stöd för det här, så kanske ha det öppet när vi fortsätter.

Låt oss gå vidare till en annan svävningseffekt med hjälp av background-clip:

Du tycker förmodligen att den här ser superlätt ut jämfört med vad vi just har tagit upp - och du har rätt, det finns inget fancy här. Allt jag gör är att skjuta en gradient samtidigt som jag ökar storleken på en annan.

Men vi är här för att titta på avancerade svävningseffekter, eller hur? Låt oss ändra det lite så att animeringen blir annorlunda när muspekaren lämnar elementet. Samma svävningseffekt, men ett annat slut på animationen:

Coolt eller hur? låt oss dissekera 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 bakgrundslager — två gradienter och background-color definieras med hjälp av --_c variabel som initialt är inställd på transparent (#0000). När vi svävar ändrar vi färgen till vitt och den --_c variabel till huvudfärgen (--c).

Här är vad som händer om det transition: Först tillämpar vi en övergång till allt men vi försenar color och background-color by 0.5s för att skapa glideffekten. Direkt efter det ändrar vi color och background-color. Du kanske inte märker några visuella förändringar eftersom texten redan är vit (tack vare den första övertoningen) och bakgrunden redan är inställd på huvudfärgen (tack vare den andra övertoningen).

Sedan, när musen ut, tillämpar vi en omedelbar ändring på allt (märk på 0s försening), med undantag för color och background-color som har en övergång. Det betyder att vi sätter tillbaka alla gradienter till deras initiala tillstånd. Återigen kommer du förmodligen inte att se några visuella förändringar eftersom texten color och background-color redan ändrats när du svävar.

Till sist applicerar vi blekningen på färg och en background-color för att skapa musen ut-delen av animationen. Jag vet, det kan vara svårt att förstå men du kan bättre visualisera tricket genom att använda olika färger:

Håll muspekaren över ovanstående många gånger och du kommer att se egenskaperna som animeras vid hovring och de som animeras på musen ut. Du kan då förstå hur vi nådde två olika animationer för samma svävningseffekt.

Låt oss inte glömma den DRY-växlingsteknik vi använde i de tidigare artiklarna i den här serien för att minska mängden kod genom att endast använda en variabel för 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;
}

Om du undrar varför jag sträckte mig efter RGB-syntaxen för huvudfärgen så är det för att jag behövde leka med alfatransparensen. Jag använder också variabeln --_t för att minska en överflödig beräkning som används i transition fast egendom.

Innan vi går till nästa del här är fler exempel på svävningseffekter jag gjorde för ett tag sedan som förlitar sig på background-clip. Det skulle vara för långt att detaljera var och en men med det vi har lärt oss hittills kan du enkelt förstå koden. Det kan vara en bra inspiration att prova några av dem ensamma utan att titta på koden.

Jag vet jag vet. Det här är galna och ovanliga svävningseffekter och jag inser att de är för mycket i de flesta situationer. Men det är så här man tränar och lär sig CSS. Kom ihåg, vi driva gränserna av CSS-hovringseffekter. Hover-effekten kan vara en nyhet, men vi lär oss nya tekniker på vägen som med största säkerhet kan användas till andra saker.

Hover-effekter med CSS mask

Gissa vad? CSS mask egenskapen använder gradienter på samma sätt som background Property gör det, så du kommer att se att det vi gör härnäst är ganska okomplicerat.

Låt oss börja med att bygga en snygg understrykning.

Jag använder background för att skapa en sicksackad bottenkant i den demon. Om jag ville använda en animering på den understrykningen, skulle det vara tråkigt att göra det med enbart bakgrundsegenskaper.

Ange CSS mask.

Koden kan se konstig ut men logiken är fortfarande densamma som vi gjorde med alla tidigare bakgrundsanimationer. De mask består av två gradienter. Den första gradienten definieras med en ogenomskinlig färg som täcker innehållsområdet (tack vare content-box värde). Den första gradienten gör texten synlig och döljer den nedre sicksackkanten. content-box är mask-clip värde som beter sig på samma sätt som background-clip

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

Den andra gradienten kommer att täcka hela området (tack vare padding-box). Den här har en bredd som definieras med hjälp av --_p variabel, och den kommer att placeras på vänster sida av elementet.

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

Nu behöver vi bara ändra värdet på --_p på muspekaren för att skapa en glidande effekt för den andra övertoningen och avslöja understrykningen.

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

Följande demo används med masklagren som bakgrunder för att bättre se hur tricket äger rum. Föreställ dig att de gröna och röda delarna är de synliga delarna av elementet medan allt annat är genomskinligt. Det är vad masken kommer att göra om vi använder samma gradienter med den.

Med ett sådant trick kan vi enkelt skapa mycket variation genom att helt enkelt använda en annan gradientkonfiguration med mask fast egendom:

Varje exempel i den demo använder en något annorlunda gradientkonfiguration för mask. Lägg också märke till separationen i koden mellan bakgrundskonfigurationen och maskkonfigurationen. De kan hanteras och underhållas oberoende.

Låt oss ändra bakgrundskonfigurationen genom att ersätta sicksack-underlinjen med en vågig underlinje istället:

Ännu en samling av sväveffekter! Jag behöll alla maskkonfigurationer och ändrade bakgrunden för att skapa en annan form. Nu kan du förstå hur jag kunde för att nå 400 svävningseffekter utan pseudoelement — och vi kan fortfarande ha fler!

Som, varför inte något sånt här:

Här är en utmaning för dig: Gränsen i den sista demon är en gradient som använder mask egendom för att avslöja den. Kan du lista ut logiken bakom animationen? Det kan se komplicerat ut vid första anblicken, men det är superlikt logiken vi har tittat på för de flesta andra hovringseffekter som är beroende av gradienter. Skriv din förklaring i kommentarerna!

Hover-effekter i 3D

Du kanske tror att det är omöjligt att skapa en 3D-effekt med ett enda element (och utan att tillgripa pseudoelement!) men CSS har ett sätt att få det att hända.

Det du ser där är inte en riktig 3D-effekt, utan snarare en perfekt illusion av 3D i 2D-utrymmet som kombinerar CSS background, clip-pathoch transform egenskaper.

Det första vi gör är att definiera våra variabler:

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

Sedan skapar vi en transparent ram med bredder som använder ovanstå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 övre och högra sidan av elementet måste båda vara lika med --b värde medan den nedre och vänstra sidan måste vara lika med summan av --b och --d (vilken är --_s variabel).

För den andra delen av tricket måste vi definiera en gradient som täcker alla gränsområden vi tidigare definierat. A conic-gradient kommer att jobba för 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 lägger till en annan gradient för den tredje delen av tricket. Den här kommer att använda två halvtransparenta vita färgvärden som överlappar den första föregående gradienten för att skapa olika nyanser av huvudfärgen, vilket ger oss en illusion av skuggning och djup.

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 sista steget är att tillämpa en CSS clip-path för att klippa hörnen för den där långa skuggkänslan:

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

Det är allt! Vi har precis gjort en 3D-rektangel med bara två gradienter och en clip-path som vi enkelt kan justera med hjälp av CSS-variabler. Nu behöver vi bara animera det!

Lägg märke till koordinaterna från föregående figur (markerade med rött). Låt oss uppdatera dem för att skapa 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 är att dölja den nedre och vänstra delen av elementet så att allt som återstår är ett rektangulärt element utan något djup.

Denna penna isolerar clip-path del av animationen för att se vad den gör:

Sista handen är att flytta elementet i motsatt riktning med hjälp av translate — och illusionen är perfekt! Här är effekten med olika anpassade egenskapsvärden för olika djup:

Den andra svävningseffekten följer samma struktur. Allt jag gjorde var att uppdatera några värden för att skapa en övre vänstra rörelse istället för en övre höger.

Kombinera effekter!

Det fantastiska med allt vi har tagit upp är att de alla kompletterar varandra. Här är ett exempel där jag lägger till d text-shadow effekt från den andra artikeln i serien till background animationsteknik från den första artikeln när vi använde 3D-tricket som vi just täckte:

Den faktiska koden kan vara förvirrande till en början, men fortsätt och dissekera den lite längre - du kommer att märka att det bara är en kombination av de tre olika effekterna, ganska mycket sammansmälta.

Låt mig avsluta den här artikeln med en sista svävningseffekt där jag kombinerar bakgrund, klippbana och ett streck av perspective för att simulera en annan 3D-effekt:

Jag tillämpade samma effekt på bilder och resultatet var ganska bra för att simulera 3D med ett enda element:

Vill du titta närmare på hur den sista demon fungerar? Jag skrev något om det.

Inslagning upp

Oj, vi är klara! Jag vet, det är mycket knepig CSS men (1) vi är på rätt webbplats för den typen av saker, och (2) målet är att lyfta vår förståelse av olika CSS-egenskaper till nya nivåer genom att tillåta dem att interagera med varandra.

Du kanske frågar vad nästa steg är härifrån nu när vi stänger ut denna lilla serie av avancerade CSS-hoveffekter. Jag skulle säga att nästa steg är att ta allt vi lärt oss och tillämpa dem på andra element, som knappar, menyalternativ, länkar, etc. Vi höll saker och ting ganska enkelt så långt som att begränsa våra knep till ett rubrikelement av den exakta anledningen ; det faktiska elementet spelar ingen roll. Ta koncepten och kör med dem för att skapa, experimentera med och lära dig nya saker!

---

Coola CSS-hovringseffekter som använder bakgrundsklippning, masker och 3D ursprungligen publicerad på CSS-tricks. Du borde få nyhetsbrevet.

• Myntsmart. Europas bästa bitcoin- och kryptobörs.
• Platoblockchain. Web3 Metaverse Intelligence. Kunskap förstärkt. FRI TILLGÅNG.
• CryptoHawk. Altcoin radar. Gratis provperiod.
• Källa: https://css-tricks.com/css-hover-effects-background-masks-3d/