Tyylikkäät kuvakoristeet: naamiot ja edistyneet hover-efektit

Tervetuloa tämän kolmiosaisen sarjan osaan 2! Koristelemme edelleen kuvia ilman ylimääräisiä elementtejä ja pseudoelementtejä. Toivottavasti olet jo ehtinyt sulatella Osa 1 koska jatkamme työskentelyä monien liukuvärien kanssa luodaksemme mahtavia visuaalisia tehosteita. Esittelemme myös CSS:n mask ominaisuus monimutkaisempiin koristeisiin ja hover-efekteihin.

Katsotaanpa ensimmäistä esimerkkiä, jonka parissa työskentelemme yhdessä…

Postimerkki

Usko tai älä, postimerkin CSS-tehosteen tekemiseen tarvitaan vain kaksi gradienttia ja suodatin:

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

Kuten näimme sisään edellinen artikkeli, ensimmäinen askel on tehdä kuvan ympärille tilaa padding jotta voimme piirtää taustagradientin ja nähdä sen siellä. Sitten käytämme yhdistelmää radial-gradient() ja linear-gradient() leikkaamaan ympyrät kuvan ympäriltä.

Tässä on vaiheittainen kuva, joka näyttää, kuinka liukuvärit määritetään:

Huomaa käyttö round arvo toisessa vaiheessa. Se on tempun kannalta erittäin tärkeää, koska se varmistaa, että gradientin koko on säädetty täydellisesti kohdakkain kaikilla sivuilla riippumatta kuvan leveydestä tai korkeudesta.

alkaen eritelmä: Kuva toistetaan niin usein kuin mahtuu taustan sijaintialueelle. Jos se ei sovi kokonaisia ​​kertoja, se skaalataan uudelleen, jotta se sopii.

Pyöristetty kehys

Katsotaanpa toista kuvakoristetta, jossa käytetään ympyröitä…

Tässä esimerkissä käytetään myös a radial-gradient(), mutta tällä kertaa olen luonut piirejä noin kuva leikkaustehosteen sijaan. Huomaa, että käytän myös round arvo taas. Hankalin osa tässä on läpinäkyvä rako kehyksen ja kuvan välillä, josta kurotan CSS:ään mask omaisuus:

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

Maskauksen avulla voimme näyttää kuvan alueen - kiitos linear-gradient() siellä - samoin 20px sen kummallakin puolella - kiitos conic-gradient(). 20px ei ole muuta kuin muuttuja --s joka määrittää kehyksen koon. Toisin sanoen meidän on piilotettava aukko.

Tässä tarkoitan mitä tarkoitan:

Lineaarinen gradientti on taustan sininen osa, kun taas kartiogradientti on taustan punainen osa. Tämä läpinäkyvä osa molempien gradientien välillä on se, mitä me leikamme elementistämme luodaksemme illuusion sisäisestä läpinäkyvästä reunasta.

Läpinäkyvä sisäraja

Tätä varten emme aio luoda kehystä vaan kokeilla jotain erilaista. Aiomme luoda läpinäkyvän sisärajan sisällä meidän kuvamme. Todennäköisesti se ei ole niin hyödyllinen tosielämässä, mutta se on hyvä käytäntö CSS-maskeilla.

Kuten edellisessä esimerkissä, luotamme kahteen gradienttiin: a linear-gradient() sisäosalle ja a conic-gradient() ulompaa osaa varten. Jätämme niiden väliin välilyönnin läpinäkyvän reunusvaikutelman luomiseksi.

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

Olet ehkä huomannut, että tämän esimerkin kartiogradientilla on erilainen syntaksi kuin edellisessä esimerkissä. Molempien on tarkoitus luoda sama muoto, joten miksi ne ovat erilaisia? Se johtuu siitä, että voimme saavuttaa saman tuloksen käyttämällä erilaisia ​​syntakseja. Tämä saattaa aluksi näyttää hämmentävältä, mutta se on hyvä ominaisuus. Sinun ei tarvitse löytää Ishayoiden opettaman ratkaisu tietyn muodon saavuttamiseksi. Sinun tarvitsee vain löytää yksi sinulle toimiva ratkaisu monien mahdollisuuksien joukosta.

Tässä on neljä tapaa luoda ulompi neliö liukuvärien avulla:

On vielä useampia tapoja päästä eroon tästä, mutta ymmärrät pointin.

Best™-lähestymistapaa ei ole. Henkilökohtaisesti yritän löytää sen, jolla on pienin ja optimoitu koodi. Minulle mikä tahansa ratkaisu, joka vaatii vähemmän gradientteja, vähemmän laskelmia ja vähemmän toistuvia arvoja, on sopivin. Joskus valitsen monisanaisemman syntaksin, koska se antaa minulle enemmän joustavuutta muuttaa muuttujia ja muokata asioita. Se tulee kokemuksen ja harjoituksen myötä. Mitä enemmän pelaat gradienteilla, sitä paremmin tiedät mitä syntaksia käyttää ja milloin.

Palataanpa sisäiseen läpinäkyvään rajaamme ja kaivataan leijuva vaikutus. Jos et huomannut, on olemassa viileä hover-tehoste, joka siirtää läpinäkyvää reunaa käyttämällä a font-size temppu. Ajatuksena on määritellä --d muuttuja, jonka arvo on 1em. Tämä muuttuja ohjaa reunan etäisyyttä reunasta. Voimme muuttaa näin:

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

…antamalla meille seuraavan päivitetyn CSS:n:

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

- font-size on aluksi yhtä suuri kuin 0 ,niin 1em on myös yhtä suuri 0 ja --_d on yhtä suuri kuin --d. Leijuttaessa kuitenkin font-size on yhtä suuri kuin an määrittämä arvo --o muuttuja, joka asettaa rajan siirtymän. Tämä puolestaan ​​päivittää --_d muuttuja siirtämällä reunaa siirtymän verran. Sitten lisään toisen muuttujan, --s, ohjaamaan merkkiä, joka päättää, siirtyykö raja sisä- vai ulkopuolelle.

- font-size temppu on todella hyödyllinen, jos haluamme animoida ominaisuuksia, joita ei muuten voida animoida. Muokatut ominaisuudet, jotka on määritetty @property voi ratkaista tämän, mutta tukea sille puuttuu vielä tätä kirjoittaessani.

Kehys paljastaa

Teimme seuraavan paljastavan animaation tämän sarjan ensimmäisessä osassa:

Voimme ottaa saman idean, mutta yksivärisen reunuksen sijasta käytämme seuraavaa gradienttia:

Jos vertaat molempia koodeja, huomaat seuraavat muutokset:

1. Käytin samaa gradienttikokoonpanoa ensimmäisestä esimerkistä sisällä mask omaisuutta. Siirsin kaltevuudet yksinkertaisesti background omaisuutta mask omaisuutta.
2. Lisäsin a repeating-linear-gradient() luodaksesi gradientin reunan.

Se siitä! Käytin uudelleen suurimman osan samasta koodista, jonka näimme jo – erittäin pienillä muokkauksilla – ja sain toisen upean kuvakoristelun, jossa oli leijuva vaikutus.

/* 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;
}

Kokeillaan toista kehysanimaatiota. Tämä on hieman hankala, koska siinä on a kolmivaiheinen animaatio:

Animaation ensimmäinen vaihe on tehdä alareunasta isompi. Tätä varten säädämme background-size a linear-gradient():

Luultavasti ihmettelet, miksi lisään myös yläreunan. Tarvitsemme sen kolmanteen vaiheeseen. Yritän aina optimoida kirjoittamani koodin, joten käytän yhtä gradienttia peittämään sekä ylä- että alareunat, mutta ylempi on piilotettu ja paljastuu myöhemmin mask.

Toisessa vaiheessa lisäämme toisen gradientin näyttämään vasemman ja oikean reunan. Mutta tällä kertaa teemme sen käyttämällä background-position:

Voimme lopettaa tähän, koska meillä on jo mukava vaikutus kahdella gradientilla, mutta olemme täällä työntämään rajoja, joten lisätään ripaus maskia kolmannen askeleen saavuttamiseksi.

Temppu on piilottaa yläreuna, kunnes näytämme alaosan ja sivut, ja sitten päivitämme mask-size (Tai mask-position) näyttääksesi yläosan. Kuten aiemmin sanoin, voimme löytää monia gradienttikokoonpanoja saman vaikutuksen saavuttamiseksi.

Tässä on esimerkki gradienteista, joita aion käyttää:

Käytän kahta kartiogradienttia, joiden leveys on yhtä suuri 200%. Molemmat kaltevuudet peittävät alueen jättäen vain yläosan peittämättä (tämä osa on näkymätön myöhemmin). Liu'utan molempia liukuvärejä peittääkseni kyseisen osan.

Tässä on parempi kuva yhdestä gradientista, jotta saat paremman käsityksen siitä, mitä tapahtuu:

Nyt laitamme tämän sisään mask omaisuutta ja olemme valmis! Tässä koko koodi:

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

Olen myös ottanut käyttöön joitain muuttujia koodin optimoimiseksi, mutta sinun pitäisi olla tottunut tähän nyt.

Entä nelivaiheinen animaatio? Kyllä, se on mahdollista!

Ei selitystä tälle, koska se on kotitehtäväsi! Käytä kaikki tässä artikkelissa oppimasi koodin analysoimiseksi ja yritä ilmaista, mitä se tekee. Logiikka on samanlainen kuin kaikissa edellisissä esimerkeissä. Tärkeintä on eristää jokainen gradientti animaation jokaisen vaiheen ymmärtämiseksi. Pidin koodin optimoimatta, jotta asiat olisivat helpompi lukea. minulla on optimoitu versio jos olet kiinnostunut, mutta voit myös yrittää optimoida koodin itse ja verrata sitä minun versioon lisäharjoittelua varten.

Käärimistä

Siinä kaikki tämän kolmiosaisen sarjan osassa 2, jossa käsitellään luovia kuvakoristeita, joissa käytetään vain elementti. Meillä on nyt hyvä käsitys siitä, kuinka liukuvärejä ja maskeja voidaan yhdistää upeiden visuaalisten tehosteiden ja jopa animaatioiden luomiseksi – ilman ylimääräisiä elementtejä tai pseudoelementtejä. Kyllä, sinkku tagi riittää!

Meillä on vielä yksi artikkeli tässä sarjassa. Siihen asti tässä on bonusdemo viileällä hover-efektillä, jossa käytän mask koota rikkinäinen kuva.