Snygga bilddekorationer: konturer och komplexa animationer

Vi har ägnat de två senaste artiklarna i den här tredelade serien åt att leka med gradienter för att göra riktigt snygga bilddekorationer med bara element. I denna tredje och sista del kommer vi att utforska fler tekniker med CSS outline fast egendom. Det kan låta konstigt eftersom vi vanligtvis använder outline att dra en enkel linje runt ett element — typ som border men det kan bara rita alla fyra sidorna samtidigt och är inte en del av Box Model.

Vi kan dock göra mer med det, och det är vad jag vill experimentera med i den här artikeln.

Låt oss börja med vårt första exempel - en överlagring som försvinner när du svävar med en cool animation:

Vi skulle kunna åstadkomma detta genom att lägga till ett extra element över bilden, men det är vad vi utmanar oss själva inte att göra i den här serien. Istället kan vi nå CSS outline egendom och hävstång att den kan ha en negativ offset och kan överlappa 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);
}

Tricket är att skapa en outline som är lika tjock som halva bildstorleken, kompensera den sedan med halva bildstorleken med ett negativt värde. Lägg till lite halvtransparens med färgen så har vi vår överlägg!

Resten är vad som händer :hover. Vi uppdaterar outline och övergången mellan båda konturerna skapar den coola svävningseffekten. Samma teknik kan också användas för att skapa en blekningseffekt där vi inte flyttar outline men gör det genomskinligt.

Istället för att använda halva bildstorleken i den här, använder jag en väldigt stor outline tjockleksvärde (100vmax) medan du applicerar en CSS-mask. Med detta finns det inte längre ett behov av att känna till bildstorleken – det tricket fungerar i alla storlekar!

Du kan stöta på problem med att använda 100vmax som ett stort värde i Safari. Om det är fallet, överväg det tidigare tricket där du byter ut 100vmax med halva bildstorleken.

Vi kan ta saker ännu längre! Till exempel istället för att bara klippa extra outline, kan vi skapa former och använda en snygg avslöjningsanimation.

Coolt eller hur? De outline är det som skapar det gula överlägget. De clip-path klipper extra outline för att få stjärnformen. Sedan, när vi svävar, gör vi färgen genomskinlig.

Åh, vill du ha hjärtan istället? Det kan vi absolut göra!

Föreställ dig alla möjliga kombinationer vi kan skapa. Allt vi behöver göra är att rita en form med en CSS-mask och/eller clip-path och kombinera det med outline lura. En lösning, oändliga möjligheter!

Och ja, vi kan definitivt animera detta också. Låt oss inte glömma det clip-path är animerbar och mask förlitar sig på gradienter - något som vi behandlade mycket detaljerat i de två första artiklarna i den här serien.

Jag vet, animationen är lite glitchy. Detta är mer en demo för att illustrera idén snarare än "slutprodukten" som ska användas på en produktionsplats. Vi skulle vilja optimera saker och ting för en mer naturlig övergång.

Här är en demo som använder mask istället. Det är den jag retade dig med i slutet av den sista artikeln:

Visste du att outline egendom var kapabel till så mycket awesomeness? Lägg till den i din verktygslåda för snygga bilddekorationer!

Kombinera alla saker!

Nu när vi har lärt oss många knep med hjälp av gradienter, masker, klippning och konturer, är det dags för den stora finalen. Låt oss avsluta den här serien genom att kombinera allt vi har lärt oss de senaste veckorna för att visa upp inte bara teknikerna, utan också visa hur flexibla och modulära dessa tillvägagångssätt är.

Om du såg dessa demos för första gången kan du anta att det finns ett gäng extra div-omslag och pseudo-element som används för att ta bort dem. Men allt händer direkt på element. Det är den enda väljaren vi behöver för att få dessa avancerade former och effekter!

Inslagning upp

Jösses, tack för att du hängde med mig i den här tredelade serien de senaste veckorna. Vi utforskade en mängd olika tekniker som gör enkla bilder till något iögonfallande och interaktivt. Kommer du att använda allt vi täckte? Absolut inte! Men min förhoppning är att detta har varit en bra övning för dig att gräva i avancerad användning av CSS-funktioner, som gradienter, mask, clip-pathoch outline.

Och vi gjorde allt med bara en element! Inga extra div-omslag och pseudoelement. Visst, det är en begränsning vi sätter på oss själva, men det fick oss också att utforska CSS och försöka hitta innovativa lösningar på vanliga användningsfall. Så, innan du pumpar in extra uppmärkning i din HTML, fundera på om CSS redan kan hantera uppgiften.