How to Make a Folder 'Slit” Effect With CSS

Simulates the effect of paper slightly exposed from a folder, or the visual effect of a credit card slightly extending from a wallet, which is called the "crack" effect in the design. With CSS, we can cleverly create this visual illusion, making the element appear to be poked out of an opening.

The key to the design is the shadow, which provides visual clues that imply a crack. Then there are elements covering the cracks, providing space for elements peeking from below.

Together we will create an effect like this:

Create shadow first

You may be surprised to find that the shadows in the examples are not created using actual CSS shadows (such as box-shadow or drop-shadow() filters). Instead, the shadow itself is an independent element, darker and blurry in color. This is crucial to make the design more adaptable in the default and animation states.

Another element is the overlay, which overlaps over the shadow. The following image shows how shadows and overlays are combined together.

The shadow consists of a small, upright rectangle with a gradient background. The gradient is darker in the middle. So when the element is blurred, it creates a darker shadow in the middle; therefore, it has a more three-dimensional sense.

The left half of the reproduced shadow is now covered by a rectangle at the top, which has the exact same color as the background color of its container.

The overlay and shadow then move a little bit to the left to make it look like it is layered.

Treat the cover

To blend the overlay with the designed background, its background color inherits from its contained elements. Alternatively, depending on your design choices and requirements, you can also try using standards like CSS masks and blending modes to blend the overlay with its background.

A few basics about how to apply these standards, you can refer to the following article: "Masking vs. Clipping: When to Use Each" by Sarah Drasner provides an excellent introduction to masks. I've also written about CSS hybrid mode in this post where you can review related topics.

In the source code of my example, you will notice that I align and stack elements within <main></main> elements using CSS Grid (the layout standard I often use in my demo). If you are recreating a similar design, use the layout method that best suits your application to align different parts of the design. In this case, I set up a single column grid on the <main></main> element, which allows me to center the overlay, shadow, and image.

CSS Grid also allows me to set all three divs so that they are all full width in the <main></main> container:

main > div {
  grid-area: 1 / 1;
}

This makes everything stacked together. Often, we will try to avoid covering elements with other elements in the grid. But this example depends on this. I've set the width of .slit-cover to 50%, which will naturally show the image below. From there, I set a transform to move it 50% in the negative direction, plus I moved a small amount of shadows (25px) before to make sure it was displayed as well.

.slit-cover {
  width: 50%;
  transform: translatex(calc(-50% - 25px));
  /* etc. */
}

That's it! A very natural-looking crack that simulates something peeking out of a folder, a wallet or anything else.

There are more ways to do this! For example, a Flexbox can make elements line up and center aligned like this. There are many ways to make elements appear side by side. Maybe you can use the

attribute, box-shadow filter, or even the SVG filter to get the same shadow effect, which really enhances the illusion. drop-shadow()

You can adjust it as you like to get your own look and feel. For example, try to exchange shadows and image locations. Or play with the color combination and change the value of the

filter. The shape of the overlay and shadows can also be adjusted – I believe you can create a curved shadow instead of a straight shadow and share it with us in the comments! blur()

The above is the detailed content of How to Make a Folder 'Slit” Effect With CSS. For more information, please follow other related articles on the PHP Chinese website!