Hienot kuvakoristeet: ääriviivat ja monimutkaiset animaatiot

Olemme käyttäneet tämän kolmiosaisen sarjan kaksi viimeistä artikkelia leikkien liukuväreillä tehdäksemme todella siistejä kuvakoristeita käyttämällä vain elementti. Tässä kolmannessa ja viimeisessä kappaleessa aiomme tutkia lisää tekniikoita CSS:n avulla outline omaisuutta. Se saattaa kuulostaa oudolta, koska käytämme yleensä outline piirtää yksinkertaisen viivan elementin ympärille - tavallaan border mutta se voi piirtää vain kaikki neljä sivua kerralla, eikä se ole osa Box-mallia.

Voimme kuitenkin tehdä sen kanssa enemmän, ja sitä haluan kokeilla tässä artikkelissa.

Aloitetaan ensimmäisestä esimerkistämme – peittokuvasta, joka katoaa hiiren päällä hienon animaation kera:

Voisimme saavuttaa tämän lisäämällä ylimääräisen elementin kuvan päälle, mutta sen me haastamme itsemme emme tehdä tässä sarjassa. Sen sijaan voimme tavoittaa CSS:n outline ominaisuus ja vipuvaikutus, että sillä voi olla negatiivinen offset ja se pystyy päällekkäin elementtinsä kanssa.

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

Temppu on luoda outline jonka paksuus on puolet kuvan koosta, ja korvaa se sitten puolella kuvan koosta negatiivisella arvolla. Lisää puoliläpinäkyvyyttä väriin ja meillä on peittokuvamme!

Loput on mitä tapahtuu :hover. Päivitämme outline ja siirtymä molempien ääriviivojen välillä luo viileän leijuvan vaikutuksen. Samaa tekniikkaa voidaan käyttää myös häivytysefektin luomiseen siellä, missä emme liikuta outline mutta tee siitä läpinäkyvä.

Sen sijaan, että käyttäisin tässä kuvakoosta puolet, käytän erittäin suurta outline paksuusarvo (100vmax) käyttäessäsi CSS-maskia. Tämän ansiosta sinun ei enää tarvitse tietää kuvan kokoa – temppu toimii kaikissa koossa!

Saatat kohdata ongelmia käytettäessä 100vmax suurena arvona Safarissa. Jos näin on, harkitse edellistä temppua, jossa vaihdat 100vmax puolet kuvan koosta.

Voimme viedä asioita pidemmälle! Esimerkiksi sen sijaan, että vain leikkaaisi ylimääräistä outline, voimme luoda muotoja ja soveltaa hienoa paljastavaa animaatiota.

Siistiä eikö? The outline Se luo keltaisen peiton. The clip-path leikkaa ylimääräistä outline saada tähden muoto. Sitten leijuttaessa teemme väristä läpinäkyvän.

Ai, haluatko sydämiä tilalle? Voimme varmasti tehdä sen!

Kuvittele kaikki mahdolliset yhdistelmät, joita voimme luoda. Meidän tarvitsee vain piirtää muoto CSS-maskilla ja/tai clip-path ja yhdistä se kanssa outline temppu. Yksi ratkaisu, rajattomat mahdollisuudet!

Ja kyllä, voimme varmasti myös animoida tämän. Älkäämme unohtako sitä clip-path on animoitu ja mask perustuu kaltevuuteen – mitä käsittelimme erittäin yksityiskohtaisesti tämän sarjan kahdessa ensimmäisessä artikkelissa.

Tiedän, animaatio on hieman sekava. Tämä on enemmän esittely idean havainnollistamiseksi kuin tuotantopaikalla käytettävä "lopputuote". Haluamme optimoida asiat luonnollisempaan siirtymiseen.

Tässä on demo, joka käyttää mask sen sijaan. Se on se, jolla kiusasin sinua lopussa viimeinen artikkeli:

Tiesitkö, että outline omaisuus kykeni niin paljon mahtavuutta? Lisää se työkalulaatikkoosi saadaksesi upeita kuvakoristeita!

Yhdistä kaikki asiat!

Nyt kun olemme oppineet monia temppuja käyttämällä liukuvärejä, naamioita, leikkausta ja ääriviivaa, on suuren finaalin aika. Päätetään tämä sarja yhdistämällä kaikki, mitä olemme oppineet viime viikkoina, esitelläksemme paitsi tekniikoita, myös kuinka joustavia ja modulaarisia nämä lähestymistavat ovat.

Jos näit nämä demot ensimmäistä kertaa, saatat olettaa, että niiden luomiseen käytetään joukko ylimääräisiä divs-kääreitä ja pseudoelementtejä. Mutta kaikki tapahtuu suoraan elementti. Se on ainoa valitsin, jonka tarvitsemme saadaksemme nämä edistyneet muodot ja tehosteet!

Käärimistä

Kiitos, että olet ollut kanssani tässä kolmiosaisessa sarjassa viime viikkoina. Tutkimme lukuisia erilaisia ​​tekniikoita, jotka tekevät yksinkertaisista kuvista jotain huomiota herättävää ja interaktiivista. Käytätkö kaikkea mitä käsittelimme? Ainakaan! Toivon kuitenkin, että tämä on ollut sinulle hyvä harjoitus perehtyä CSS-ominaisuuksien, kuten liukuvärien, edistyneisiin käyttötarkoituksiin. mask, clip-pathja outline.

Ja teimme kaiken vain yhdellä elementti! Ei ylimääräisiä div-kääreitä ja pseudoelementtejä. Toki se on rajoitus, jonka asetamme itsellemme, mutta se pakotti meidät myös tutkimaan CSS:ää ja löytämään innovatiivisia ratkaisuja yleisiin käyttötapauksiin. Joten ennen kuin lisäät ylimääräisiä merkintöjä HTML-koodiisi, mieti, pystyykö CSS jo käsittelemään tehtävän.