Ha valamit - mondjuk egy normál papírlapot - egy manilla mappába teszel, annak egy része egy kicsit kikandikálhat a mappából. Ugyanez a helyzet a pénztárcával és a hitelkártyákkal. A kártyák csak egy kicsit állnak ki, így gyorsan áttekintheti, melyik kártyát hordja.
Én az ilyesmit „résnek” nevezem. A rés az, ahol egy nyílás illúzióját keltjük, amelyen keresztül kikukucskálhatunk egy vizuális elemet. És ezt megtehetjük CSS-ben!
A tervezés döntő része az árnyék, amely vizuálisan utal arra, hogy van egy rés. Aztán ott van a rés burkolata, amely a kiállított elemnek alulról bepillanthat.
Íme, mit fogunk közösen elkészíteni:
Kezdjük az árnyék létrehozásával
Meglepődhet, hogy a példában szereplő árnyék nem valódi CSS-árnyékkal jön létre, mint pl box-shadow vagy drop-shadow() szűrő. Ehelyett az árnyék egy különálló elem, sötét és elmosódott. Ez azért fontos, hogy a tervezés jobban adaptálható legyen, mind alapértelmezett, mind animált állapotban.
A borító a design másik eleme. A borító az, amit én az árnyékot átfedő elemnek nevezek. Íme egy ábra, amely az árnyék és a borító egymáshoz való illeszkedését ábrázolja.
Az árnyék egy kis függőleges téglalapból készül, amelynek színátmenetes háttere van. A gradiens középen sötétebb. Tehát amikor az elem elmosódott, akkor egy sötétebb árnyékot hoz létre a közepén; ennélfogva dimenziósabb.
Most az újraalkotott árnyék bal felét egy téglalap borítja a tetején, amely pontosan ugyanolyan színű, mint a tartály háttere.
Ezután a borító és az árnyék is olyan enyhén balra kerül, hogy rétegesnek tűnjön
A borítón dolgozik
Ahhoz, hogy a borító beleolvadjon a minta hátterébe, háttérszíne a tárolóelemtől öröklődik. Alternatív megoldásként megpróbálhatja a borítót a hátteréhez keverni, például szabványok segítségével CSS maszkok és a keverési módok, a tervezési döntéseitől és követelményeitől függően.
Ha meg szeretne tanulni néhány alapvető tudnivalót ezen szabványok alkalmazásáról, tekintse meg ezeket a cikkeket: Sarah Drasner „Maszkolás kontra vágás: mikor érdemes mindegyiket használni” kiváló alapozót biztosít a maszkokon. A CSS keverési módokról is írtam ebben a cikkben ahol felfrissítheti a témát.
Példám forráskódjában észreveheti, hogy az elemeket a következőben igazítottam és halmoztam
Amit a CSS Grid is megenged, az az, hogy mindhárom beállítást beállítsam divs így ezek mind teljes szélességben a
main > div {
grid-area: 1 / 1;
}Így minden egymásra rakódik. Általában keményen dolgozunk, hogy elkerüljük, hogy az elemeket egy rács más elemeivel fedjük le. De ez a példa erre támaszkodik. Megadtam a .slit-cover 50%-os szélességben, ami természetesen felfedi az alatta lévő képet. Onnan beállítottam a transform azon, amely 50%-kal negatív irányba mozgatja, plusz az a kis mennyiség, amivel korábban eltoltam az árnyékot (25px), hogy ez is kiderüljön.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}És itt van! Egy elég természetes kinézetű rés, amely utánoz valamit, ami kikandikál egy mappából, pénztárcából vagy bármi másból.
Ennek több módja is van! Egyrészt a Flexbox képes arra, hogy az elemek sorba rendeződjenek, és így középre igazodjanak. Sokféleképpen lehet egymás mellé állítani a dolgokat. És talán van módod használni a box-shadow ingatlan, drop-shadow() szűrőt, vagy akár SVG szűrők hogy ugyanazt a fajta árnyékhatást érje el, amely valóban eladja az illúziót.
Ezt pedig teljes mértékben riffelheted, hogy saját megjelenésed és hangulatod legyen. Például próbálja meg felcserélni az árnyék és a kép helyzetét. Vagy játsszon a színkombinációkkal és változtassa meg a blur() szűrő érték. A borító és az árnyék formája is módosítható – lefogadom, hogy egyenes árnyék helyett készíthetsz ívelt árnyékot, és oszd meg velünk kommentben!
