Divatos képi dekorációk: körvonalak és összetett animációk

A három részből álló sorozat utolsó két cikkét a színátmenetekkel való játékkal töltöttük, hogy igazán ügyes képdekorációkat készítsünk, csak a elem. Ebben a harmadik és egyben utolsó részben további technikákat vizsgálunk meg a CSS használatával outline ingatlan. Ez furcsán hangzik, mert általában használjuk outline egyszerű vonalat húzni egy elem köré – valahogy úgy border de egyszerre csak mind a négy oldalát tudja megrajzolni, és nem része a dobozmodellnek.

Többet is tehetünk vele, és ebben a cikkben ezzel szeretnék kísérletezni.

Kezdjük az első példánkkal – egy fedvény, amely lebegve eltűnik egy klassz animációval:

Ezt úgy érhetjük el, ha a kép fölé egy extra elemet adunk, de ez az, amit kihívunk magunknak nem tenni ebben a sorozatban. Ehelyett a CSS-hez nyúlhatunk outline tulajdonsága és tőkeáttétele, hogy negatív eltolású lehet, és képes átfedni az elemét.

img {
  --s: 250px; /* the size of the image */
  --b: 8px;   /* the border thickness*/
  --g: 14px;  /* the gap */
  --c: #4ECDC4;

  width: var(--s);
  aspect-ratio: 1;
  outline: calc(var(--s) / 2) solid #0009;
  outline-offset: calc(var(--s) / -2);
  cursor: pointer;
  transition: 0.3s;
}
img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: var(--g);
}

A trükk az, hogy egy outline ez olyan vastag, mint a képméret fele, majd negatív értékkel kompenzálja a képméret felével. Adjon hozzá némi félig átlátszóságot a színhez, és máris megvan a rátétünk!

A többi az, ami történik :hover. Frissítjük a outline és a két körvonal közötti átmenet a hűvös lebegés hatást hozza létre. Ugyanez a technika használható fading hatás létrehozására is, ahol nem mozgatjuk a outline hanem átlátszóvá tegye.

Ahelyett, hogy feleakkora képméretet használnék, egy nagyon nagyot használok outline vastagság érték (100vmax) CSS-maszk alkalmazása közben. Ezzel már nem kell tudni a képméretet – ez a trükk minden méretben működik!

Használatával problémákba ütközhet 100vmax mint nagy érték a Safariban. Ha ez a helyzet, fontolja meg az előző trükköt, ahol kicseréli a 100vmax feleakkora képmérettel.

Még tovább vihetjük a dolgokat! Például ahelyett, hogy egyszerűen levágná az extrát outline, formákat készíthetünk és felfedő animációt alkalmazhatunk.

Menő ugye? A outline ez hozza létre a sárga fedvényt. A clip-path klip az extrát outline hogy megkapja a csillag alakját. Ezután lebegés közben átlátszóvá tesszük a színt.

Ó, szíveket akarsz helyette? Biztosan megtehetjük!

Képzeld el az összes lehetséges kombinációt, amit létrehozhatunk. Nincs más dolgunk, mint egy alakzatot rajzolni CSS maszkkal és/vagy clip-path és kombináld a outline trükk. Egy megoldás, végtelen lehetőség!

És igen, ezt biztosan animálni is tudjuk. Ezt ne felejtsük el clip-path animálható és mask színátmenetekre támaszkodik – ezt a sorozat első két cikkében rendkívül részletesen tárgyaltuk.

Tudom, az animáció egy kicsit hibás. Ez inkább egy demó az ötlet illusztrálására, nem pedig a gyártóhelyen használandó „végtermék”. Szeretnénk optimalizálni a dolgokat a természetesebb átmenet érdekében.

Itt van egy demó, amely használja mask helyette. Ez az, amivel a végén ugrattam az utolsó cikk:

Tudtad, hogy a outline az ingatlan ennyi fantasztikusságra volt képes? Adja hozzá eszköztárához díszes képdíszekért!

Kombináld az összes dolgot!

Most, hogy sok trükköt tanultunk a színátmenetek, maszkok, kivágás és körvonal használatával, eljött a nagy finálé ideje. Zárjuk le ezt a sorozatot azzal, hogy kombináljuk mindazt, amit az elmúlt hetekben tanultunk, hogy ne csak a technikákat mutassuk be, hanem azt is, hogy mennyire rugalmasak és modulárisak ezek a megközelítések.

Ha először látja ezeket a demókat, akkor feltételezheti, hogy egy csomó extra div burkoló és pszeudoelem használatos a kihúzásukhoz. De minden közvetlenül a elem. Ez az egyetlen választó, amelyre szükségünk van a fejlett formák és effektusok eléréséhez!

Csomagolta

Nos, istenem, köszönöm, hogy velem voltál ebben a három részes sorozatban az elmúlt hetekben. Számos különféle technikát vizsgáltunk meg, amelyek az egyszerű képeket látványossá és interaktívvá varázsolják. Használsz mindent, amit leírtunk? Biztosan nem! De remélem, hogy ez jó gyakorlat volt számodra a CSS-funkciók fejlettebb felhasználási módjainak, például a színátmenetek, mask, clip-pathés outline.

És mindent csak eggyel csináltunk elem! Nincsenek extra div burkolók és pszeudoelemek. Természetesen ez egy korlát, amelyet magunkra helyezünk, de arra is ösztönzött bennünket, hogy felfedezzük a CSS-t, és megpróbáljunk innovatív megoldásokat találni a gyakori használati esetekre. Tehát mielőtt extra jelölést pumpálna a HTML-be, gondolja át, hogy a CSS képes-e már kezelni a feladatot.