Fancy Image Dekorációk: Single Element Magic

Ahogy a cím is mondja, képeket fogunk díszíteni! Egy csomó más cikk is szól erről, de amiről itt beszélünk, az egészen más, mert ez inkább kihívás. A kihívás? Díszítsen egy képet csak a címke és semmi több.

Így van, nincs extra jelölés, nincsenek divek és nincsenek pszeudoelemek. Csak az egyetlen címke.

Nehezen hangzik, igaz? De ennek a cikknek – és a többinek, amely ezt a kis sorozatot alkotja – végére bebizonyítom, hogy a CSS elég erős ahhoz, hogy nagyszerű és lenyűgöző eredményeket adjon, annak ellenére, hogy egyetlen elemmel dolgozhatunk.

Kezdjük az első példánkkal

Mielőtt beleásnánk magunkat a kódba, soroljuk fel az an stílusának lehetőségeit minden extra elem vagy pszeudoelem nélkül. Tudjuk használni border, box-shadow, outline, és természetesen, background. Furcsának tűnhet hátteret adni egy képhez, mert nem látjuk úgy, ahogy a kép mögött lesz – de a trükk az, hogy teret kell teremteni. körül a kép segítségével padding és / vagy border majd rajzolja meg a hátterünket azon a téren belül.

Szerintem tudod, mi következik, mióta beszéltem background, jobb? Igen, színátmenetek! Az összes díszítés, amelyet készítünk, sok színátmenetre támaszkodik. Ha van Követett engem egy ideig azt hiszem, ez valószínűleg egyáltalán nem lep meg önt. 😁

Térjünk vissza az első példánkhoz:

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

Mi határozzuk meg padding és egy átlátszó border változó segítségével --s hogy képünk körül ennek a változónak a háromszorosával egyenlő teret hozzunk létre.

Miért használjuk mindkettőt padding és a border egyik vagy másik helyett? Megkaphatjuk, ha csak az egyiket használjuk, de szükségem van erre a kombinációra a gradienshez, mert alapértelmezés szerint a background-clip is border-box és a background-origin egyenlő padding-box.

Íme egy lépésről lépésre bemutatott illusztráció a logika megértéséhez:

Kezdetben nincsenek szegélyeink a képen, így a színátmenetünk két szegmenst fog létrehozni 1px a vastagság. (Használom 3px ebben a konkrét demóban, így könnyebben látható.) Hozzáadunk egy színes szegélyt, és a színátmenet továbbra is ugyanazt az eredményt adja a kitöltési területen belül (a background-origin), de a határ mögött megismétlődik. Ha a szegély színét átlátszóvá tesszük, akkor használhatjuk az ismétlést és megkapjuk a kívánt keretet.

A outline a demóban negatív eltolás van. Ez négyzet alakú formát hoz létre a színátmenet tetején. Ez az! Képünkhöz egy szép dekorációt adtunk egy színátmenet és egy outline. Használhattunk volna több színátmenetet! De mindig igyekszem a kódomat a lehető legegyszerűbben tartani, és úgy találtam, hogy hozzáadtam egy outline jobb így.

Itt van egy csak színátmenetes megoldás, ahol csak én használom padding hogy meghatározzuk a teret. Még mindig ugyanaz az eredmény, de összetettebb szintaxissal.

Próbáljunk ki egy másik ötletet:

Ehhez az előző példát eltávolítottam a outline, és alkalmazta a clip-path hogy levágja a színátmenetet mindkét oldalon. A clip-path Az érték kissé bőbeszédű és zavaró, de itt van egy illusztráció, hogy jobban megértsük a lényegét:

Szerintem érted a fő gondolatot. A háttereket, a körvonalakat, a kivágást és a maszkolást kombináljuk, hogy különféle dekorációkat érjünk el. További bónuszként néhány klassz lebegő animációt is figyelembe veszünk! Amit eddig megnéztünk, az csupán egy kis áttekintés az elkövetkezendőkről!

A csak sarokban használható keret

Ez négy színátmenetet vesz igénybe. Minden színátmenet lefedi az egyik sarkot, és az egérmutatóval kibontjuk őket, hogy teljes keretet hozzunk létre a kép körül. Boncoljuk meg az egyik színátmenet kódját:

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

Egy színátmenetet fogunk rajzolni, amelynek mérete egyenlő 50px 50px és helyezze a bal felső sarokba (0 0). A színátmenet konfigurációjához lépésről lépésre bemutatjuk, hogyan jutottam el ehhez az eredményhez.

Hajlamosak vagyunk azt gondolni, hogy a színátmenetek csak két szín közötti átmenetre jók. De a valóságban sokkal többet tehetünk velük! Különösen hasznosak, ha különböző formák létrehozásáról van szó. A trükk az, hogy megbizonyosodjunk arról, hogy a színek között kemény megállások vannak – mint a fenti példában – a sima átmenetek helyett:

#0000 25%, darkblue 0

Ez alapvetően azt jelenti, hogy „töltsük fel a színátmenetet átlátszó színnel addig, amíg 25% a területet, majd töltse ki a maradék területet darkblue.

Lehet, hogy vakarja a fejét 0 érték. Ez egy kis hack a szintaxis egyszerűsítésére. Valójában ezt kell használnunk a színek közötti kemény megállásra:

#0000 25%, darkblue 25%

Ez logikusabb! Az átlátszó szín véget ér 25% és a darkblue pontosan ott kezdődik, ahol az átlátszóság véget ér, és keményen megáll. Ha a másodikat azzal helyettesítjük 0, a böngésző elvégzi helyettünk a munkát, így ez egy kicsit hatékonyabb módja annak.

Valahol bent a specifikációt, azt mondja:

Ha egy szín stop or átmenet tipp olyan pozícióval rendelkezik, amely kisebb, mint az előtte lévő bármely színleállító vagy átmeneti utalás megadott pozíciója a listában, állítsa be a pozícióját úgy, hogy egyenlő legyen az előtte lévő színleállító vagy átmeneti utalás legnagyobb megadott pozíciójával.

0 mindig kisebb, mint bármely más érték, ezért a böngésző mindig a deklarációban előtte lévő legnagyobb értékre konvertálja. Esetünkben ez a szám 25%.

Most ugyanazt a logikát alkalmazzuk az összes sarokra, és a következő kóddal fejezzük be:

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

CSS-változókat vezettem be, hogy elkerüljem a redundanciát, mivel az összes színátmenet ugyanazt a színkonfigurációt használja.

A lebegés effektus érdekében csak növelem a színátmenetek méretét a teljes képkocka létrehozásához:

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

Igen az 51% helyett 50% — ami kis átfedést hoz létre és elkerüli az esetleges hézagokat.

Próbáljunk ki egy másik ötletet ugyanazzal a technikával:

Ezúttal csak két színátmenetet használunk, de bonyolultabb animációval. Először frissítjük az egyes színátmenetek pozícióját, majd növeljük a méretüket a teljes képkocka létrehozásához. Több változót is bevezettem a szín, a méret, a vastagság, sőt a kép és a keret közötti rés jobb szabályozása érdekében.

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

Miért --_i és a --_p a változók nevében van aláhúzás? Az aláhúzás egy elnevezési konvenció része, amelyet a kód optimalizálásához használt „belső” változók figyelembevételére használok. Semmi különös, de különbséget szeretnék tenni a keret vezérléséhez beállított változók között (pl --b, --cstb.) és azokat, amiket a kód rövidítésére használok.

A kód zavarónak tűnhet, és nem könnyű megérteni, de írtam a három részes sorozat ahol részletezem az ilyen technikát. Nagyon ajánlom, hogy olvassa el legalább az első cikket, hogy megértse, hogyan jutottam el a fenti kódhoz.

Íme egy illusztráció a különböző értékek jobb megértéséhez:

A keret feltárul

Próbáljunk ki egy másik típusú animációt, ahol a teljes képkockát felfedjük az egérmutatóval:

Menő, igaz? És ha alaposan megnézed, észre fogod venni, hogy a vonalak az ellenkező irányba tűnnek el az egér kihúzásakor, ami még látványosabbá teszi a hatást! Én is használtam hasonló hatást egy előző cikk.

De ezúttal ahelyett, hogy az összes elemet lefedném, csak egy kis részt fedek le az a meghatározásával height hogy valami ilyesmit kapjunk:

Ez a keretünk felső határa. Ugyanezt a folyamatot megismételjük a kép mindkét oldalán, és megkapjuk a lebegő effektust:

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

Amint látja, ugyanazt a gradienst négyszer alkalmazom, és mindegyiknek más a helyzete, hogy egyszerre csak az egyik oldalt fedje le.

Másik? Gyerünk!

Ez egy kicsit trükkösnek tűnik, és valóban kell némi képzelőerő, hogy megértsük, hogy két kúpos gradiens miként húzza ki ezt a fajta varázslatot. Íme egy demó az egyik színátmenet illusztrálására:

A pszeudoelem a gradienst szimulálja. Kezdetben nem látható, és lebegtetés közben először megváltoztatjuk a helyzetét, hogy megkapjuk a keret felső szélét. Ezután növeljük a magasságot, hogy megkapjuk a jobb élt. A színátmenet alakja hasonló az előző részben használtakhoz: két szegmens a két oldal lefedésére.

De miért csináltam a színátmenet szélességét? 200%? Azt gondolnád 100% elég lenne, nem?

100% elégnek kell lennie, de nem tudom úgy mozgatni a színátmenetet, ahogy szeretném, ha a szélességét egyenlőnek tartom 100%. Ez egy másik kis furcsaság a hogyanhoz kapcsolódóan background-position művek. ezt betakarom egy előző cikk. én is közzétett egy választ a Stack Overflow oldalon ezzel foglalkozni. Tudom, hogy sokat kell olvasni, de tényleg megéri rászánni az időt.

Most, hogy elmagyaráztuk az egyik gradiens logikáját, a második egyszerű, mert pontosan ugyanazt csinálja, de ehelyett lefedi a bal és az alsó élt. Csak fel kell cserélnünk néhány értéket, és készen is vagyunk:

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

Amint láthatja, a két színátmenet majdnem azonos. Egyszerűen felcserélem a méret és a pozíció értékeit.

A keret elforgatása

Ezúttal nem a képünk köré fogunk keretet rajzolni, hanem egy meglévő megjelenését igazítjuk.

Valószínűleg azt kérdezed, hogy a fenébe tudok egy egyenest szögletes vonallá alakítani. Nem, a varázslat más, mint ez. Ez csak az az illúzió, amelyet az egyszerű animációk négy színátmenethez való kombinálása után kapunk.

Nézzük meg, hogyan készül a felső gradiens animációja:

Egyszerűen frissítem egy ismétlődő gradiens pozícióját. Még semmi divatos! Tegyük meg ugyanezt a jobb oldalon is:

Kezded látni a trükköt? Mindkét színátmenet a sarokban metszi egymást, hogy azt az illúziót keltsék, hogy az egyenes vonal szögletesre változik. Távolítsuk el a körvonalat, és rejtsük el a túlcsordulást, hogy jobban lássuk:

Most hozzáadunk még két színátmenetet, hogy lefedjük a fennmaradó éleket, és készen is vagyunk:

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

Ha ezt a kódot vesszük és kissé módosítjuk, egy újabb klassz animációt kaphatunk:

Meg tudod érteni a logikát ebben a példában? Ez a házi feladatod! A kód ijesztőnek tűnhet, de ugyanazt a logikát használja, mint az előző példákban. Próbálja meg elkülöníteni az egyes színátmeneteket, és képzelje el, hogyan animál.

Csomagolta

Ez egy csomó színátmenet egy cikkben!

Biztosan így van, és figyelmeztettelek! De ha a kihívás egy kép díszítése extra elemek és pszeudoelemek nélkül, akkor csak néhány lehetőségünk marad, és a színátmenetek a legerősebb lehetőség.

Ne aggódjon, ha egy kicsit elveszett néhány magyarázatban. Mindig ajánlom néhány régi cikkemet, ahol részletesebben kifejtem néhány olyan koncepciót, amelyet újrahasznosítottunk ehhez a kihíváshoz.

Egy utolsó bemutatóval távozom, hogy eltartsam a sorozat következő cikkéig. Ezúttal én használom radial-gradient() hogy egy másik vicces lebegő hatást hozzon létre. Hagyom, hogy boncolgassa a kódot, hogy megtudja, hogyan működik. Tegyél fel kérdéseket kommentben, ha elakadsz!