Hello Readers , today in my blog I have tried to create animated file folder with the help of CSS3 properties.
As we all do work on the computer and there is the need to manage our work in a simplified way , so for that we create folders for securing our work.
But here in this tutorial, I have created folder with a file using CSS3 properties such as transform , translate , transition , perspective etc .
In the HTML code , I have simply created 2 div , first one is the outer div with the name as folder and the inside div with the class name as inside-folder.
The folder will animate automatically whenever a user hover over the folder.
Below is the HTML code for :-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Animated Icon</title>
<!-- Fonts css file -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="container">
<div class="folder">
<div class="folder-inside"></div>
</div>
</div>
</body>
</html>
Now for applying the style to the folder , I have applied perspective property with the length as 500px , set its position to absolute and have set transform translate -50% to x-axis and -50% to y-axis .
Now for applying the transition effect by defining its time-function , duration and transition -delay .
I have also used pseudo-elements before and after to the folder div.
Moving further to the inside folder div , I have adjusted the height and the width with the position as absolute .
I have also applied box-shadow property to it, for displaying shadow. I need to rotate at an angle of -1 degree. I have applied hover effect where it would animate, below is the code for the following :-
body{
background: #99ccff;
}
/* this is for the back flap of the folder */
.folder{
-webkit-perspective: 500px;
perspective: 500px;
width: 340px;
height: 100px;
background: #ffd480;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
border-top-right-radius: 5px;
cursor: pointer;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
/* this is for the folder's tab */
.folder::before{
width: 80px;
height: 20px;
content: '';
background: #ffd480;
position: absolute;
top: -20px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
/* this is for the folder's front flap */
.folder::after{
width: 340px;
height: 210px;
position: absolute;
content: '';
background: #ffcb66;
top: 40px;
box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
/* the transform property rotates the front flap of the folder a bit t0 make it look 3D */
-webkit-transform: rotateX(-10deg);
transform: rotateX(-10deg);
-webkit-transition: all 400ms ease;
transition: all 400ms ease;
}
/* this is for the piece of paper inside the folder */
.folder-inside{
width: 320px;
height: 200px;
position: absolute;
background: #fff;
top: 20px;
left: 10px;
box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
-webkit-transform: rotate(-1deg);
transform: rotate(-1deg);
border: 1px solid #ddd;
-webkit-transition: all 200ms ease;
transition: all 200ms ease;
}
/* this is for the lines on the paper */
.folder-inside::before{
content: '';
/* we're going to use linear gradients to create the lines */
background: -webkit-repeating-linear-gradient(145deg, #ffffff, #ffffff 10px, #333333 7px, #333333 20px);
background: repeating-linear-gradient(0deg, #ffffff, #ffffff 10px, #333333 10px, #333333 20px);
position: absolute;
top: -37px;
left: 65px;
width: 200px;
height: 290px;
color: #343434;
font-size: 60px;
line-height: 30px;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 0.15;
}
/* finally let's get this folder to rotate when we hover on it */
.folder:hover{
-webkit-transform: translate(-50%, -52%);
transform: translate(-50%, -52%);
}
.folder:hover::after{
-webkit-transform: rotateX(-15deg);
transform: rotateX(-15deg);
}
.folder:hover .folder-inside{
-webkit-transform: rotate(-7deg) translateY(-15%);
transform: rotate(-7deg) translateY(-15%);
}
/* hover over the folder to see the effect in action */
Conclusion :-
Hence , I have created An Animated File Folder using CSS3 properties which was easy to create.
Note :- The above blog runs on all modern browsers such as on IE 8+ , Safari , Chrome ,Firefox , Opera , Safari IOS .
0 Comment(s)