Modni okraski slik: maske in napredni učinki lebdenja

Dobrodošli v 2. delu te tridelne serije! Še vedno okrasimo slike brez dodatnih elementov in psevdoelementov. Upam, da ste si že vzeli čas za prebavo Del 1 ker bomo še naprej delali z veliko prelivi, da bi ustvarili osupljive vizualne učinke. Predstavili bomo tudi CSS mask lastnost za bolj zapletene okraske in učinke lebdenja.

Obrnimo se na prvi primer, ki ga delamo skupaj …

Poštna znamka

Verjeli ali ne, vse, kar potrebujete za učinek CSS poštne znamke, sta dva preliva in filter:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Kot smo videli v prejšnji članek, je prvi korak narediti prostor okoli slike z padding tako da lahko narišemo preliv ozadja in ga tam vidimo. Nato uporabimo kombinacijo radial-gradient() in linear-gradient() da izrežete tiste kroge okoli slike.

Tukaj je ilustracija po korakih, ki prikazuje, kako so prelivi konfigurirani:

Upoštevajte uporabo round vrednost v drugem koraku. To je zelo pomembno za trik, saj zagotavlja, da je velikost gradienta prilagojena tako, da je popolnoma poravnana na vseh straneh, ne glede na širino ali višino slike.

od specifikacijo: Slika se ponavlja tako pogosto, kot se prilega območju za pozicioniranje ozadja. Če se ne prilega celemu številu krat, se spremeni velikost, tako da ustreza.

Zaobljeni okvir

Oglejmo si še eno slikovno dekoracijo, ki uporablja kroge ...

Ta primer uporablja tudi a radial-gradient(), vendar sem tokrat ustvaril kroge okoli sliko namesto učinka izreza. Upoštevajte, da uporabljam tudi round ponovno vrednost. Najtežji del tukaj je prozorna vrzel med okvirjem in sliko, kjer posežem po CSS mask lastnost:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

Masking nam omogoča, da prikažemo območje slike - zahvaljujoč linear-gradient() tam notri - kot tudi 20px okoli vsake strani - zahvaljujoč conic-gradient(). 20px ni nič drugega kot spremenljivka --s ki določa velikost okvirja. Z drugimi besedami, skriti moramo vrzel.

Evo, kar mislim:

Linearni gradient je modri del ozadja, medtem ko je stožčasti gradient rdeči del ozadja. Ta prozorni del med obema prelivoma je tisto, kar smo izrezali iz našega elementa, da ustvarimo iluzijo notranje prozorne meje.

Notranja prozorna obroba

Za to ne bomo ustvarili okvirja, ampak poskusili nekaj drugega. Ustvarili bomo prozorno notranjo obrobo v notranjosti naša podoba. Verjetno ni tako uporabno v resničnem scenariju, vendar je dobra praksa z maskami CSS.

Podobno kot v prejšnjem primeru se bomo zanašali na dva gradienta: a linear-gradient() za notranji del in a conic-gradient() za zunanji del. Med njimi bomo pustili prostor, da ustvarimo učinek prozorne obrobe.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Morda ste opazili, da ima konični gradient tega primera drugačno sintakso od prejšnjega primera. Oba naj bi ustvarila enako obliko, zakaj sta torej različna? To je zato, ker lahko dosežemo enak rezultat z uporabo različnih sintaks. To je sprva morda videti zmedeno, vendar je dobra lastnost. Nisi dolžan najti o rešitev za dosego določene oblike. Med številnimi možnostmi morate najti samo eno rešitev, ki vam ustreza.

Tu so štirje načini za ustvarjanje zunanjega kvadrata s prelivi:

Obstaja še več načinov, kako to izvesti, vendar razumete bistvo.

Pristop Best™ ne obstaja. Osebno poskušam najti tistega z najmanjšo in najbolj optimizirano kodo. Zame je najprimernejša vsaka rešitev, ki zahteva manj gradientov, manj izračunov in manj ponovljenih vrednosti. Včasih izberem bolj podrobno sintakso, ker mi daje večjo prilagodljivost pri spreminjanju spremenljivk in spreminjanju stvari. Pride z izkušnjami in prakso. Bolj ko se igrate s prelivi, bolj veste, katero sintakso uporabiti in kdaj.

Vrnimo se k naši notranji prosojni meji in se poglobimo v učinek lebdenja. Če niste opazili, obstaja kul učinek lebdenja, ki premakne to prosojno mejo z uporabo a font-size trik. Ideja je opredeliti --d spremenljivka z vrednostjo 1em. Ta spremenljivka nadzira razdaljo obrobe od roba. Preoblikujemo se lahko takole:

--_d: calc(var(--d) + var(--s) * 1em)

... in nam daje naslednji posodobljen CSS:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

O font-size je na začetku enako 0 , torej 1em je tudi enaka 0 in --_d je enako --d. Pri lebdenju pa je font-size je enaka vrednosti, ki jo definira an --o spremenljivka, ki nastavi odmik meje. To pa posodablja --_d spremenljivka, premika obrobo za odmik. Nato dodam še eno spremenljivko, --s, za nadzor znaka, ki odloča o tem, ali se meja premakne na notranjo ali zunanjo stran.

O font-size trik je res uporaben, če želimo animirati lastnosti, ki jih sicer ni mogoče oživeti. Lastnosti po meri, definirane z @property lahko to reši, ampak podpora za to v času, ko to pišem, še vedno manjka.

Razkritje okvirja

V prvem delu te serije smo naredili naslednjo animacijo razkritja:

Lahko vzamemo isto idejo, vendar bomo namesto enobarvne obrobe uporabili tak gradient:

Če primerjate obe kodi, boste opazili naslednje spremembe:

1. Uporabil sem isto konfiguracijo gradienta iz prvega primera znotraj mask premoženje. Prelive sem preprosto premaknil iz background premoženje do mask nepremičnine.
2. Dodal sem a repeating-linear-gradient() da ustvarite gradientno obrobo.

To je to! Ponovno sem uporabil večino iste kode, ki smo jo že videli – z zelo majhnimi popravki – in dobil še eno kul okrasje slike z učinkom lebdenja.

/* Solid color border */

img {
  --c: #8A9B0F; /* the border color */
  --b: 10px;   /* the border thickness*/
  --g: 5px;  /* the gap on hover */

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, var(--c) 0;
  background: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat;
  transition: .3s, background-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, background-size .3s .3s;
}

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    conic-gradient(from 180deg at top var(--b) right var(--b), var(--_g))
     var(--_i, 200%) 0 / 200% var(--_i, var(--b)) no-repeat,
    conic-gradient(at bottom var(--b) left  var(--b), var(--_g))
     0 var(--_i, 200%) / var(--_i, var(--b)) 200% no-repeat,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Poskusimo z drugo okvirno animacijo. Ta je nekoliko zapleten, saj ima animacija v treh korakih:

Prvi korak animacije je povečanje spodnjega roba. Za to prilagodimo background-size o linear-gradient():

Verjetno se sprašujete, zakaj dodajam še zgornji rob. Potrebujemo ga za tretji korak. Vedno poskušam optimizirati kodo, ki jo pišem, zato uporabljam en preliv, da pokrijem tako zgornjo kot spodnjo stran, vendar je zgornja skrita in se pozneje pokaže z mask.

Za drugi korak dodamo drugi gradient, da pokažemo levi in ​​desni rob. Toda tokrat to počnemo z uporabo background-position:

Tu se lahko ustavimo, saj že imamo lep učinek z dvema prelivoma, vendar smo tukaj, da premaknemo meje, zato dodamo kanček maske, da dosežemo tretji korak.

Trik je v tem, da naredimo zgornji rob skrit, dokler ne pokažemo dna in ob straneh, nato pa posodobimo mask-size (ali mask-position), da prikažete zgornji del. Kot sem že rekel, lahko najdemo veliko konfiguracij gradientov, da dosežemo enak učinek.

Tukaj je ilustracija gradientov, ki jih bom uporabil:

Uporabljam dva stožčasta preliva, katerih širina je enaka 200%. Oba preliva pokrivata območje, tako da ostane nepokrit le zgornji del (ta del bo kasneje neviden). Ko lebdim, podrsnem oba preliva, da pokrijem ta del.

Tukaj je boljša ilustracija enega od gradientov, da boste bolje razumeli, kaj se dogaja:

Zdaj smo to dali v notranjost mask lastnino in končali smo! Tukaj je celotna koda:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Uvedel sem tudi nekaj spremenljivk za optimizacijo kode, vendar bi se morali tega že navaditi.

Kaj pa animacija v štirih korakih? Da, možno je!

Za to ni razlage, ker je to tvoja domača naloga! Uporabite vse, kar ste se naučili v tem članku, da razčlenite kodo in poskusite artikulirati, kaj počne. Logika je podobna kot v vseh prejšnjih primerih. Ključno je izolirati vsak gradient, da bi razumeli vsak korak animacije. Kodo sem ohranil neoptimizirano, da bi bilo stvari nekoliko lažje brati. jaz imam optimizirana različica če te zanima, lahko pa poskusiš tudi sam optimizirati kodo in jo za dodatno vajo primerjaš z mojo različico.

Zavijanje

To je to za 2. del te tridelne serije o kreativnih okraskih slik z uporabo samo element. Zdaj dobro vemo, kako lahko kombiniramo prelive in maske, da ustvarimo osupljive vizualne učinke in celo animacije – brez poseganja po dodatnih elementih ali psevdoelementih. Ja, samski oznaka je dovolj!

Pred nami je še en članek v tej seriji. Do takrat pa je tu bonus demo s kul učinkom lebdenja, kjer ga uporabljam mask sestaviti pokvarjeno sliko.