Hienot kuvakoristeet: yhden elementin taikuutta

Kuten otsikko sanoo, aiomme koristella kuvia! On olemassa joukko muita artikkeleita, jotka puhuvat tästä, mutta se, mitä käsittelemme tässä, on melko erilainen, koska se on enemmän haastetta. Haaste? Koristele kuva käyttämällä vain tag ja ei mitään muuta.

Aivan oikein, ei ylimääräisiä merkintöjä, ei divejä eikä pseudoelementtejä. Vain yksi tunniste.

Kuulostaa vaikealta, eikö? Mutta tämän artikkelin – ja muiden, jotka muodostavat tämän pienen sarjan – loppuun mennessä todistan, että CSS on tarpeeksi tehokas antamaan meille loistavia ja upeita tuloksia yhden elementin rajoituksista huolimatta.

Aloitetaan ensimmäisestä esimerkistämme

Ennen kuin perehdymme koodiin, luetellaan mahdollisuudet muotoilla an ilman ylimääräisiä elementtejä tai pseudoelementtejä. Voimme käyttää border, box-shadow, outline, Ja tietenkin, background. Taustan lisääminen kuvaan voi näyttää oudolta, koska emme näe sitä sellaisena kuin se tulee olemaan kuvan takana – mutta temppu on luoda tilaa noin kuvaa käyttämällä padding ja / tai border ja piirrä sitten taustamme tuon tilan sisään.

Luulen, että tiedät mitä seuraavaksi, koska puhuin background, eikö? Joo, kaltevuudet! Kaikki koristeet, jotka aiomme tehdä, perustuvat moniin kaltevuuteen. Jos olet seurasi minua Hetken aikaa tämä ei luultavasti tule sinulle yllätyksenä. 😁

Palataanpa ensimmäiseen esimerkkiimme:

img {
  --s: 10px; /* control the size */
  padding: var(--s);
  border: calc(2 * var(--s)) solid #0000;
  outline: 1px solid #000;
  outline-offset: calc(-1 * var(--s));
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, #000 0);
}

Olemme määrittelemässä padding ja läpinäkyvä border käyttämällä muuttujaa --s luodaksemme kuvan ympärille tilan, joka on kolme kertaa muuttuja.

Miksi käytämme molempia padding ja border yhden tai toisen sijasta? Voimme saada käyttämällä vain yhtä niistä, mutta tarvitsen tämän yhdistelmän gradienttiini, koska oletusarvoisesti background-clip is border-box ja background-origin on yhtä suuri kuin padding-box.

Tässä on vaiheittainen kuva logiikan ymmärtämiseksi:

Aluksi meillä ei ole reunuksia kuvassa, joten gradienttimme luo kaksi segmenttiä 1px paksuudesta. (Käytän 3px tässä esittelyssä, jotta se on helpompi nähdä.) Lisäämme värillisen reunuksen ja kaltevuus antaa meille silti saman tuloksen täyttöalueen sisällä (johtuen background-origin), mutta se toistuu rajan takana. Jos teemme reunuksen väristä läpinäkyvän, voimme käyttää toistoa ja saamme haluamamme kehyksen.

- outline demossa on negatiivinen offset. Tämä luo neliön muodon gradientin yläosaan. Se siitä! Lisäsimme kuvaamme kauniin koristeen käyttämällä yhtä kaltevuutta ja an outline. Olisimme voineet käyttää enemmän gradientteja! Mutta yritän aina pitää koodini mahdollisimman yksinkertaisena ja huomasin, että lisäämällä an outline on parempi näin.

Tässä on vain gradienttiratkaisu, jossa käytän vain padding tilan määrittelemiseksi. Edelleen sama tulos, mutta monimutkaisemmalla syntaksilla.

Kokeillaan toista ideaa:

Tätä varten otin edellisen esimerkin poistetun outline, ja sovellettiin a clip-path leikata kaltevuus kummaltakin puolelta. The clip-path arvo on hieman monisanainen ja hämmentävä, mutta tässä on esimerkki, jotta näet paremmin sen kohdat:

Luulen, että ymmärrät pääidean. Yhdistelemme taustoja, ääriviivoja, leikkausta ja hieman maskausta erilaisten koristeiden aikaansaamiseksi. Aiomme harkita myös hienoja leijuanimaatioita lisäbonuksena! Se, mitä olemme tähän mennessä katsoneet, on vain pieni katsaus tulevaan!

Vain kulmaan tarkoitettu kehys

Tämä kestää neljä gradienttia. Jokainen liukuväri peittää yhden kulman, ja siirryttäessä laajennamme niitä luomaan kuvan ympärille täyden kehyksen. Tarkastellaan yhden gradientin koodia:

--b: 5px; /* border thickness */
background: conic-gradient(from 90deg at top var(--b) left var(--b), #0000 90deg, darkblue 0) 0 0;
background-size: 50px 50px; 
background-repeat: no-repeat;

Piirrämme gradientin, jonka koko on yhtä suuri 50px 50px ja aseta se vasempaan yläkulmaan (0 0). Liukuvärin määritystä varten tässä on vaiheittainen kuva, joka näyttää, kuinka saavutin tuloksen.

Meillä on tapana ajatella, että gradientit ovat hyviä vain siirtymiseen kahden värin välillä. Mutta todellisuudessa voimme tehdä heidän kanssaan paljon enemmän! Ne ovat erityisen hyödyllisiä, kun on kyse erilaisten muotojen luomisesta. Temppu on varmistaa, että värien välillä on kovia pysähdyksiä - kuten yllä olevassa esimerkissä - tasaisten siirtymien sijaan:

#0000 25%, darkblue 0

Tämä on pohjimmiltaan sanonta: "täytä gradientti läpinäkyvällä värillä, kunnes 25% alueesta ja täytä sitten loput alueesta darkblue.

Saatat raapia päätäsi 0 arvo. Se on pieni hakkerointi syntaksin yksinkertaistamiseksi. Todellisuudessa meidän pitäisi käyttää tätä tehdäksemme kovan pysähdyksen värien välillä:

#0000 25%, darkblue 25%

Se on loogisempaa! Läpinäkyvä väri päättyy klo 25% ja darkblue alkaa täsmälleen siitä, missä läpinäkyvyys päättyy, tehden vaikean pysähdyksen. Jos korvaamme toisen kanssa 0, selain hoitaa työn puolestamme, joten se on hieman tehokkaampi tapa tehdä se.

Jossain sisään eritelmä, se sanoo:

jos väripysäytys or siirtymäohje jonka sijainti on pienempi kuin minkä tahansa sitä edeltävän väripysäytys- tai siirtymävihjeen määritetty sijainti luettelossa, aseta sen sijainti yhtä suureksi kuin minkä tahansa sitä edeltävän väripysäytys- tai siirtymävihjeen suurin määritetty sijainti.

0 on aina pienempi kuin mikään muu arvo, joten selain muuntaa sen aina suurimmaksi arvoksi, joka tulee ennen sitä ilmoituksessa. Meidän tapauksessamme tämä luku on 25%.

Nyt käytämme samaa logiikkaa kaikkiin kulmiin ja päätämme seuraavaan koodiin:

img {
  --b: 5px; /* border thickness */
  --c: #0000 90deg, darkblue 0; /* define the color here */
  padding: 10px;
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b), var(--c)) 0 0,
    conic-gradient(from 180deg at top    var(--b) right var(--b), var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b), var(--c)) 0 100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b), var(--c)) 100% 100%;
  background-size: 50px 50px; /* adjust border length here */
  background-repeat: no-repeat;
}

Olen ottanut käyttöön CSS-muuttujia redundanssin välttämiseksi, koska kaikki gradientit käyttävät samaa värikonfiguraatiota.

Hover-tehosteen vuoksi lisään vain liukuvärien kokoa luodaksesi täyden ruudun:

img:hover {
  background-size: 51% 51%;
}

Kyllä se on 51% sijasta 50% — joka luo pienen päällekkäisyyden ja välttää mahdolliset aukot.

Kokeillaan toista ideaa samalla tekniikalla:

Tällä kertaa käytämme vain kahta gradienttia, mutta monimutkaisemmalla animaatiolla. Ensin päivitämme kunkin liukuvärin sijainnin ja lisäämme sitten niiden kokoa täyden kehyksen luomiseksi. Otin myös käyttöön enemmän muuttujia, jotta voit hallita paremmin väriä, kokoa, paksuutta ja jopa kuvan ja kehyksen välistä aukkoa.

img {
  --b: 8px;  /* border thickness*/
  --s: 60px; /* size of the corner*/
  --g: 14px; /* the gap*/
  --c: #EDC951; 

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

Miksi --_i ja --_p onko muuttujien nimessä alaviiva? Alaviivat ovat osa nimeämiskäytäntöä, jota käytän harkitessani "sisäisiä" muuttujia, joita käytetään koodin optimointiin. Ne eivät ole mitään erikoisia, mutta haluan tehdä eron muuttujien välillä, joita säädämme kehyksen ohjaamiseksi (kuten --b, --cjne.) ja ne, joita käytän koodin lyhentämiseen.

Koodi saattaa näyttää hämmentävältä eikä sitä ole helppo ymmärtää, mutta kirjoitin a kolmiosainen sarja jossa kerron tällaisen tekniikan. Suosittelen lukemaan ainakin ensimmäisen artikkelin ymmärtääksesi, kuinka pääsin yllä olevaan koodiin.

Tässä on esimerkki eri arvojen ymmärtämiseksi paremmin:

Kehys paljastaa

Kokeillaan toista animaatiotyyppiä, jossa näytämme koko ruudun hiirellä:

Siistiä, eikö? Ja jos katsot tarkasti, huomaat, että viivat katoavat vastakkaiseen suuntaan, kun hiiri poistuu, mikä tekee vaikutuksesta vieläkin hienomman! Käytin samanlaista tehostetta edellinen artikkeli.

Mutta tällä kertaa sen sijaan, että kattaisin kaiken elementin, katan vain pienen osan määrittämällä a height saadaksesi jotain tällaista:

Tämä on kehyksemme yläreuna. Toistamme saman prosessin kuvan kummallakin puolella ja meillä on hover-tehoste:

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

  padding: calc(var(--g) + var(--b));
  --_g: no-repeat linear-gradient(var(--c) 0 0);
  background: 
    var(--_g) var(--_i, 0%) 0,
    var(--_g) 100% var(--_i, 0%),
    var(--_g) calc(100% - var(--_i, 0%)) 100%,
    var(--_g) 0 calc(100% - var(--_i, 0%));
  background-size: var(--_i, 0%) var(--b),var(--b) var(--_i, 0%);
  transition: .4s, background-position 0s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
}

Kuten näette, käytän samaa gradienttia neljä kertaa ja jokaisella on eri asento peittääkseen vain yhden puolen kerrallaan.

Toinen? Mennään!

Tämä näyttää hieman hankalalta ja vaatii todellakin mielikuvitusta ymmärtääkseen, kuinka kaksi kartiogradienttia saavat aikaan tällaista taikuutta. Tässä on esittely, joka havainnollistaa yhtä gradienteista:

Pseudoelementti simuloi gradienttia. Se on alun perin poissa näkyvistä, ja leijuttaessa muutamme ensin sen asentoa saadaksemme kehyksen yläreunan. Sitten lisäämme korkeutta oikean reunan saamiseksi. Gradientin muoto on samanlainen kuin viimeisessä osiossa käyttämämme muoto: kaksi segmenttiä peittämään kaksi sivua.

Mutta miksi tein gradientin leveyden 200%? Luulisi 100% riittäisi, eikö?

100% pitäisi riittää, mutta en voi siirtää gradienttia haluamallani tavalla, jos pidän sen leveyden yhtä suurena 100%. Se on toinen pieni omituisuus, joka liittyy miten background-position toimii. peitän tämän edellinen artikkeli. minä myös lähetti vastauksen Stack Overflow -sivustolle käsitellä tätä. Tiedän, että se on paljon luettavaa, mutta se on todellakin aikasi arvoista.

Nyt kun olemme selittäneet yhden gradientin logiikan, toinen on helppo, koska se tekee täsmälleen saman asian, mutta peittää sen sijaan vasemman ja alareunan. Meidän tarvitsee vain vaihtaa muutama arvo ja se on valmis:

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

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

Kuten näet, molemmat gradientit ovat lähes identtisiä. Vaihdan vain koon ja sijainnin arvoja.

Kehyksen kierto

Tällä kertaa emme piirrä kehystä kuvamme ympärille, vaan säädämme olemassa olevan kuvan ilmettä.

Luultavasti kysyt, kuinka ihmeessä pystyn muuttamaan suoran kulmaviivaksi. Ei, taika on eri asia. Tämä on vain illuusio, jonka saamme yhdistämällä yksinkertaisia ​​animaatioita neljälle gradientille.

Katsotaanpa, kuinka ylimmän gradientin animaatio tehdään:

Päivitän vain toistuvan gradientin sijaintia. Ei vielä mitään hienoa! Tehdään sama oikealle puolelle:

Oletko alkanut näkemään tempun? Molemmat gradientit leikkaavat kulmassa luoden illuusion, jossa suora viiva muuttuu kulmaan. Poistetaan ääriviivat ja piilotetaan ylivuoto nähdäksesi sen paremmin:

Nyt lisäämme kaksi kaltevuutta peittämään jäljellä olevat reunat ja olemme valmiita:

img {
  --g: 4px; /* the gap */
  --b: 12px; /* border thickness*/
  --c: #669706; /* the color */

  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0, 
    var(--_g2) 0 var(--_p, 125%),
    var(--_g1) var(--_p, 125%) 100%, 
    var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b), var(--b) 200%;
  transition: .3s;
}
img:hover {
  --_p: 75%;
}

Jos otamme tämän koodin ja säädämme sitä hieman, voimme saada toisen hienon animaation:

Voitko selvittää tämän esimerkin logiikan? Se on kotitehtäväsi! Koodi saattaa näyttää pelottavalta, mutta se käyttää samaa logiikkaa kuin edelliset tarkastelimme esimerkit. Yritä eristää jokainen gradientti ja kuvitella, kuinka se animoituu.

Käärimistä

Siinä on paljon liukuvärejä yhdessä artikkelissa!

Varmasti on ja varoitin! Mutta jos haasteena on koristella kuva ilman ylimääräisiä elementtejä ja pseudoelementtejä, meille jää vain muutama mahdollisuus ja kaltevuudet ovat tehokkain vaihtoehto.

Älä huoli, jos olet hieman hukassa joissakin selityksissä. Suosittelen aina joitain vanhoja artikkeleitani, joissa käsittelen yksityiskohtaisemmin joitain tähän haasteeseen kierrättämiämme käsitteitä.

Lähden viimeisellä demolla, jotta pääset tämän sarjan seuraavaan artikkeliin. Tällä kertaa käytän radial-gradient() luodaksesi toisen hauskan hover-efektin. Annan sinun purkaa koodia nähdäksesi kuinka se toimii. Kysy kommenteissa kysymyksiä, jos jäät jumissa!