Fancy billeddekorationer: konturer og komplekse animationer

Vi har brugt de sidste to artikler i denne tredelte serie på at lege med gradienter for at lave virkelig pæne billeddekorationer med kun element. I dette tredje og sidste stykke skal vi udforske flere teknikker ved hjælp af CSS outline ejendom. Det lyder måske mærkeligt, fordi vi generelt bruger outline at tegne en simpel streg rundt om et element - sådan set border men det kan kun tegne alle fire sider på én gang og er ikke en del af Box Model.

Vi kan dog gøre mere med det, og det er det, jeg vil eksperimentere med i denne artikel.

Lad os starte med vores første eksempel - en overlejring, der forsvinder ved svævning med en cool animation:

Vi kunne opnå dette ved at tilføje et ekstra element over billedet, men det er det, vi udfordrer os selv ikke at gøre i denne serie. I stedet kan vi række ud efter CSS outline egenskab og gearing, at den kan have en negativ offset og er i stand til at overlappe sit 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);
}

Tricket er at skabe en outline der er så tyk som halvdelen af ​​billedstørrelsen, og forskyd den derefter med halvdelen af ​​billedstørrelsen med en negativ værdi. Tilføj lidt semi-transparens med farven, og vi har vores overlay!

Resten er, hvad der sker på :hover. Vi opdaterer outline og overgangen mellem begge konturer skaber den kølige svæveeffekt. Den samme teknik kan også bruges til at skabe en fading-effekt, hvor vi ikke flytter outline men gør det gennemsigtigt.

I stedet for at bruge halvdelen af ​​billedstørrelsen i denne, bruger jeg en meget stor outline tykkelsesværdi (100vmax), mens du anvender en CSS-maske. Med dette er der ikke længere behov for at kende billedstørrelsen - det trick virker i alle størrelser!

Du kan få problemer med at bruge 100vmax som en stor værdi i Safari. Hvis det er tilfældet, så overvej det tidligere trick, hvor du erstatter 100vmax med halvdelen af ​​billedstørrelsen.

Vi kan tage tingene endnu længere! For eksempel i stedet for blot at klippe det ekstra outline, kan vi skabe former og anvende en fancy afsløringsanimation.

Cool ikke? Det outline er det, der skaber den gule overlejring. Det clip-path klipper det ekstra outline for at få stjerneformen. Så når vi svæver, gør vi farven gennemsigtig.

Åh, vil du have hjerter i stedet for? Det kan vi helt sikkert!

Forestil dig alle de mulige kombinationer, vi kan skabe. Alt vi skal gøre er at tegne en form med en CSS-maske og/eller clip-path og kombiner det med outline trick. Én løsning, uendelige muligheder!

Og ja, vi kan bestemt også animere dette. Lad os ikke glemme det clip-path er animerbar og mask er afhængig af gradienter - noget vi dækkede meget detaljeret i de første to artikler i denne serie.

Jeg ved godt, animationen er en smule glitchy. Dette er mere en demo for at illustrere ideen snarere end det "endelige produkt", der skal bruges på et produktionssted. Vi vil gerne optimere tingene til en mere naturlig overgang.

Her er en demo, der bruger mask i stedet. Det er den, jeg drillede dig med i slutningen af den sidste artikel:

Vidste du, at outline ejendom var i stand til så meget awesomeness? Føj det til din værktøjskasse til fancy billeddekorationer!

Kombiner alle tingene!

Nu hvor vi har lært mange tricks ved at bruge gradienter, masker, klipning og omrids, er det tid til den store finale. Lad os afslutte denne serie ved at kombinere alt det, vi har lært de sidste par uger, for at vise ikke kun teknikkerne, men også demonstrere, hvor fleksible og modulære disse tilgange er.

Hvis du så disse demoer for første gang, kan du antage, at der er en masse ekstra divs-indpakninger og pseudo-elementer, der bliver brugt til at trække dem ud. Men alt sker direkte på element. Det er den eneste vælger, vi skal bruge for at få disse avancerede former og effekter!

Indpakning op

Nå, pys, tak fordi du hang ud med mig i denne tredelte serie de sidste par uger. Vi udforskede en række forskellige teknikker, der gør simple billeder til noget iøjnefaldende og interaktivt. Vil du bruge alt, hvad vi dækkede? Bestemt ikke! Men mit håb er, at dette har været en god øvelse for dig til at grave i avanceret brug af CSS-funktioner, såsom gradienter, mask, clip-pathog outline.

Og vi gjorde alt med kun én element! Ingen ekstra div-indpakninger og pseudo-elementer. Selvfølgelig er det en begrænsning, vi lægger på os selv, men det skubbede os også til at udforske CSS og forsøge at finde innovative løsninger på almindelige use cases. Så før du pumper ekstra markup ind i din HTML, skal du tænke over, om CSS allerede er i stand til at håndtere opgaven.