Fancy bildedekorasjoner: konturer og komplekse animasjoner

Vi har brukt de to siste artiklene i denne tredelte serien på å leke med gradienter for å lage virkelig pene bildedekorasjoner uten å bruke annet enn element. I dette tredje og siste stykket skal vi utforske flere teknikker ved å bruke CSS outline eiendom. Det høres kanskje rart ut fordi vi vanligvis bruker outline å tegne en enkel linje rundt et element — liksom border men den kan bare tegne alle fire sidene samtidig og er ikke en del av boksmodellen.

Vi kan imidlertid gjøre mer med det, og det er det jeg vil eksperimentere med i denne artikkelen.

La oss starte med vårt første eksempel - et overlegg som forsvinner når du svever med en kul animasjon:

Vi kunne oppnå dette ved å legge til et ekstra element over bildet, men det er det vi utfordrer oss selv ikke å gjøre i denne serien. I stedet kan vi strekke oss etter CSS outline egenskap og innflytelse at den kan ha en negativ forskyvning og er i stand til å overlappe sitt element.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

Trikset er å lage en outline som er så tykk som halvparten av bildestørrelsen, og forskyv den deretter med halvparten av bildestørrelsen med en negativ verdi. Legg inn litt semi-transparens med fargen og vi har vårt overlegg!

Resten er det som skjer :hover. Vi oppdaterer outline og overgangen mellom begge konturene skaper den kule sveveeffekten. Den samme teknikken kan også brukes til å skape en falmingseffekt der vi ikke flytter outline men gjør det gjennomsiktig.

I stedet for å bruke halve bildestørrelsen i denne, bruker jeg en veldig stor outline tykkelse verdi (100vmax) mens du bruker en CSS-maske. Med dette er det ikke lenger behov for å vite bildestørrelsen - det trikset fungerer i alle størrelser!

Du kan få problemer med å bruke 100vmax som en stor verdi i Safari. Hvis det er tilfelle, vurder det forrige trikset der du erstatter 100vmax med halve bildestørrelsen.

Vi kan ta ting enda lenger! For eksempel, i stedet for bare å klippe det ekstra outline, kan vi lage former og bruke en fancy avsløringsanimasjon.

Kult ikke sant? De outline er det som skaper det gule overlegget. De clip-path klipper det ekstra outline for å få stjerneformen. Deretter, ved sveving, gjør vi fargen gjennomsiktig.

Å, vil du ha hjerter i stedet? Det kan vi absolutt gjøre!

Se for deg alle mulige kombinasjoner vi kan lage. Alt vi trenger å gjøre er å tegne en form med en CSS-maske og/eller clip-path og kombinere det med outline triks. Én løsning, uendelige muligheter!

Og, ja, vi kan definitivt animere dette også. La oss ikke glemme det clip-path er animerbar og mask er avhengig av gradienter - noe vi dekket svært detaljert i de to første artiklene i denne serien.

Jeg vet, animasjonen er litt glitchy. Dette er mer en demo for å illustrere ideen i stedet for det "endelige produktet" som skal brukes på et produksjonssted. Vi ønsker å optimalisere ting for en mer naturlig overgang.

Her er en demo som bruker mask i stedet. Det er den jeg ertet deg med på slutten av den siste artikkelen:

Visste du at outline eiendom var i stand til så mye awesomeness? Legg den til verktøykassen for fancy bildedekorasjoner!

Kombiner alle tingene!

Nå som vi har lært mange triks ved å bruke gradienter, masker, klipping og konturer, er det tid for den store finalen. La oss avslutte denne serien ved å kombinere alt vi har lært de siste ukene for å vise frem ikke bare teknikkene, men også vise hvor fleksible og modulære disse tilnærmingene er.

Hvis du så disse demoene for første gang, kan du anta at det er en haug med ekstra div-innpakninger og pseudo-elementer som brukes til å fjerne dem. Men alt skjer direkte på element. Det er den eneste velgeren vi trenger for å få disse avanserte formene og effektene!

Innpakning opp

Jøss, takk for at du har vært med meg i denne tredelte serien de siste ukene. Vi utforsket en rekke forskjellige teknikker som gjør enkle bilder til noe iøynefallende og interaktivt. Vil du bruke alt vi dekker? Absolutt ikke! Men mitt håp er at dette har vært en god øvelse for deg å grave i avansert bruk av CSS-funksjoner, som gradienter, mask, clip-pathog outline.

Og vi gjorde alt med bare én element! Ingen ekstra div-innpakninger og pseudo-elementer. Jada, det er en begrensning vi legger på oss selv, men det presset oss også til å utforske CSS og prøve å finne innovative løsninger på vanlige brukstilfeller. Så før du pumper ekstra markup inn i HTML-en din, tenk på om CSS allerede er i stand til å håndtere oppgaven.