När du lägger något - säg ett vanligt pappersark - i en manillamapp kan en del av den saken titta ut ur mappen lite. Samma sak med plånbok och kreditkort. Korten sticker ut bara en smula så att du snabbt kan se vilka kort du bär på.
Jag kallar sånt här en "slits". En slits är där vi skapar illusionen av en öppning genom vilken vi kan reta ett visuellt element som tittar ut ur den. Och det kan vi göra i CSS!
Den avgörande delen av designen är skuggan, som är det som ger den visuella signalen om att det finns en slits. Sedan är det locket till slitsen som ger utrymme för det utställda elementet att titta igenom underifrån.
Här är vad vi ska göra tillsammans:
Låt oss börja med att skapa skuggan
Du kanske blir förvånad över att skuggan i exemplet inte skapas med en riktig CSS-skugga, som box-shadow eller ett drop-shadow() filtrera. Istället är skuggan ett separat element i sig, mörkt och suddigt. Detta är viktigt för att göra designen mer anpassningsbar, både i standardläge och animerat tillstånd.
Omslaget är det andra elementet i designen. Omslaget är vad jag kallar elementet som överlappar skuggan. Här är en figur som visar hur skuggan och omslaget möts.
Skuggan är gjord av en liten upprätt rektangel som har en gradientbakgrund. Gradienten är mörkare i mitten. Så när elementet är suddigt skapar det en skugga som är mörkare i mitten; alltså mer dimensionell.
Nu är den vänstra halvan av den återskapade skuggan täckt med en rektangel ovanpå, färgad exakt samma som bakgrunden på dess behållare.
Både omslaget och skuggan flyttas sedan lite åt vänster så att det ser ut att vara skiktat
Jobbar på omslaget
För att omslaget ska blandas med motivets bakgrund ärvs dess bakgrundsfärg från dess innehållande element. Alternativt kan du också försöka blanda omslaget till dess bakgrund med standarder som CSS-masker och blandningslägen, beroende på dina designval och krav.
För att lära dig några grunder om hur dessa standarder kan tillämpas, kan du hänvisa till dessa artiklar: Sarah Drasners "Maskning vs. klippning: När ska man använda varje" ger en utmärkt primer på masker. Jag har också skrivit om CSS-blandningslägen i den här artikeln där du kan fräscha upp ämnet.
I källkoden till mitt exempel kommer du att märka att jag justerade och staplade elementen inuti
Vad CSS Grid också tillåter mig att göra är att ställa in alla tre av dessa divs så de är alla i full bredd i
main > div {
grid-area: 1 / 1;
}Detta får allt att staplas ovanpå varandra. Normalt arbetar vi hårt för att undvika att täcka element med andra element i ett rutnät. Men detta exempel förlitar sig på det. Jag har gett .slit-cover vid en bredd på 50 % vilket naturligt avslöjar bilden under den. Därifrån satte jag en transform på den som flyttar den 50 % i negativ riktning, plus den lilla mängd jag flyttade skuggan tidigare (25px) för att se till att det också avslöjas.
.slit-cover {
width: 50%;
transform: translatex(calc(-50% - 25px));
/* etc. */
}Och där har vi det! En ganska naturlig slits som efterliknar något som tittar ut ur en mapp, plånbok eller vad som helst.
Det finns fler sätt att göra detta! För det första kan Flexbox få element att rada upp i en rad och justera i mitten så här. Det finns många sätt att få saker sida vid sida. Och kanske har du ett sätt att använda box-shadow fast egendom, drop-shadow() filter, eller till och med SVG-filter för att få samma sorts skuggeffekt som verkligen säljer illusionen.
Och du kan riffa på det här för att få ditt eget utseende och känsla. Prova till exempel att byta position för skuggan och bilden. Eller lek med färgkombinationerna och ändra blur() filtrera värde. Formen på omslaget och skuggan kan också justeras — jag slår vad om att du kan skapa en böjd skugga istället för en rak och dela den med oss i kommentarerna!
