Create a Slit Folding Effect with CSS

How to Make a Folder “Slit” Effect with CSS

Creating folder “slit” effects in CSS is a unique way to add personality and dynamism to your webpages. A folder “slit” effect can be used in several different ways, from highlighting important content to creating 3D effects. In this tutorial, we will show you how to create a folder “slit” effect using CSS.

Step 1: Set Up the HTML Structure

The first step is to set up the HTML structure for your page. We'll use a simple structure with a div element and two nested div elements. The outer div will represent the folder, while the inner div elements will serve as the slit effect.

<div class="folder">
  <div class="slit-top"></div>
  <div class="slit-bottom"></div>
</div>

Step 2: Add the Basic CSS Styles

Next, we'll add some basic CSS styles to our folder and its slit elements. We'll set the width and height of both the folder and slit elements. Additionally, we'll set some properties for the background color and box-shadow to give it a bit more dimension.

.folder {
  width: 200px;
  height: 200px;
  background-color: #F0F3F5;
  box-shadow: 0 0 5px #ccc;
  position: relative;
  overflow: hidden;
}

.slit-top, .slit-bottom {
  width: 200px;
  height: 50px;
  background-color: #dbe9f2;
  box-shadow: 0 0 1px #5889bd;
  position: absolute;
  top: 0;
  left: 0;
}

.slit-bottom {
  top: auto;
  bottom: 0;
}

Step 3: Add the Slit CSS Transitions

Now that we have the basic structure and styling in place, we can add the CSS transitions that will create the slit effect. We'll add a translate transition to the two slit elements. This will move them up and down when the mouse hovers over them, creating the illusion of a folder opening and closing.

.slit-top, .slit-bottom {
  ...
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.folder:hover .slit-top {
  -webkit-transform: translateY(-50px);
  -moz-transform: translateY(-50px);
  -o-transform: translateY(-50px);
  transform: translateY(-50px);
}

.folder:hover .slit-bottom {
  -webkit-transform: translateY(50px);
  -moz-transform: translateY(50px);
  -o-transform: translateY(50px);
  transform: translateY(50px);
}

Conclusion

And that's it! You now have a functional folder slit effect built in CSS. You can customize and tweak the effect to suit your needs and make it look great on any page!