Coole CSS-hover-effecten die achtergrondknippen, maskers en 3D gebruiken

We hebben nu een reeks berichten doorgenomen over interessante benaderingen van CSS-hovereffecten. We zijn begonnen met een aantal voorbeelden die CSS gebruiken background vastgoed, en ging toen door naar de text-shadow eigendom waar technisch gezien hebben we geen schaduwen gebruikt. We hebben ze ook gecombineerd met CSS-variabelen en calc() om de code te optimaliseren en het beheer ervan te vergemakkelijken.

In dit artikel bouwen we voort op die twee artikelen om nog complexere CSS-hoveranimaties te maken. We hebben het over achtergrondclipping, CSS-maskers en zelfs nat worden met 3D-perspectieven. Met andere woorden, we gaan deze keer geavanceerde technieken verkennen en de grenzen verleggen van wat CSS kan doen met zweefeffecten!

---

Hier is slechts een voorproefje van wat we maken:

Zweefeffecten gebruiken background-clip

Laten we praten over background-clip. Deze CSS-eigenschap accepteert een text zoekwoordwaarde waarmee we verlopen kunnen toepassen op de tekst van een element in plaats van het werkelijke achtergrond.

We kunnen dus bijvoorbeeld de kleur van de tekst tijdens het zweven wijzigen, net zoals we zouden doen met de color eigenschap, maar op deze manier animeren we de kleurverandering:

Het enige wat ik deed was toevoegen background-clip: text naar het element en transition de background-position. Hoeft niet ingewikkelder te zijn dan dat!

Maar we kunnen het beter doen als we meerdere verlopen combineren met verschillende waarden voor het knippen van de achtergrond.

In dat voorbeeld gebruik ik twee verschillende verlopen en twee waarden met background-clip. Het eerste achtergrondverloop wordt bij de tekst geknipt (dankzij de text waarde) om de kleur bij zweven in te stellen, terwijl het tweede achtergrondverloop de onderste onderstreping creëert (dankzij de padding-box waarde). Al het andere is regelrecht gekopieerd van het werk dat we in het eerste artikel hebben gedaan van deze serie.

Wat dacht je van een zweefeffect waarbij de balk van boven naar beneden schuift op een manier die lijkt alsof de tekst wordt gescand en vervolgens wordt ingekleurd:

Deze keer heb ik de grootte van het eerste verloop gewijzigd om de lijn te maken. Daarna schuif ik het met het andere verloop dat de tekstkleur bijwerkt om de illusie te creëren! U kunt visualiseren wat er in deze pen gebeurt:

We hebben nog maar het topje van de ijsberg van wat we met onze kunnen doen background-clipping-krachten! Deze techniek is echter waarschijnlijk iets dat u in productie wilt vermijden, aangezien bekend is dat Firefox een veel gerapporteerde bugs gerelateerd aan background-clip. Safari heeft ook ondersteuningsproblemen. Dat laat alleen Chrome over met solide ondersteuning voor dit spul, dus laat het misschien open terwijl we doorgaan.

Laten we verder gaan met een ander zweefeffect met behulp van background-clip:

Je denkt waarschijnlijk dat deze er supergemakkelijk uitziet in vergelijking met wat we zojuist hebben behandeld - en je hebt gelijk, er is hier niets bijzonders. Het enige wat ik aan het doen ben, is het ene verloop verschuiven terwijl ik het andere vergroot.

Maar we zijn hier om naar geavanceerde zweefeffecten te kijken, toch? Laten we het een beetje veranderen, zodat de animatie anders is wanneer de muiscursor het element verlaat. Hetzelfde zweefeffect, maar een ander einde van de animatie:

Cool toch? laten we de code ontleden:

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

We hebben drie achtergrondlagen - twee verlopen en de background-color gedefinieerd met behulp van --_c variabele die aanvankelijk is ingesteld op transparant (#0000). Bij zweven veranderen we de kleur in wit en de --_c variabel naar de hoofdkleur (--c).

Dit is wat daarop gebeurt transition: Eerst passen we een overgang toe op alles, maar we vertragen de color en background-color by 0.5s om het glijdende effect te creëren. Meteen daarna veranderen we de color en background-color. Mogelijk merkt u geen visuele veranderingen omdat de tekst al wit is (dankzij het eerste verloop) en de achtergrond al is ingesteld op de hoofdkleur (dankzij het tweede verloop).

Vervolgens passen we bij het verlaten van de muis een onmiddellijke wijziging op alles toe (let op de 0s vertraging), behalve de color en background-color die een overgang hebben. Dit betekent dat we alle gradiënten terugzetten naar hun oorspronkelijke toestand. Nogmaals, u zult waarschijnlijk geen visuele veranderingen zien omdat de tekst color en background-color al veranderd bij hover.

Ten slotte passen we de vervaging toe op kleur en a background-color om het mouse-out gedeelte van de animatie te maken. Ik weet het, het is misschien lastig te begrijpen, maar je kunt de truc beter visualiseren door verschillende kleuren te gebruiken:

Beweeg het bovenstaande vaak en je zult de eigenschappen zien die animeren bij het zweven en degenen die animeren bij muis uit. Je kunt dan begrijpen hoe we tot twee verschillende animaties zijn gekomen voor hetzelfde zweefeffect.

Laten we niet vergeten de door ons gebruikte DRY-schakeltechniek in de vorige artikelen van deze serie om de hoeveelheid code te verminderen door slechts één variabele voor de schakelaar te gebruiken:

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

Als je je afvraagt ​​waarom ik de RGB-syntaxis voor de hoofdkleur heb gekozen, is dat omdat ik moest spelen met de alfa-transparantie. Ik gebruik ook de variabele --_t om een ​​redundante berekening die wordt gebruikt in de transition eigendom.

Voordat we naar het volgende deel gaan, zijn hier meer voorbeelden van hover-effecten die ik een tijdje geleden heb gemaakt en waarop ik vertrouw background-clip. Het zou te lang zijn om ze allemaal in detail te beschrijven, maar met wat we tot nu toe hebben geleerd, kun je de code gemakkelijk begrijpen. Het kan een goede inspiratie zijn om een ​​aantal van hen alleen te proberen zonder naar de code te kijken.

Ik weet het. Dit zijn gekke en ongebruikelijke zweefeffecten en ik realiseer me dat ze in de meeste situaties te veel zijn. Maar dit is hoe je CSS kunt oefenen en leren. Denk eraan, wij grenzen verleggen van CSS-hovereffecten. Het zweefeffect is misschien nieuw, maar we leren onderweg nieuwe technieken die zeker voor andere dingen kunnen worden gebruikt.

Zweefeffecten met behulp van CSS mask

Raad eens? De CSS mask eigenschap gebruikt gradiënten op dezelfde manier als de background property wel, dus je zult zien dat wat we nu gaan maken vrij eenvoudig is.

Laten we beginnen met het bouwen van een fraaie onderlijn.

ik gebruik background om in die demo een zigzag-onderrand te maken. Als ik een animatie op die onderstreping zou willen toepassen, zou het vervelend zijn om dat alleen met achtergrondeigenschappen te doen.

Voer CSS in mask.

De code ziet er misschien vreemd uit, maar de logica is nog steeds hetzelfde als bij alle voorgaande achtergrondanimaties. De mask bestaat uit twee gradiënten. Het eerste verloop wordt gedefinieerd met een ondoorzichtige kleur die het inhoudsgebied bedekt (dankzij de content-box waarde). Dat eerste verloop maakt de tekst zichtbaar en verbergt de onderste zigzagrand. content-box is de mask-clip waarde die zich hetzelfde gedraagt ​​als background-clip

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

Het tweede verloop beslaat het hele gebied (dankzij padding-box). Deze heeft een breedte die is gedefinieerd met behulp van de --_p variabele en wordt aan de linkerkant van het element geplaatst.

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

Nu hoeven we alleen nog maar de waarde van te wijzigen --_p bij zweven om een ​​glijdend effect te creëren voor het tweede verloop en de onderstreping zichtbaar te maken.

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

De volgende demo gebruikt de maskerlagen als achtergrond om de truc beter te kunnen zien. Stel je voor dat de groene en rode delen de zichtbare delen van het element zijn, terwijl al het andere transparant is. Dat is wat het masker zal doen als we er dezelfde verlopen mee gebruiken.

Met zo'n truc kunnen we eenvoudig veel variatie creëren door simpelweg een andere verloopconfiguratie te gebruiken met de mask eigendom:

Elk voorbeeld in die demo gebruikt een iets andere verloopconfiguratie voor de mask. Let ook op de scheiding in de code tussen de achtergrondconfiguratie en de maskerconfiguratie. Ze kunnen onafhankelijk worden beheerd en onderhouden.

Laten we de achtergrondconfiguratie wijzigen door de zigzag-onderstreping te vervangen door een golvende onderstreping:

Nog een verzameling zweefeffecten! Ik heb alle maskerconfiguraties behouden en de achtergrond veranderd om een ​​andere vorm te creëren. Nu begrijp je hoe ik in staat was om 400 zweefeffecten te bereiken zonder pseudo-elementen — en we kunnen er nog meer hebben!

Zoals, waarom niet zoiets als dit:

Hier is een uitdaging voor jou: De rand in die laatste demo is een verloop met behulp van de mask eigenschap om het te onthullen. Kun jij de logica achter de animatie achterhalen? Het ziet er op het eerste gezicht misschien ingewikkeld uit, maar het lijkt erg op de logica die we hebben bekeken voor de meeste andere zweefeffecten die afhankelijk zijn van hellingen. Plaats je uitleg in de comments!

Zweefeffecten in 3D

Je denkt misschien dat het onmogelijk is om een ​​3D-effect te creëren met een enkel element (en zonder je toevlucht te nemen tot pseudo-elementen!) maar CSS heeft een manier om het voor elkaar te krijgen.

Wat je daar ziet, is geen echt 3D-effect, maar eerder een perfecte illusie van 3D in de 2D-ruimte die de CSS combineert background, clip-path en transform eigenschappen.

Het eerste wat we doen is onze variabelen definiëren:

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

Vervolgens maken we een transparante rand met breedtes die de bovenstaande variabelen gebruiken:

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

De boven- en rechterkant van het element moeten beide gelijk zijn aan de --b waarde terwijl de onder- en linkerkant gelijk moeten zijn aan de som van --b en --d (welke is de --_s variabel).

Voor het tweede deel van de truc moeten we één verloop definiëren dat alle grensgebieden beslaat die we eerder hebben gedefinieerd. A conic-gradient zal daarvoor werken:

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;

We voegen nog een verloop toe voor het derde deel van de truc. Deze gebruikt twee semi-transparante witte kleurwaarden die het eerste vorige verloop overlappen om verschillende tinten van de hoofdkleur te creëren, waardoor we de illusie van schaduw en diepte krijgen.

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

De laatste stap is het toepassen van een CSS clip-path om de hoeken te knippen voor dat lange schaduwgevoel:

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

Dat is alles! We hebben zojuist een 3D-rechthoek gemaakt met niets anders dan twee verlopen en een clip-path die we eenvoudig kunnen aanpassen met behulp van CSS-variabelen. Nu hoeven we het alleen nog maar te animeren!

Let op de coördinaten van de vorige afbeelding (rood aangegeven). Laten we die bijwerken om de animatie te maken:

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

De truc is om de onderste en linker delen van het element te verbergen, zodat er alleen een rechthoekig element overblijft zonder enige diepte.

Deze pen isoleert de clip-path gedeelte van de animatie om te zien wat het doet:

De laatste hand is om het element in de tegenovergestelde richting te verplaatsen met behulp van translate - en de illusie is perfect! Dit is het effect met verschillende aangepaste eigenschapswaarden voor verschillende diepten:

Het tweede zweefeffect volgt dezelfde structuur. Ik heb alleen een paar waarden bijgewerkt om een ​​beweging linksboven te creëren in plaats van een beweging rechtsboven.

Effecten combineren!

Het geweldige aan alles wat we hebben behandeld, is dat ze elkaar allemaal aanvullen. Hier is een voorbeeld waar ik aan toevoeg de text-shadow werking vanaf het tweede artikel in de serie naar de background animatietechniek uit het eerste artikel tijdens het gebruik van de 3D-truc die we zojuist hebben besproken:

De eigenlijke code kan in het begin verwarrend zijn, maar ga je gang en ontleed het een beetje verder - je zult merken dat het slechts een combinatie is van die drie verschillende effecten, vrijwel samengeperst.

Laat me dit artikel afsluiten met een laatste zweefeffect waarbij ik achtergrond, clippad en een scheutje combineer perspective om een ​​ander 3D-effect te simuleren:

Ik paste hetzelfde effect toe op afbeeldingen en het resultaat was redelijk goed voor het simuleren van 3D met een enkel element:

Wil je eens nader bekijken hoe die laatste demo werkt? Ik heb er iets op geschreven.

Afsluiten

Oef, we zijn klaar! Ik weet het, het is veel lastige CSS, maar (1) we zijn op de juiste website voor dat soort dingen, en (2) het doel is om ons begrip van verschillende CSS-eigenschappen naar een nieuw niveau te tillen door ze met elkaar te laten communiceren.

Je vraagt ​​je misschien af ​​wat de volgende stap is nu we deze kleine reeks geavanceerde CSS-hovereffecten afsluiten. Ik zou zeggen dat de volgende stap is om alles wat we hebben geleerd toe te passen op andere elementen, zoals knoppen, menu-items, links, enz. We hebben de dingen vrij eenvoudig gehouden door onze trucs te beperken tot een kopelement om precies die reden; het eigenlijke element doet er niet toe. Neem de concepten en ga ermee aan de slag om nieuwe dingen te creëren, ermee te experimenteren en te leren!

---

Coole CSS-hover-effecten die achtergrondknippen, maskers en 3D gebruiken oorspronkelijk gepubliceerd op CSS-trucs. Je zou moeten ontvang de nieuwsbrief.

• Coinsmart. Europa's beste Bitcoin- en crypto-uitwisseling.
• Platoblockchain. Web3 Metaverse Intelligentie. Kennis versterkt. GRATIS TOEGANG.
• CryptoHawk. Altcoin-radar. Gratis proefversie.
• Bron: https://css-tricks.com/css-hover-effects-background-masks-3d/