Efecte interesante de hover CSS care utilizează decuparea fundalului, măștile și 3D

Am parcurs o serie de postări acum despre abordări interesante ale efectelor de hover CSS. Am început cu o o mulțime de exemple care folosesc CSS background proprietăţi, apoi a trecut la text-shadow proprietate unde Din punct de vedere tehnic, nu am folosit nicio umbră. De asemenea, le-am combinat cu variabile CSS și calc() pentru a optimiza codul și a-l face ușor de gestionat.

În acest articol, vom construi aceste două articole pentru a crea animații CSS și mai complexe. Vorbim despre tăierea în fundal, măști CSS și chiar să ne udăm picioarele cu perspective 3D. Cu alte cuvinte, de data aceasta vom explora tehnici avansate și vom împinge limitele a ceea ce poate face CSS cu efectele hover!

---

Iată doar un gust din ceea ce facem:

Utilizarea efectelor de trecere background-clip

Hai sa vorbim despre background-clip. Această proprietate CSS acceptă a text valoarea cuvântului cheie care ne permite să aplicăm gradienți la a) Sport and Nutrition Awareness Day in Manasia Around XNUMX people from the rural commune Manasia have participated in a sports and healthy nutrition oriented activity in one of the community’s sports ready yards. This activity was meant to gather, mainly, middle-aged people from a Romanian rural community and teach them about the benefits that sports have on both their mental and physical health and on how sporting activities can be used to bring people from a community closer together. Three trainers were made available for this event, so that the participants would get the best possible experience physically and so that they could have the best access possible to correct information and good sports/nutrition practices. b) Sports Awareness Day in Poiana Țapului A group of young participants have taken part in sporting activities meant to teach them about sporting conduct, fairplay, and safe physical activities. The day culminated with a football match. a unui element în locul celui actual fundal.

Deci, de exemplu, putem schimba culoarea textului la trecerea cursorului așa cum am face-o folosind color proprietate, dar în acest fel animam schimbarea culorii:

Tot ce am făcut a fost să adaug background-clip: text la element şi transition il background-position. Nu trebuie să fie mai complicat decât atât!

Dar ne putem descurca mai bine dacă combinăm mai multe degrade cu valori diferite de tăiere a fundalului.

În acel exemplu, folosesc doi gradienți diferite și două valori cu background-clip. Primul gradient de fundal este decupat de text (mulțumită text valoare) pentru a seta culoarea la hover, în timp ce al doilea gradient de fundal creează sublinierea de jos (mulțumită padding-box valoare). Orice altceva este copiat direct din munca pe care am făcut-o în primul articol din această serie.

Ce zici de un efect de hover în care bara alunecă de sus în jos într-un mod care arată ca textul este scanat, apoi colorat:

De data aceasta am schimbat dimensiunea primului gradient pentru a crea linia. Apoi îl alunec cu celălalt gradient care actualizează culoarea textului pentru a crea iluzia! Puteți vizualiza ce se întâmplă în acest stilou:

Am zgâriat doar suprafața a ceea ce putem face cu noi background-clipputeri de ping! Cu toate acestea, această tehnică este probabil ceva pe care ați dori să evitați utilizarea în producție, deoarece Firefox este cunoscut că are un multe erori raportate în legătură cu background-clip. Safari are și probleme de asistență. Asta lasă doar Chrome cu suport solid pentru aceste lucruri, așa că poate să-l deschidem pe măsură ce continuăm.

Să trecem la un alt efect de hover folosind background-clip:

Probabil crezi că acesta arată foarte ușor în comparație cu ceea ce tocmai am acoperit - și ai dreptate, nu este nimic elegant aici. Tot ce fac este să alunec un gradient în timp ce măresc dimensiunea altuia.

Dar suntem aici pentru a ne uita la efectele avansate de hover, nu? Să o modificăm puțin, astfel încât animația să fie diferită atunci când cursorul mouse-ului părăsește elementul. Același efect de hover, dar un final diferit al animației:

Cool nu? hai sa disecam codul:

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

Avem trei straturi de fundal - două degrade și background-color definit folosind --_c variabilă care este setată inițial la transparent (#0000). Când trecem cu mouse-ul, schimbăm culoarea în alb și --_c variabilă la culoarea principală (--c).

Iată ce se întâmplă cu asta transition: În primul rând, aplicăm o tranziție la orice, dar amânăm color și background-color by 0.5s pentru a crea efectul de alunecare. Imediat după aceea, schimbăm color si background-color. Este posibil să nu observați modificări vizuale deoarece textul este deja alb (mulțumită primului gradient) și fundalul este deja setat la culoarea principală (mulțumită celui de-al doilea gradient).

Apoi, la ieșirea mouse-ului, aplicăm o modificare instantanee tuturor (observați că 0s întârziere), cu excepția color și background-color care au o tranziție. Aceasta înseamnă că punem toți gradienții înapoi la stările lor inițiale. Din nou, probabil că nu veți vedea modificări vizuale din cauza textului color și background-color deja schimbat la hover.

În cele din urmă, aplicăm decolorarea pe culoare și a background-color pentru a crea partea de mouse-out a animației. Știu, poate fi dificil de înțeles, dar poți vizualiza mai bine trucul folosind diferite culori:

Treceți cu mouse-ul de mai sus de multe ori și veți vedea proprietățile care se animă la trecerea cu mouse-ul și cele care se animă în afara mouse-ului. Puteți înțelege apoi cum am ajuns la două animații diferite pentru același efect de hover.

Să nu uităm tehnica de comutare DRY pe care am folosit-o în articolele anterioare ale acestei serii pentru a ajuta la reducerea cantității de cod prin utilizarea unei singure variabile pentru comutare:

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

Dacă vă întrebați de ce am ajuns la sintaxa RGB pentru culoarea principală, este pentru că trebuia să mă joc cu transparența alfa. De asemenea, folosesc variabila --_t pentru a reduce un calcul redundant utilizat în transition proprietate.

Înainte de a trece la următoarea parte, iată mai multe exemple de efecte de hover pe care le-am făcut cu ceva timp în urmă, pe care se bazează background-clip. Ar fi prea lung să le detaliez pe fiecare, dar cu ceea ce am învățat până acum puteți înțelege cu ușurință codul. Poate fi o bună inspirație să încerci unele dintre ele singur, fără să te uiți la cod.

Știu, știu. Acestea sunt efecte de hover nebunești și neobișnuite și îmi dau seama că sunt prea multe în majoritatea situațiilor. Dar așa se practică și se învață CSS. Ține minte, noi depasind limitele de efecte de hover CSS. Efectul de hover poate fi o noutate, dar învățăm noi tehnici pe parcurs, care cu siguranță pot fi folosite pentru alte lucruri.

Efecte de trecere cu mouse-ul folosind CSS mask

Ghici ce? CSS-ul mask proprietatea folosește gradienții în același mod în care background proprietatea face, așa că veți vedea că ceea ce facem în continuare este destul de simplu.

Să începem prin a construi o subliniere elegantă.

eu folosesc background pentru a crea un chenar de jos în zig-zag în acea demonstrație. Dacă aș dori să aplic o animație la acea subliniere, ar fi plictisitor să o fac folosind numai proprietățile de fundal.

Introduceți CSS mask.

Codul poate părea ciudat, dar logica este în continuare aceeași ca și cu toate animațiile de fundal anterioare. The mask este compus din doi gradienți. Primul gradient este definit cu o culoare opacă care acoperă zona de conținut (mulțumită content-box valoare). Primul gradient face textul vizibil și ascunde chenarul de jos în zig-zag. content-box este mask-clip valoare care se comportă la fel ca background-clip

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

Al doilea gradient va acoperi întreaga zonă (mulțumită lui padding-box). Acesta are o lățime care este definită folosind --_p variabilă și va fi plasată în partea stângă a elementului.

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

Acum, tot ce trebuie să facem este să schimbăm valoarea --_p plasați cursorul pentru a crea un efect de alunecare pentru al doilea gradient și pentru a dezvălui sublinierea.

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

Următorul demo folosește straturile de mască ca fundal pentru a vedea mai bine trucul care are loc. Imaginați-vă că părțile verzi și roșii sunt părțile vizibile ale elementului, în timp ce totul este transparent. Asta va face masca dacă folosim aceleași degrade cu ea.

Cu un astfel de truc, putem crea cu ușurință o mulțime de variații pur și simplu folosind o configurație diferită de gradient cu mask proprietate:

Fiecare exemplu din acel demo folosește o configurație de gradient ușor diferită pentru mask. Observați, de asemenea, separarea în cod între configurația de fundal și configurația măștii. Ele pot fi gestionate și întreținute independent.

Să schimbăm configurația de fundal, înlocuind sublinierea în zig-zag cu o subliniere ondulată:

O altă colecție de efecte de hover! Am păstrat toate configurațiile de măști și am schimbat fundalul pentru a crea o formă diferită. Acum, puteți înțelege cum am putut pentru a ajunge la 400 de efecte de hover fără pseudo-elemente — și încă mai putem avea mai multe!

De ce nu așa ceva:

Iată o provocare pentru tine: Chenarul din ultima demonstrație este un gradient folosind mask proprietate de a o dezvălui. Îți poți da seama logica din spatele animației? Poate părea complex la prima vedere, dar este foarte asemănător cu logica pe care am analizat-o pentru majoritatea celorlalte efecte de hover care se bazează pe gradienți. Postează explicația ta în comentarii!

Efecte de hover în 3D

Poate credeți că este imposibil să creați un efect 3D cu un singur element (și fără a recurge la pseudo-elemente!), dar CSS are o modalitate de a face acest lucru.

Ceea ce vezi acolo nu este un efect 3D real, ci mai degrabă o iluzie perfectă a 3D în spațiul 2D care combină CSS background, clip-path, și transform proprietăți.

Primul lucru pe care îl facem este să ne definim variabilele:

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

Apoi creăm un chenar transparent cu lățimi care utilizează variabilele de mai sus:

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

Laturile de sus și dreapta ale elementului trebuie să fie egale cu --b valoare în timp ce părțile inferioare și stânga trebuie să fie egale cu suma --b și --d (care este --_s variabil).

Pentru a doua parte a trucului, trebuie să definim un gradient care să acopere toate zonele de frontieră pe care le-am definit anterior. A conic-gradient va lucra pentru asta:

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;

Adăugăm un alt gradient pentru a treia parte a trucului. Acesta va folosi două valori de culoare albă semi-transparentă care se suprapun pe primul gradient anterior pentru a crea diferite nuanțe ale culorii principale, dându-ne iluzia de umbrire și profunzime.

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

Ultimul pas este aplicarea a CSS clip-path pentru a tăia colțurile pentru acel fel de umbră lungă:

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

Asta e tot! Tocmai am făcut un dreptunghi 3D cu nimic altceva decât două degrade și un clip-path pe care le putem ajusta cu ușurință folosind variabile CSS. Acum, tot ce trebuie să facem este să-l animam!

Observați coordonatele din figura anterioară (indicate cu roșu). Să le actualizăm pentru a crea animația:

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

Trucul este să ascundeți părțile de jos și din stânga ale elementului, astfel încât tot ce rămâne să fie un element dreptunghiular fără nicio adâncime.

Acest stilou izolează clip-path porțiune din animație pentru a vedea ce face:

Atingerea finală este de a muta elementul în direcția opusă folosind translate — și iluzia este perfectă! Iată efectul utilizând diferite valori de proprietăți personalizate pentru diferite adâncimi:

Al doilea efect de hover urmează aceeași structură. Tot ce am făcut a fost să actualizez câteva valori pentru a crea o mișcare sus stânga în loc de una sus dreapta.

Combinarea efectelor!

Lucrul minunat despre tot ceea ce am acoperit este că toate se completează reciproc. Iată un exemplu în care adaug il text-shadow efect de la articolul al doilea în serie la background tehnica de animatie din primul articol în timp ce folosim trucul 3D pe care tocmai l-am acoperit:

Codul real ar putea fi confuz la început, dar mergeți mai departe și disecați-l puțin mai departe - veți observa că este doar o combinație a acestor trei efecte diferite, aproape zdrobite împreună.

Permiteți-mi să termin acest articol cu ​​un ultim efect de hover, în care combin fundalul, traseul de clipare și o picătură de perspective pentru a simula un alt efect 3D:

Am aplicat același efect imaginilor și rezultatul a fost destul de bun pentru a simula 3D cu un singur element:

Doriți să vedeți mai atent cum funcționează ultima demonstrație? Am scris ceva pe el.

La finalul

Uf, am terminat! Știu, este o mulțime de CSS complicat, dar (1) suntem pe site-ul web potrivit pentru așa ceva și (2) scopul este să ne împingem înțelegerea diferitelor proprietăți CSS la noi niveluri, permițându-le să interacționeze cu unul pe altul.

S-ar putea să vă întrebați care este următorul pas de aici, acum când închidem această mică serie de efecte avansate de hover CSS. Aș spune că următorul pas este să luăm tot ce am învățat și să le aplicăm altor elemente, cum ar fi butoane, elemente de meniu, link-uri etc. Am păstrat lucrurile destul de simple în măsura în care ne limităm trucurile la un element de titlu tocmai din acest motiv. ; elementul real nu contează. Luați conceptele și alergați cu ele pentru a crea, experimenta și învăța lucruri noi!

---

Efecte interesante de hover CSS care utilizează decuparea fundalului, măștile și 3D publicat inițial pe CSS-trucuri. Tu ar trebui primiți buletinul informativ.

• Coinsmart. Cel mai bun schimb de Bitcoin și Crypto din Europa.
• Platoblockchain. Web3 Metaverse Intelligence. Cunoștințe amplificate. ACCES LIBER.
• CryptoHawk. Radar Altcoin. Încercare gratuită.
• Sursa: https://css-tricks.com/css-hover-effects-background-masks-3d/