Divatos képdekorációk: maszkok és speciális lebegési effektusok

Üdvözöljük a háromrészes sorozat 2. részében! Továbbra is díszítjük a képeket minden extra elem és pszeudoelem nélkül. Remélem, már volt időd megemészteni rész 1 mert továbbra is sok színátmenettel fogunk dolgozni, hogy fantasztikus vizuális effektusokat hozzunk létre. Bemutatjuk a CSS-t is mask komplexebb dekorációkhoz és lebegő effektusokhoz.

Nézzük az első példát, amelyen együtt dolgozunk…

A postai bélyeg

Akár hiszi, akár nem, a postai bélyeg CSS-effektusához mindössze két színátmenet és egy szűrő szükséges:

img {
  --r: 10px; /* control the radius of the circles */
  padding: calc(2 * var(--r));
  filter: grayscale(.4);
  background: 
    radial-gradient(var(--r),#0000 98%,#fff) round
      calc(-1.5 * var(--r)) calc(-1.5 * var(--r)) / calc(3 * var(--r)) calc(3 * var(--r)),
    linear-gradient(#fff 0 0) no-repeat
      50% / calc(100% - 3 * var(--r)) calc(100% - 3 * var(--r));
}

Ahogy beláttuk az előző cikk, az első lépés az, hogy helyet hagyjon a kép körül azzal padding így rajzolhatunk egy háttérszínátmenetet és ott láthatjuk. Ezután a kombinációt használjuk radial-gradient() és a linear-gradient() hogy levágja azokat a köröket a kép körül.

Íme egy lépésről lépésre bemutatott illusztráció, amely bemutatja a színátmenetek beállítását:

Vegye figyelembe a használatát round értéket a második lépésben. Ez nagyon fontos a trükk szempontjából, mivel biztosítja, hogy a színátmenet mérete úgy legyen beállítva, hogy minden oldalon tökéletesen igazodjon, függetlenül a kép szélességétől vagy magasságától.

Tól től a specifikációt: A kép annyiszor ismétlődik, amennyire elfér a háttérpozícionálási területen. Ha nem fér el több alkalommal, akkor átméretezi, hogy megfeleljen.

A lekerekített keret

Nézzünk egy másik képdekorációt, amely köröket használ…

Ez a példa is használja a radial-gradient(), de ezúttal köröket hoztam létre körül a képet a kivágás hatás helyett. Figyeld meg, hogy én is a round érték újra. A legtrükkösebb itt a keret és a kép közötti átlátszó rés, ahol a CSS-hez nyúlok mask ingatlan:

img {
  --s: 20px; /* size of the frame */
  --g: 10px; /* the gap */
  --c: #FA6900; 

  padding: calc(var(--g) + var(--s));
  background: 
    radial-gradient(farthest-side, var(--c) 97%, #0000) 
      0 0 / calc(2 * var(--s)) calc(2 * var(--s)) round;
  mask:
    conic-gradient(from 90deg at calc(2 * var(--s)) calc(2 * var(--s)), #0000 25%, #000 0)
      calc(-1 * var(--s)) calc(-1 * var(--s)),
    linear-gradient(#000 0 0) content-box;
}

A maszkolás lehetővé teszi, hogy megjelenítsük a kép területét – köszönhetően a linear-gradient() odabent – ​​valamint 20px minden oldala körül – köszönhetően a conic-gradient() Az 20px nem más, mint a változó --s amely meghatározza a keret méretét. Más szóval, el kell rejtenünk a szakadékot.

Íme, mit értek:

A lineáris gradiens a háttér kék része, míg a kúpos gradiens a háttér piros része. Azt az átlátszó részt a két színátmenet között vágjuk ki az elemünkből, hogy egy belső átlátszó szegély illúzióját keltsük.

A belső átlátszó határ

Ehhez nem keretet fogunk létrehozni, hanem megpróbálunk valami mást. Átlátszó belső határt fogunk létrehozni belső képünk. Valószínűleg nem olyan hasznos a valós világban, de ez bevált gyakorlat a CSS-maszkokkal.

Az előző példához hasonlóan két gradiensre fogunk támaszkodni: a linear-gradient() a belső részhez, és a conic-gradient() a külső részhez. Hagyunk közöttük egy helyet, hogy átlátszó szegélyhatást hozzunk létre.

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */

  --_g: calc(100% - 2 * (var(--d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--d) var(--d), #0000 25%, #000 0)
      0 0 / calc(100% - var(--d)) calc(100% - var(--d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
}

Talán észrevette, hogy a példa kúpos gradiensének szintaxisa eltér az előző példától. Mindkettőnek ugyanazt a formát kell létrehoznia, miért különböznek egymástól? Ez azért van így, mert ugyanazt az eredményt különböző szintaxisokkal érhetjük el. Ez elsőre zavarónak tűnhet, de jó tulajdonság. Nem köteles megtalálni a megoldás egy adott forma elérésére. Csak egy megoldást kell találnia a sok lehetőség közül, amely az Ön számára megfelelő.

Íme négy módszer a külső négyzet színátmenetek használatával történő létrehozására:

Ennek még több módja is van, de érted a lényeget.

Nincs Best™ megközelítés. Személy szerint igyekszem megtalálni a legkisebb és leginkább optimalizált kódot. Számomra minden olyan megoldás a legalkalmasabb, amely kevesebb színátmenetet, kevesebb számítást és kevesebb ismételt értéket igényel. Néha bőbeszédűbb szintaxist választok, mert ez nagyobb rugalmasságot biztosít a változók megváltoztatásához és a dolgok módosításához. Ez tapasztalattal és gyakorlattal jön. Minél többet játszik a színátmenetekkel, annál jobban tudja, milyen szintaxist és mikor használjon.

Térjünk vissza a belső átlátszó határunkhoz, és ássunk bele a lebegő effektusba. Ha nem vette észre, van egy hűvös lebegési effektus, amely az átlátszó szegélyt a segítségével mozgatja font-size trükk. Az ötlet az, hogy meghatározzuk a --d értékű változó 1em. Ez a változó szabályozza a szegély távolságát a széltől. A következőképpen alakíthatjuk át:

--_d: calc(var(--d) + var(--s) * 1em)

…adja nekünk a következő frissített CSS-t:

img {
  --b: 5px;  /* the border thickness */
  --d: 20px; /* the distance from the edge */
  --o: 15px; /* the offset on hover */
  --s: 1;    /* the direction of the hover effect (+1 or -1)*/

  --_d: calc(var(--d) + var(--s) * 1em);
  --_g: calc(100% - 2 * (var(--_d) + var(--b)));
  mask:
    conic-gradient(from 90deg at var(--_d) var(--_d), #0000 25%, #000 0)
     0 0 / calc(100% - var(--_d)) calc(100% - var(--_d)),
    linear-gradient(#000 0 0) 50% / var(--_g) var(--_g) no-repeat;
  font-size: 0;
  transition: .35s;
}
img:hover {
  font-size: var(--o);
}

A font-size kezdetben egyenlő 0 ,így 1em szintén egyenlő 0 és a --_d egyenlő legyen --d. Lebegés közben azonban a font-size egyenlő az an által meghatározott értékkel --o változó, amely beállítja a szegély eltolását. Ez pedig frissíti a --_d változó, a határt az eltolás mértékével mozgatja. Aztán hozzáadok egy másik változót, --s, annak a jelnek a vezérlésére, amely eldönti, hogy a határ befelé vagy kifelé mozduljon el.

A font-size trükk akkor hasznos, ha olyan tulajdonságokat akarunk animálni, amelyek egyébként nem animálhatók. -val definiált egyéni tulajdonságok @property meg lehet oldani, de támogatást hozzá még mindig hiányzik, amikor ezt írom.

A keret feltárul

A sorozat első részében a következő leleplező animációt készítettük:

Ugyanezt az ötletet is használhatjuk, de az egyszínű szegély helyett a következő színátmenetet használjuk:

Ha összehasonlítja a két kódot, a következő változásokat észlelheti:

1. Ugyanazt a színátmenet-konfigurációt használtam, mint az első példában a mask ingatlan. Egyszerűen áthelyeztem a színátmeneteket a background tulajdon a mask ingatlan.
2. Hozzátettem a repeating-linear-gradient() a színátmenet szegélyének létrehozásához.

Ez az! Újra felhasználtam a már látott kód nagy részét - szuper kis módosításokkal -, és kaptam egy másik klassz képdekorációt lebegő effektussal.

/* Solid color border */

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

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

/* Gradient color border */

img {
  --b: 10px; /* the border thickness*/
  --g: 5px;  /* the gap on hover */
  background: repeating-linear-gradient(135deg, #F8CA00 0 10px, #E97F02 0 20px, #BD1550 0 30px);

  padding: calc(var(--g) + var(--b));
  --_g: #0000 25%, #000 0;
  mask: 
    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,
    linear-gradient(#000 0 0) content-box;
  transition: .3s, mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, mask-size .3s .3s;
}

Próbáljunk ki egy másik képkocka-animációt. Ez egy kicsit trükkös, mivel rendelkezik a háromlépcsős animáció:

Az animáció első lépése az alsó szél megnagyobbítása. Ehhez igazítjuk a background-size Egy linear-gradient():

Valószínűleg azon töpreng, miért adom hozzá a felső élt is. Szükségünk van rá a harmadik lépéshez. Mindig igyekszem optimalizálni a kódot, amit írok, ezért egy színátmenetet használok a felső és az alsó oldal lefedésére, de a felső rejtett, és később megjelenik egy mask.

A második lépéshez hozzáadunk egy második színátmenetet a bal és jobb szélek megjelenítéséhez. De ezúttal használjuk background-position:

Itt meg is állhatunk, hiszen már két színátmenettel is szép hatást érünk el, de azért vagyunk itt, hogy feszegetjük a határokat, ezért adjunk hozzá egy csipetnyi maszkot a harmadik lépés eléréséhez.

A trükk az, hogy a felső élt addig rejtjük, amíg meg nem mutatjuk az alját és az oldalait, majd frissítjük a mask-size (Vagy mask-position) a felső rész megjelenítéséhez. Ahogy korábban mondtam, sok gradiens konfigurációt találhatunk ugyanazon hatás eléréséhez.

Íme az általam használt színátmenetek illusztrációja:

Két kúpos gradienst használok, amelyek szélessége egyenlő 200%. Mindkét színátmenet lefedi a területet, és csak a felső része marad fedetlen (ez a rész később láthatatlan lesz). Lebegtetés közben mindkét színátmenetet elcsúsztatom, hogy lefedje azt a részt.

Íme egy jobb szemléltetés az egyik színátmenetről, hogy jobban megértse, mi történik:

Ezt most a belsejébe helyezzük mask ingatlan és kész! Itt a teljes kód:

img {
  --b: 6px;  /* the border thickness*/
  --g: 10px; /* the gap */
  --c: #0E8D94;

  padding: calc(var(--b) + var(--g));
  --_l: var(--c) var(--b), #0000 0 calc(100% - var(--b)), var(--c) 0;
  background:
    linear-gradient(var(--_l)) 50%/calc(100% - var(--_i,80%)) 100% no-repeat,
    linear-gradient(90deg, var(--_l)) 50% var(--_i,-100%)/100% 200% no-repeat;  
  mask:
    conic-gradient(at 50% var(--b),#0000 25%, #000 0) calc(50% + var(--_i, 50%)) / 200%,
    conic-gradient(at 50% var(--b),#000 75%, #0000 0) calc(50% - var(--_i, 50%)) / 200%;
  transition: 
    .3s calc(.6s - var(--_t,.6s)) mask-position, 
    .3s .3s background-position,
    .3s var(--_t,.6s) background-size,
    .4s transform;
  cursor: pointer;
}
img:hover {
  --_i: 0%;
  --_t: 0s;
  transform: scale(1.2);
}

Bevezettem néhány változót is a kód optimalizálása érdekében, de ezt most meg kell szokni.

Mi a helyzet egy négylépcsős animációval? Igen, lehetséges!

Erre nincs magyarázat, mert ez a házi feladatod! Vegye figyelembe mindazt, amit ebben a cikkben tanult, hogy boncolgassa a kódot, és próbálja meg megfogalmazni, mit csinál. A logika hasonló az összes előző példához. A kulcs az, hogy minden színátmenetet elkülönítsenek, hogy megértsék az animáció minden lépését. A kódot nem optimalizáltam, hogy a dolgok könnyebben olvashatóak legyenek. nekem van optimalizált verzió ha érdekel, de megpróbálhatod magad optimalizálni a kódot és összehasonlítani az én verziómmal a további gyakorlat kedvéért.

Csomagolta

Ennyi a három részes sorozat 2. része, amely a kreatív képdekorációkat használja, csak a elem. Most már jól tudjuk, hogyan lehet a színátmeneteket és a maszkokat kombinálni fantasztikus vizuális effektusok, sőt animációk létrehozásához – anélkül, hogy extra elemekhez vagy pszeudoelemekhez nyúlnánk. Igen, egy szingli cimke elég!

Van még egy cikkünk ebben a sorozatban. Addig is itt van egy bónusz demó hűvös lebegés effektussal, ahol én használom mask összeállítani egy törött képet.