{"id":374376,"date":"2022-10-19T05:56:37","date_gmt":"2022-10-19T12:56:37","guid":{"rendered":"https:\/\/css-tricks.com\/?p=374376"},"modified":"2022-10-19T05:56:38","modified_gmt":"2022-10-19T12:56:38","slug":"how-to-make-a-folder-slit-effect-with-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-make-a-folder-slit-effect-with-css\/","title":{"rendered":"How to Make\u00a0a Folder\u00a0\u201cSlit\u201d\u00a0Effect\u00a0With CSS"},"content":{"rendered":"\n

When you put something \u2014 say a regular sheet of paper \u2014 in a manilla folder, a part of that thing might peek out of the folder a little bit. The same sort of thing with a wallet and credit cards. The cards poke out just a smidge so you can get a quick glance of which cards you\u2019re carrying.<\/p>\n\n\n\n\n\n\n\n

\"\"
Credit: Stephen Phillips<\/a> on Unsplash<\/a><\/figcaption><\/figure>\n\n\n\n

I call this sort of thing a \u201cslit\u201d. A slit is where we create the illusion of an opening through which we can tease a visual element peeking out of it. And we can do that in CSS!<\/p>\n\n\n\n

The crucial part of the design is the shadow, which is what gives the visual cue of there being a slit. Then there\u2019s the cover for the slit which provides the space for the exhibited element to peek through from under.<\/p>\n\n\n\n

Here\u2019s what we\u2019re going to make together:<\/p>\n\n\n\n