Når du legger noe - for eksempel et vanlig ark - i en manilla-mappe, kan en del av den tingen titte litt ut av mappen. Det samme med lommebok og kredittkort. Kortene stikker ut bare en liten bit slik at du kan få et raskt blikk på hvilke kort du har med deg.
Jeg kaller denne typen ting en "spalte". En spalte er der vi skaper en illusjon av en åpning der vi kan erte et visuelt element som titter ut av den. Og det kan vi gjøre i CSS!
Den avgjørende delen av designet er skyggen, som er det som gir det visuelle pekepinnet på at det er en spalte. Så er det dekselet til spalten som gir plass til det utstilte elementet å titte gjennom fra undersiden.
Her er hva vi skal lage sammen:
La oss begynne med å lage skyggen
Du kan bli overrasket over at skyggen i eksemplet ikke er opprettet med en faktisk CSS-skygge, som box-shadow eller en drop-shadow() filter. I stedet er skyggen et eget element i seg selv, mørk og uskarp. Dette er viktig for å gjøre designet mer tilpasningsdyktig, både i standard- og animerte tilstander.
Dekselet er det andre elementet i designet. Dekselet er det jeg kaller elementet som overlapper skyggen. Her er en figur som viser hvordan skyggen og dekselet kommer sammen.
Skyggen er laget av et lite oppreist rektangel som har en gradientbakgrunn. Gradienten er mørkere i midten. Så når elementet er uskarpt, skaper det en skygge som er mørkere i midten; dermed mer dimensjonal.
Nå er venstre halvdel av den gjenskapte skyggen dekket med et rektangel på toppen, farget nøyaktig det samme som bakgrunnen til beholderen.
Både dekselet og skyggen flyttes så litt til venstre så det ser ut til å være lagdelt
Jobber med omslaget
For at omslaget skal blande seg med motivets bakgrunn, er bakgrunnsfargen arvet fra innholdselementet. Alternativt kan du også prøve å blande omslaget til bakgrunnen ved å bruke standarder som CSS-masker og blandingsmoduser, avhengig av dine designvalg og krav.
For å lære litt grunnleggende om hvordan disse standardene kan brukes, kan du se disse artiklene: Sarah Drasners "Masking vs. klipping: Når skal du bruke hver" gir en utmerket primer på masker. Jeg har også skrevet om CSS-blandingsmoduser i denne artikkelen hvor du kan friske opp temaet.
I kildekoden til eksemplet mitt vil du legge merke til at jeg justerte og stablet elementene inne i
Det CSS Grid også lar meg gjøre er å sette alle tre av disse divs så de er alle i full bredde i
main > div {
grid-area: 1 / 1;
}Dette får alt til å stable oppå hverandre. Normalt jobber vi hardt for å unngå å dekke elementer med andre elementer i et rutenett. Men dette eksemplet er avhengig av det. Jeg har gitt .slit-cover med en bredde på 50 % som naturlig avslører bildet under den. Derfra satte jeg en transform på den som beveger den 50 % i negativ retning, i tillegg til den lille mengden jeg flyttet skyggen tidligere (25px) for å sikre at det også blir avslørt.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Og der har vi det! En ganske naturlig spalte som etterligner noe som titter ut av en mappe, lommebok eller hva som helst.
Det er flere måter å gjøre dette på! For det første kan Flexbox få elementer til å stille seg på rad og justere i midten på denne måten. Det er mange måter å få ting ved siden av. Og kanskje du har en måte å bruke box-shadow eiendom, drop-shadow() filter, eller til og med SVG-filtre for å få samme slags skyggeeffekt som virkelig selger illusjonen.
Og du kan riffe helt på dette for å få ditt eget utseende og følelse. Prøv for eksempel å bytte posisjonen til skyggen og bildet. Eller lek med fargekombinasjonene og endre blur() filtrere verdi. Formen på dekselet og skyggen kan også justeres - jeg vedder på at du kan lage en buet skygge i stedet for en rett og dele den med oss i kommentarfeltet!
