Fancy slikovni okraski: Single Element Magic

Kot pravi naslov, bomo okrasili slike! Obstaja kup drugih člankov, ki govorijo o tem, toda to, kar pokrivamo tukaj, je precej drugačno, ker je večji izziv. Izziv? Okrasite sliko samo z uporabo oznaka in nič več.

Tako je, brez dodatnega označevanja, brez divov in brez psevdoelementov. Samo ena oznaka.

Sliši se težko, kajne? Toda ob koncu tega članka – in drugih, ki sestavljajo to majhno serijo – bom dokazal, da je CSS dovolj zmogljiv, da nam kljub omejitvi dela z enim samim elementom daje odlične in osupljive rezultate.

Začnimo z našim prvim primerom

Preden se poglobimo v kodo, naštejmo možnosti za oblikovanje an brez dodatnih elementov ali psevdoelementov. Lahko uporabimo border, box-shadow, outline, in seveda, background. Morda se zdi nenavadno dodati ozadje sliki, ker je ne moremo videti, saj bo za sliko - vendar je trik v tem, da ustvarite prostor okoli uporabo slike padding in / ali border in nato narišemo ozadje znotraj tega prostora.

Mislim, da veste, kaj sledi, saj sem govoril o tem background, prav? ja gradienti! Vsi okraski, ki jih bomo naredili, temeljijo na številnih prelivih. Če ste sledil mi je nekaj časa mislim, da vas to verjetno sploh ne preseneča. 😁

Vrnimo se k našemu prvemu primeru:

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

Definiramo padding in prozoren border z uporabo spremenljivke --s ustvariti prostor okoli naše slike, ki je enak trikratniku te spremenljivke.

Zakaj uporabljamo oboje padding in border namesto enega ali drugega? To lahko dosežemo z uporabo samo enega od njih, vendar potrebujem to kombinacijo za svoj gradient, ker je privzeto začetna vrednost background-clip is border-box in background-origin je enako padding-box.

Tu je ilustracija po korakih za razumevanje logike:

Na začetku na sliki nimamo robov, zato bo naš gradient ustvaril dva segmenta 1px debeline. (Uporabljam 3px v tej posebni predstavitvi, tako da je lažje videti.) Dodamo barvno obrobo in gradient nam še vedno daje enak rezultat znotraj območja oblazinjenja (zaradi background-origin), vendar se ponavlja za mejo. Če naredimo barvo obrobe transparentno, lahko uporabimo ponavljanje in dobimo želeni okvir.

O outline v demo ima negativen odmik. To ustvari kvadratno obliko na vrhu gradienta. To je to! Naši sliki smo dodali lep okras z enim prelivom in outline. Lahko bi uporabili več gradientov! Vendar vedno poskušam ohraniti svojo kodo čim bolj preprosto in ugotovil sem, da dodajanje outline bolje je tako.

Tukaj je rešitev, ki uporablja samo gradient padding za določitev prostora. Še vedno enak rezultat, vendar z bolj zapleteno sintakso.

Poskusimo še eno idejo:

Za ta primer sem vzel prejšnji primer in odstranil outline, in uporabil a clip-path za rezanje preliva na vsaki strani. The clip-path vrednost je nekoliko dobesedna in zmedena, vendar je tukaj ilustracija, da bolje vidite njene točke:

Mislim, da ste razumeli glavno idejo. Kombinirali bomo ozadja, obrise, izrezke in nekaj maskiranja, da bi dosegli različne vrste okraskov. Kot dodaten bonus bomo upoštevali tudi nekaj odličnih animacij lebdenja! Kar smo si do sedaj ogledali, je le majhen pregled tega, kar prihaja!

Samo kotni okvir

Ta ima štiri gradiente. Vsak gradient pokriva en kotiček in ko lebdimo, ga razširimo, da ustvarimo polni okvir okoli slike. Razčlenimo kodo za enega od prelivov:

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

Narisali bomo gradient z velikostjo, ki je enaka 50px 50px in ga postavite v zgornji levi kot (0 0). Za konfiguracijo gradienta je tukaj ilustracija po korakih, ki prikazuje, kako sem dosegel ta rezultat.

Ponavadi mislimo, da so prelivi dobri samo za prehod med dvema barvama. Toda v resnici lahko z njimi naredimo veliko več! Še posebej so uporabni, ko gre za ustvarjanje različnih oblik. Trik je v tem, da zagotovimo trde ustavitve med barvami – kot v zgornjem primeru – namesto gladkih prehodov:

#0000 25%, darkblue 0

To v bistvu pomeni: »napolnite gradient s prozorno barvo, dokler 25% površine, nato napolnite preostalo površino z darkblue.

Morda se praskate po glavi 0 vrednost. To je majhen kramp za poenostavitev sintakse. V resnici bi to morali uporabiti za težko zaustavitev med barvami:

#0000 25%, darkblue 25%

To je bolj logično! Prozorna barva se konča pri 25% in darkblue začne natanko tam, kjer se prosojnost konča, in se močno ustavi. Če drugega nadomestimo z 0, bo brskalnik opravil delo namesto nas, zato je to nekoliko bolj učinkovit način.

Nekje v specifikacijo, pravi:

če barvni postanek or prehodni namig ima položaj, ki je nižji od določenega položaja katerega koli barvnega konca ali namiga za prehod pred njim na seznamu, nastavite njegov položaj tako, da je enak največjemu podanemu položaju katerega koli barvnega konca ali namiga za prehod pred njim.

0 je vedno manjša od katere koli druge vrednosti, zato jo bo brskalnik vedno pretvoril v največjo vrednost, ki je pred njo v deklaraciji. V našem primeru je to število 25%.

Sedaj uporabimo isto logiko za vse vogale in zaključimo z naslednjo kodo:

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

Uvedel sem spremenljivke CSS, da bi se izognil odvečnosti, saj vsi prelivi uporabljajo isto barvno konfiguracijo.

Za učinek lebdenja je vse, kar počnem, povečanje velikosti gradientov, da ustvarim celoten okvir:

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

Ja, res je 51% Namesto 50% — ki ustvari majhno prekrivanje in prepreči morebitne vrzeli.

Poskusimo z drugo idejo z isto tehniko:

Tokrat uporabljamo le dva preliva, vendar z bolj zapleteno animacijo. Najprej posodobimo položaj vsakega preliva, nato povečamo njihovo velikost, da ustvarimo polni okvir. Uvedel sem tudi več spremenljivk za boljši nadzor nad barvo, velikostjo, debelino in celo režo med sliko in okvirjem.

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

Zakaj? --_i in --_p imajo spremenljivke podčrtaj v imenu? Podčrtaji so del dogovora o poimenovanju, ki ga uporabljam za upoštevanje "notranjih" spremenljivk, ki se uporabljajo za optimizacijo kode. Niso nič posebnega, vendar želim narediti razliko med spremenljivkami, ki jih prilagodimo za nadzor okvirja (npr --b, --c, itd.) in tiste, ki jih uporabljam za krajšanje kode.

Koda je morda videti zmedena in je ni lahko razumeti, vendar sem napisal a tridelna serija kjer podrobno opisujem takšno tehniko. Toplo priporočam, da preberete vsaj prvi članek, da razumete, kako sem prišel do zgornje kode.

Tukaj je ilustracija za boljše razumevanje različnih vrednosti:

Razkritje okvirja

Poskusimo z drugo vrsto animacije, pri kateri ob pomiku kazalca razkrijemo celoten okvir:

Kul, kajne? In če pozorno pogledate, boste opazili, da črte izginjajo v nasprotni smeri, ko miško premaknete ven, zaradi česar je učinek še bolj domiseln! Podoben učinek sem uporabil pri prejšnji članek.

Toda tokrat namesto celotnega elementa pokrivam le majhen del z definiranjem a height da dobim nekaj takega:

To je zgornja meja našega okvirja. Enak postopek ponovimo na vsaki strani slike in dosežemo učinek lebdenja:

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

Kot lahko vidite, isti gradient uporabljam štirikrat in vsak ima drugačen položaj, da pokriva samo eno stran naenkrat.

Še en? Pojdimo!

Ta izgleda nekoliko zapleteno in resnično zahteva nekaj domišljije, da bi razumeli, kako dva stožčasta preliva izvajata to vrsto čarovnije. Tukaj je predstavitev za ponazoritev enega od gradientov:

Psevdoelement simulira gradient. Sprva je izven vidnega polja in pri lebdenju najprej spremenimo njegov položaj, da dobimo zgornji rob okvirja. Nato povečamo višino, da dobimo pravi rob. Oblika preliva je podobna tistim, ki smo jih uporabili v zadnjem razdelku: dva segmenta za pokrivanje dveh strani.

Toda zakaj sem naredil širino gradienta 200%? Mislili bi si 100% bi bilo dovolj, kajne?

100% bi moralo biti dovolj, vendar ne bom mogel premakniti gradienta, kot želim, če ohranim njegovo širino enako 100%. To je še ena majhna domislica, povezana s tem, kako background-position dela. To pokrivam prejšnji članek. tudi jaz je objavil odgovor na Stack Overflow ukvarjanje s tem. Vem, da je veliko branja, vendar je res vredno vašega časa.

Zdaj, ko smo razložili logiko za en gradient, je drugi enostaven, ker dela popolnoma isto stvar, le da namesto tega pokriva levi in ​​spodnji rob. Vse kar moramo storiti je, da zamenjamo nekaj vrednosti in končali smo:

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

Kot lahko vidite, sta oba preliva skoraj enaka. Preprosto zamenjam vrednosti velikosti in položaja.

Vrtenje okvirja

Tokrat ne bomo risali okvirja okoli naše slike, temveč bomo prilagodili videz že obstoječe.

Verjetno se sprašujete, kako za vraga lahko pretvorim ravno črto v kotno črto. Ne, čarovnija je drugačna. To je samo iluzija, ki jo dobimo, ko združimo preproste animacije za štiri prelive.

Poglejmo, kako je narejena animacija za zgornji gradient:

Preprosto posodabljam položaj ponavljajočega se gradienta. Nič lepega še! Naredimo enako za desno stran:

Ali začenjate dojemati trik? Oba preliva se sekata v vogalu, da ustvarita iluzijo, kjer se ravna črta spremeni v kotno. Odstranimo oris in skrijmo preliv, da ga bolje vidimo:

Zdaj dodamo še dva gradienta, da pokrijemo preostale robove in končali smo:

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

Če vzamemo to kodo in jo nekoliko prilagodimo, lahko dobimo še eno kul animacijo:

Ali lahko ugotovite logiko v tem primeru? To je tvoja domača naloga! Koda je morda videti strašljiva, vendar uporablja isto logiko kot prejšnji primeri, ki smo si jih ogledali. Poskusite izolirati vsak gradient in si predstavljajte, kako animira.

Zavijanje

To je veliko gradientov v enem članku!

Zagotovo je in sem vas opozoril! Če pa je izziv okrasiti sliko brez dodatnih elementov in psevdoelementov, nam ostane le nekaj možnosti in prelivi so najmočnejša možnost.

Ne skrbite, če ste v nekaterih razlagah nekoliko izgubljeni. Vedno priporočam nekaj mojih starih člankov, v katerih grem podrobneje z nekaterimi koncepti, ki smo jih reciklirali za ta izziv.

Odšel bom s še zadnjo predstavitvijo, ki vas bo držala do naslednjega članka v tej seriji. Tokrat uporabljam radial-gradient() da ustvarite še en smešen učinek lebdenja. Dovolil vam bom, da razčlenite kodo, da ugotovite, kako deluje. Če se vam zatakne, mi postavite vprašanja v komentarjih!