Hozzon létre tökéletes érzékeny alakzatokat a CSS vw segítségével. Online CSS3 generátor egyszerű grafikus felhasználói felülettel - EnjoyCSS Hogyan készítsünk alakzatokat css-ben

Front-end fejlesztő és vektoros illusztrátor

A vektorművészek és a front-end fejlesztők munkája gyakran megosztott. Ennek az az oka, hogy általában sok cégnél van elegendő létszám, így a szétválasztás a termelékenység növelése érdekében történik. Egy másik gyakori ok az, hogy egyesek teljes mértékben a front-end fejlesztésre akarnak koncentrálni, míg mások jobban vonzódnak az illusztrációkhoz. Mindkét iparágnak vannak sajátos rései, amelyekben az igazán jó és értékes készségek elsajátítására kell összpontosítani.

Természetesen ez a megközelítés nagyon ésszerű, de úgy gondolom, hogy egy front-end fejlesztőnek sok haszna származhat abból, ha illusztrációkkal dolgozik, még ha nem is ez a fő iránya.

A lényeg az, hogy mindkét készség lényegében a különböző komponensek összeállításáról szól a végtermék létrehozásához. Az illusztrátorok különböző formákat állítanak össze, és a formákkal dolgozva elkészítik a végső rajzot. A front-end fejlesztők pedig összeállítják a kódrészleteket, hogy létrehozzanak egy weboldalt.

A vektorgrafika alapjainak elsajátítása bemutatja az elrendezéseket, a színmintákat, a formadinamikát és általánosabban a front-end fejlesztők kreativitását.

A vektorgrafika front-end fejlesztők számára történő bemutatásának előnyeiről szóló beszélgetést azzal kezdtem, hogy a tiszta CSS-képek jól példázzák, milyen nagyszerű metszéspont lehet a vektoros illusztrátorok és a front-end fejlesztők között.

Egy kép létrehozása tiszta CSS-ben azt jelenti, hogy ahelyett szoftver vektoros illusztrációk (például Inkscape, Illustrator, Affinity Designer vagy Sketch) létrehozásához közvetlenül a CSS-kóddal kell dolgozni.

A szakmák hasonlósága ellenére úgy gondolom, hogy egy illusztrátor megfélemlítőnek találhatja a rengeteg CSS-t, ami egy kép létrehozásához szükséges, de egy front-end fejlesztőnek is - a kód segítségével történő képalkotás lehetősége.

Emiatt itt van egy útmutató az első kép létrehozásához tiszta CSS-ben, remélem:

• növeli a tiszta CSS-ben történő képek létrehozásának hitelességét;
• segít megérteni, hogyan készülnek a képek tiszta CSS-ben;
• ha Ön front-end fejlesztő, növeli érdeklődését a vektorgrafika iránt;
• ha Ön vektoros illusztrátor, növeli érdeklődését a front-end fejlesztés iránt;
• Alapsablont biztosít a tiszta CSS-képek létrehozásához.

Tiszta CSS-képkomponensek

Először is nézzük meg, mi az a „tiszta CSS”.

A „tiszta CSS-sel” való képek létrehozása magában foglalja a CSS-stílus hozzáadását több HTML divhez.

Például létrehozhatunk egy négyzetet egyetlen div-vel és egy stílussal:

Törzs (háttér: # 1D1F20;) .négyzet (szélesség: 100 képpont; magasság: 100 képpont; háttér: # A58CB6;)

Formákat fogunk létrehozni úgy, hogy a blokkokat stílusozzuk, hogy kialakítsuk belőlük a végső képet.

Minden tiszta CSS projekt a következő összetevőkből áll:

• egy div tag minden alakzathoz;
• egy adott CSS osztály minden divhez hozzárendelve;
• egy láthatatlan blokk, amely vászonként fog szolgálni.

Ez a tiszta CSS-kép végleges verziója, melyhez csak a fent felsorolt ​​komponenseket használjuk.

Mielőtt azonban elkezdenénk írni a kódot, nézzük meg, milyen konkrét formákból áll ennek a koala képe.

Alakszerkezet

Először is, a koala teljes képe egy láthatatlan négyzet alakú vászonra épült (ez nem hivatalos kifejezés). Ez a láthatatlan doboz a test közepén lesz elhelyezve, a fej pedig a doboz közepén. Személy szerint úgy gondolom, hogy ez egy jó gyakorlat a reszponzív tervezés egyszerűsítésére (erről bővebben a cikk végén).

Egyelőre ne feledje, hogy egy láthatatlan téglalap alakú dobozról van szó, amelyet alább kiemeltem:

Másodszor, van egy kör annak a weboldalnak a közepén, amelyből létrehozunk fej.

Ezután létrehozzuk fülek amelyek a fej oldalain helyezkednek el. Minden fül abból áll két színes kör amelyek átfedik egymást, az egyik kör valamivel kisebb, mint a másik. Megkülönböztetjük a fül div és a "belső fül" div.

Ezen kívül kettőnk van szemek amelyek szintén körökben, egymásra helyezve. Színben és méretben különböznek: a nagyobb kör fehér, a kisebb kör (pupilla) fekete.

Az utolsó simítás pedig két szürke hajcsomó háromszögek formájában, amelyek különböző pozíciókkal rendelkeznek a koala tetején.

Egy másik fontos dolog, amit érdemes megemlíteni, hogy a kép elkészítéséhez is különböző rétegeket fogunk használni. A fülek a fej mögött, az orr a szemek előtt, stb. Ez világosabbá válik, ahogy továbbhaladunk a CSS-sel.

HTML

Ha szőrt adunk a koalánkhoz, akkor a clip-path módszert használjuk. A Chrome, a Safari és az Opera támogatja. Ha Firefoxot használ, azt tanácsolom, hogy váltson másik böngészőre az oktatóanyag idejére.

Általában hozzáadok egy divet az alakzatként, majd stílusozom, majd továbblépek a következő divre.

Mivel azonban ez egy utasítás, először vessünk egy pillantást a HTML-re, és bontsuk fel:

Fontos megjegyezni, hogy egyes divek másokba vannak beágyazva. Vessünk egy pillantást koalánk jobb fülének divájára:

A jobb fül a szülő div, a belső fül pedig a gyermek.

Ez a megkülönböztetés azért fontos, mert az alakzatok fix pozíciót, szélességet és magasságot kapnak, százalékban kifejezve.

Tegyük fel például, hogy van egy div egy testbe ágyazva, amelynek magassága: 100%, szélessége: 100%.

A some-div osztályhoz egy rögzített pozíció van hozzárendelve, amely 10%-kal a szülőblokk teteje alatt van. Mivel a some-div 100%-os szélességű és 100%-os magasságú testbe van beágyazva, a div 10%-kal a blokk teteje alatt lesz elhelyezve.

Most helyezzünk be egy másik div-t a some-div-be, és ugyanúgy stílusozzuk:

Amint látja, teljesen más elrendezést kapunk.

Ebben a példában az other-div (kék négyzet) 10%-kal alacsonyabb, mint a some-div (piros négyzet).

Most helyezzünk át egy másik div-t a some-div-ről a body-ra, és növeljük a párnázást 30%-ra:

Az other-div most 30%-ra van behúzva a test tetejétől, nem pedig some-div.

Ezt szem előtt tartva, térjünk át a CSS-stílusokra.

CSS stílusok

test

Először is adjunk háttérszínt a testnek. Legyen olyan kék árnyalatú, mint a Twitter:

Test (háttér: # 25A9FC;)

doboz

Most alakítsuk ki a láthatatlan blokkot. Vízszintesen középre kerül (a mező változásának nyomon követéséhez adjon hozzá hátteret vagy szegélyt):

Doboz (pozíció: relatív; margó: automatikus; kijelző: blokk; // opcionális háttér és szegély háttér: fehér; szegély: folyamatos 4px piros; // írja ide a kódot)

pozíció: relatív azt jelenti, hogy az elem a normál helyzetéhez képest helyezkedik el, ami a bal felső sarokban van, mivel ez az első div a törzsben.

Ha a pozíció tulajdonság relatívra van állítva, használja a display: block; és margó: auto; hogy a mezőt automatikusan vízszintesen középre állítsa.

Ezután hozzáadhatjuk a következő kódrészletet, hogy a dobozt 8%-kal lejjebb helyezzük, a magasságot és a szélességet ugyanarra a méretre állítjuk, mint a fenti képen, végül beállíthatjuk a háttér értékét a kívánt értékre:

Doboz (pozíció: relatív; margó: automatikus; kijelző: blokk; felső margó: 8%; szélesség: 600 képpont; magasság: 420 képpont; háttér: nincs;)

Vegye figyelembe, hogy a margin-top: 8% tulajdonságot használjuk az árrés 8%-os csökkentésére. Mivel a tetejét személyre szabjuk, ez nem érinti a korábbi kitöltésünket, amelyet a margón keresztül állítottunk be: auto.

Most, hogy a doboz be van állítva, az összes többi div benne lesz. Ez megint csak azért fontos, mert amikor az abszolút pozíciókat százalékban rendeljük hozzá, akkor a div a marzs azonos százalékával pozícionálja. de nem attól test. Ugyanez az elv működik a magasságunkkal és a szélességünkkel is.

Fej

Vessünk egy pillantást a kódra a fej létrehozásához, majd bontsuk le lépésről lépésre:

Fej (pozíció: abszolút; felül: 16,5%; bal: 25%; szélesség: 50%; magasság: 67%; háttér: # A6BECF; szegélysugár: 50%;)

A felső és a bal oldali százalékok azt jelentik, hogy a div 15% lesz a margó tetejétől és 25% a bal oldaltól. A div szélessége a doboz szélességének 50%-a, a magasság pedig a doboz magasságának 67%-a. Ezt követően a háttérszínt világosszürkére állítottuk.

Ezután a szegély sugarát használjuk: 50%. Ha ezt a tulajdonságot elhagyja, a fej mindig téglalap (vagy négyzet) alakú lesz. border-radius az alakot megváltoztató tulajdonság. Ha ismeri az Illustratort, összehasonlíthatja a border-radius tulajdonság hozzáadását a négyzet éleinek húzásával annak lekerekítéséhez. Az alakzat körré kerekítéséhez mindig 50%-os tényezőt használunk.

A border-radius segítségével nem csak kört hozhatunk létre, hanem bármilyen alakzatot lekerekíthetünk, például a koalánk orrának téglalapját.

Mielőtt továbbmennénk, elmagyarázom, honnan vettem a felső és bal oldali szegély százalékos arányát, a szélességet és a magasságot. A mezőt 600 pixel szélesre állítottuk be, így az 50% 300 pixelt ad. Tekintettel arra, hogy a margó csak 400 képpont magas, a fej százalékos arányának magasabbnak kell lennie.

Valószínűleg azt várja tőlem, hogy megadjam a pontos képletet a magasság kiszámításához. Őszintén szólva általában gépeléssel találom meg a megfelelő értéket.

Minél több képet készít tiszta CSS-sel, annál gyorsabban találja meg az optimális értékeket. De most igazán gondolnia kell a szülő div magasságára és szélességére, valamint arra, hogy mekkora méretre van szüksége a gyermek divnek a szülőhöz képest.

Most, a pozíciók százalékos arányát figyelembe véve, sokkal könnyebb kiszámítani az abszolút középpontot. Íme a képlet:

Bal = (100 - szélesség) / 2 felső = (100 - magasság) / 2 // esetünkben (100 - 67) / 2 = felül: 16,5%; (100-50) / 2 = bal: 25%;

Most ez a kódrészlet működik a head div-ünkhöz, mert középre szeretnénk helyezni. Mi azonban például nem szeretnénk a füleket a középpontba helyezni. Hamarosan rátérünk erre a pontra, és azt is elmagyarázom, hogy mikor kell az alsót és a jobbat használni a felső és a bal helyett.

Az utolsó dolog, amit ebben a szakaszban el kell mondani, az az, hogy minden egyes következő div a head div-be lesz ágyazva, mivel minden hozzáadott alakzat a tetejére kerül.

A következőket kell elérnünk ebben a szakaszban:

Fej másolat

.head-copy (szélesség: 100%; magasság: 100%; pozíció: abszolút; háttér: # A6BECF; szegélysugár: 50%; z-index: 2;)

A head copy div kizárólag azért készült, hogy a fülek megjelenhessenek a fej mögött. Ehhez a z-index tulajdonságot használjuk. Figyeljük meg az előző kódrészlet utolsó sorát:

Z-index: 2;

A z-index azt a szintet jelzi, amelyen a divek másokhoz képest a képernyőre merőleges tengely mentén helyezkednek el (azaz Ön felé vagy Öntől távol). Ez a tulajdonság beállítja a rétegeket.

Végső képünkön a szemek a fej felett, az orr a szemek felett lesznek, és így tovább. Mindezt a z-index fogja szabályozni. Minél magasabb a z-index értéke, annál magasabbra kerül a div.

Tehát ha két div-je van, a z-index: 1 lesz az alsó réteg, a z-index: 2 pedig a felső. Amikor hozzáadjuk a fej másolatát, z-indexet adunk neki: 2, ami azt jelenti, hogy koalánk fülei a fej mögött helyezkednek el.

Ha tetszik, eltávolíthatja a fej másolatát, amikor hozzáadjuk a füleket, és meglátjuk, mi történik.

Nem szabadna látnunk semmilyen változást. A kép továbbra is így néz ki:

Fülek

Amint korábban említettük, mindkét oldalon egy-egy körből álló fülünk lesz. Két nagyobb világosszürke kör és két kisebb sötétszürke kör mindkét fül tetején (nevezzük őket belső fülnek).

Fül-bal (pozíció: abszolút; szélesség: 60%; magasság: 65%; bal: -20%; felül: 5%; háttér: # A6BECF; szegélysugár: 50%; z-index: 1;) .ear -jobb (pozíció: abszolút; szélesség: 60%; magasság: 65%; jobb: -20%; felül: 5%; háttér: # A6BECF; szegélysugár: 50%; z-index: 1;) .belső- fül (pozíció: abszolút; szegélysugár: 50%; szélesség: 80%; magasság: 80%; felső: 10%; bal: 10%; háttér: # 819CAF;)

Minden osztálynál használjuk a szegély sugarát: 50%, mivel köröket akarunk, majd színt adunk a háttér segítségével .
Mint látható, két különböző stílust írtunk a fülre, de csak egyet a belső fülre. Ez nyilvánvalóvá válik, ha megértjük a pozicionálást.

A jobb és bal fül szülődivje a fej. Így a százalékokat a fejhez, valamint a magassághoz és a szélességhez viszonyítva számítják ki. A magasságot és a szélességet az alapján számoljuk ki, hogy nagy füleket szeretnénk, ami azonban kisebb legyen, mint a fej. Így kapjuk a szélességet: 60% ill magasság: 65%.

A belső fülek a bal és a jobb fülben helyezkednek el. Tudjuk, hogy valamivel kisebbnek kell lenniük, ezért 80%-os szélességet és magasságot adunk nekik. Azt is szeretnénk, hogy a belső fül a fülek közepén legyen, így ismét használhatjuk az ismerős formulát:

Bal = (100 - szélesség) / 2 felső = (100 - magasság) / 2 // esetünkben ez (100 - 80) / 2 = felső: 10%; (100-80) / 2 = bal: 10%;

Mivel a bal és a jobb fülhöz viszonyítva ugyanazt a stílust használhatjuk a bal és a jobb fülre, így csak egy belső fül div. Kénytelenek vagyunk két külön fül-div-t használni, mert ezek eltérő bal és jobb értékkel rendelkeznek. a fejhez képest helyezkednek el.

Azt akarjuk, hogy a fülek kilógjanak a fej bal és jobb oldalán. Balra: -20% és jobbra: -20% negatív értékeket használunk a megadott irányba való eltoláshoz.

Íme, mi történt a végén:

// bal fül szélessége: 60%; magasság: 65%; bal: -20%; legjobb 5%; // jobb fül szélessége: 60%; magasság: 65%; jobbra: -20%; legjobb 5%;

Végül adjuk hozzá a z-indexet: 1; így a fülünk a fej alá kerül. A következőket kell beszereznünk:

Szemek

.szem-bal (pozíció: abszolút; háttér: fehér; szélesség: 30%; magasság: 33%; felső: 25%; bal: 21%; szegélysugár: 50%; z-index: 3;) .eye- jobb (pozíció: abszolút; háttér: fehér; szélesség: 30%; magasság: 33%; felül: 25%; jobb: 21%; szegélysugár: 50%; z-index: 2;) .pupil (pozíció: abszolút ; szélesség: 28%; magasság: 30%; felső: 35%; bal: 36%; szegélysugár: 50%; háttér: # 27354A;)

Amint látja, koalánk szeme hasonlít a füléhez. Két nagy fehér körünk van (bal és jobb szem) és egy pupillánk.

Ezekhez a határ sugarát használjuk: 50% , mivel körökről van szó, hátteret is használunk a megfelelő szín beállításához.

Van egy pupillánk, amely minden szemünkbe illeszkedik. Kitaláljuk a pupilla magasságát és szélességét, középre állítjuk, és ezt az eredményt kapjuk:

Szélesség: 28%; magasság: 30%; felső: 35%; bal: 36%;

A bal szem bemélyedésének meghatározásához próba és hiba vagy a fenti képlet is használható. Eközben csak találgatjuk a magassági és szélességi értékeket, amíg meg nem találjuk az optimális értéket.

// bal szem szélessége: 30%; magasság: 33%; felső: 25%; bal: 21%; // jobb szem szélessége: 30%; magasság: 33%; felső: 25%; jobb: 21%;

Ami a z-indexet illeti, a következő értékek az orrot közvetlenül a szem fölé helyezik:

// bal szem z-index: 3; // jobb szem z-index: 2;

Ennek eredményeként a következő képet kell kapnunk:

Orr

.orr (pozíció: abszolút; háttér: # BE845F; szélesség: 25%; magasság: 42,5%; bal: 37%; felső: 45%; szegélysugár: 50 képpont; z-index: 4;)

Most pedig vigyázzunk az orrra. Az összes értéket ugyanúgy választjuk ki, itt vannak az optimálisak:

Szélesség: 25%; magasság: 42,5%; bal: 37%; felső: 45%;

A háttér színét barnára állítottuk a háttér segítségével, és mélység a z-index segítségével: 4 úgy, hogy az orr a szem felett legyen.

A keret sugarát is használjuk: 50 képpont, hogy szükség szerint lekerekítsük a téglalap sarkait. Ha egy alakzatot csak egy kicsit kell kerekíteni, könnyebb a pixelek számát megadni, nem pedig százalékos arányt.

Most a következő képet kapjuk:

Haj

Majdnem kész! Utolsó lépésként stílust adunk a két hajfürtünkhöz, jobbra és balra, ami után megkapjuk a kész koala képet.

Haj-bal (pozíció: abszolút; felső: -8%; bal: 30%; szélesség: 20%; magasság: 20%; háttér: # A6BECF; -webkit-vágógörbe: sokszög (50% 0%, 0% 100%, 100% 100%); vágógörbe: sokszög (50% 0%, 0% 100%, 100% 100%);). Hajszál jobb (pozíció: abszolút; felül: -4%; bal: 48 %; szélesség: 20%; magasság: 20%; háttér: # A6BECF; -webkit-vágógörbe: sokszög (50% 0%, 0% 100%, 100% 100%); clip-path: sokszög (50% 0%, 0% 100%, 100% 100%);)

Amint látja, itt nem border-radiust használunk, hanem van egy ilyen kódunk a clip-path-al:

Webkit-clip-útvonal: sokszög (50% 0%, 0% 100%, 100% 100%); clip-path: sokszög (50% 0%, 0% 100%, 100% 100%);

A négyzettől, háromszögtől és körtől eltérő bármely alakzat esetén könnyebb a clip-path módszert használni.

Lehet, hogy ez kissé zavaróan hangzik, de szerencsére létezik egy kiváló Clippy eszköz, amely klip-útvonalakat biztosít különféle alakzatokhoz. A jobb oldalon számos különböző alakzatot fog látni:

A fenti képen a háromszög van kiválasztva, így kimásolhatja a clip-path-ot és beillesztheti a haj css osztályba.

Újra beállítjuk a színt a háttérrel, a szélességet és magasságot pedig 20%-ra mindkét kötegnél. A bal oldali köteget balra állítottuk: 30%, a jobb oldali köteget balra: 48%. Ez egy jó példa arra, hogy megvitassuk, hogy jobb vagy bal oldalt használjunk. Tegyük fel, hogy a jobb oldali köteget 5%-kal jobbra szeretnénk mozgatni. Hozzáadhatunk 5%-ot 48%-hoz, hogy balra maradjunk: 53%. A jó forma szabálya azonban az, hogy balról jobbra haladjunk, és fordítva, ha az érték 50% felett van. Ezért bal: 53% lesz egyenértékű a jobboldallal: 47%.

A felső eltolások negatívak lesznek, mivel azt szeretnénk, hogy mindkét hajcsomó kilógjon a fejünk felett. A bal oldali köteg kicsit jobban kilóg, ezért a magasságot 8%-ra állítjuk , és a jobb oldali köteg valamivel kisebb, magassága: 4% .

Elkészült a koala képünk!

Ennek eredményeként a CSS-kódnak így kell kinéznie:

Body (háttér: # 25A9FC;) .box (pozíció: relatív; margó: automatikus; kijelző: blokk; margó felső: 8%; szélesség: 600px; magasság: 420px; háttér: nincs;) .head (pozíció: abszolút; felső: 16,5%; bal: 25%; szélesség: 50%; magasság: 67%; háttér: # A6BECF; szegélysugár: 50%;) .fejmásolat (szélesség: 100%; magasság: 100%; pozíció: abszolút; háttér: # A6BECF; szegélysugár: 50%; z-index: 2;) .bal-fül (pozíció: abszolút; szélesség: 60%; magasság: 65%; bal: -20%; felül: 5% ; háttér: # A6BECF; szegélysugár: 50%; z-index: 1;) .fül-jobb (pozíció: abszolút; szélesség: 60%; magasság: 65%; jobb: -20%; felül: 5%; háttér: # A6BECF; szegélysugár: 50%; z-index: 1;) .belső fül (pozíció: abszolút; szegélysugár: 50%; szélesség: 80%; magasság: 80%; felső: 10%; bal: 10%; háttér: # 819CAF;) .szem-bal (pozíció: abszolút; háttér: fehér; szélesség: 30%; magasság: 33%; felül: 25%; bal: 21%; szegélysugár: 50% z-index: 3;) .szem-jobb (pozíció: abszolút; háttér: pünkösd e; szélesség: 30%; magasság: 33%; felső: 25%; jobb: 21%; határsugár: 50%; z-index: 3; ) .pupilla (pozíció: abszolút; szélesség: 28%; magasság: 30%; felső: 35%; bal: 36%; szegélysugár: 50%; háttér: # 27354A;) .orr (pozíció: abszolút; háttér: # BE845F; szélesség: 25%; magasság: 42,5%; bal: 37%; felső: 45%; szegélysugár: 50 képpont; z-index: 4;). Hajszál bal (pozíció: abszolút; felső: -8% ; bal: 30%; szélesség: 20%; magasság: 20%; háttér: # A6BECF; -webkit-vágógörbe: sokszög (50% 0%, 0% 100%, 100% 100%); vágógörbe: sokszög (50% 0%, 0% 100%, 100% 100%);). haj-jobb (pozíció: abszolút; felül: -4%; bal: 48%; szélesség: 20%; magasság: 20%; háttér : A6BECF ;)

További gyakorlat

Reméljük, hogy ez a cikk világosan megértette, hogyan hozhat létre képeket tiszta CSS-ben, és arra ösztönözte Önt, hogy folytassa a téma felfedezését. Ráadásul most már rendelkeznie kell egy jó sablonnal, amellyel tovább gyakorolhat.

Két ingyenes módszert is ajánlok a témával kapcsolatos készségek fejlesztésére:

1. Videotanfolyam "Pure CSS Images".
2. Kihívás "Napi CSS-képek".

Tipp programozóknak: Ha regisztrál a Huawei Honor Cupra, ingyenesen elérheti a résztvevők online iskoláját. Különböző készségeket fejleszthetsz, és magán a versenyen nyerhetsz díjakat. ...

Probléma

A képek gyémánt alakúra vágása elterjedt látványtervezési technika, de a CSS-ben egyáltalán nem könnyű megvalósítani. Valójában egészen a közelmúltig ez gyakorlatilag lehetetlen volt.

Ezért elképzeléseik megvalósításához a tervezőknek először a kívánt képeket kellett bevágniuk grafikus szerkesztő... Mondanunk sem kell, hogy a hatás alkalmazásának ez a módja óriási bonyodalmakat jelent a weboldal fenntartásában, és garantált zavart okoz a jövőben, ha valaki változtatni szeretne a képek stílusán. Ma határozottan jobb módszert kell találnunk. Valójában két ilyen út létezik!

Transzformáció alapú megoldás

A fő ötlet ugyanaz, mint az előző titok első megoldásában (lásd fentebb a "Párhuzamok" titkát) - be kell csomagolnunk a képünket