A Wallet With Pockets Effect And Animation In CSS

We are starting a new column entirely dedicated to the rules of cssthanks to which we will be able to format and model elements at will HTML and create custom effects and animations by inserting them into Web pages and Internet sites.

In this lesson we will in fact see how to create a wallet or card holder using CSS, also inserting a “pocket effect” to simulate the three-dimensionality of the object.

Finally, we will see how to create a small animation, again using CSS, in order to obtain an even more realistic digital object.

The expected result is the following:

A wallet with pockets effect and animation in CSS

Now let’s see step by step how to create this custom element using only CSS code.

We structure the page

First we open the code editor we prefer, in a last guide I talked about the benefits of Bracketsfor this reason I will continue to use it also for this tutorial.

We create a new HTML document and generate the basic structure of the page.

If you decide to use Brackets, I recommend installing the extension called Emmet as thanks to this component it is possible to shorten the working time with simple keyboard shortcuts. In this case we can precompile the structure of a web page using ! + tab key.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Creare un wallet con effetto tasche e animazione in CSS</title>
</head>
<body>
</body>
</html>

Once the HTML structure of the page has been created, let’s move on to the main container:

<body>
<main></main>
</body>

We add the first code rules we define inside the tag <style></style>:

<style>
body 
   height: 100vh;
   display: grid;
   align-items: center;
   justify-items: center;
   margin: 0px;

</style>

Now let’s arrange the body so as not to have the default margins and to center the content that will be present inside, i.e. the element <main></main>. We then also define the element <main></main>setting the size, color and rounding the corners.

main 
   position: relative;
   background-color: saddlebrown;
   border-radius: 15px;
   height: 220px;
   width: 450px;

The provisional result is as follows:

We create payment cards

Once this is done, let’s continue and create the first internal element that will contain the first payment card and also the first shade that will give shape to the cut effect.

<body>
<main>
<div class="container-1">
<div class="shadow"></div>
<div class="card-1"></div>
</div>
</main>
</body>

We give each of these new elements a shape and design within the tag <style></style>:

.shadow
height: 5px;
width: 96%;
background: linear-gradient(to bottom, #111, #444, #111, #444, #111);
filter: blur(6px);
position: absolute;
top: 0px;
left:2%;
z-index: 3;

.container-1 
background-color: inherit;
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;

.card-1
width: 90%;
background-color: silver;
height: 30px;
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;

Analyzing what has been done, we notice that our element is close to the container <main> </main> and the shadow effect is not very clear as it remains flush with the upper end, for this reason we add a padding-top to the container <main> </main> so as to improve the result.

main 
padding: 20px 0px 0px 0px;
width: 450px;
height: 200px;
position: relative;
background-color: saddlebrown;
border-radius: 15px;

By creating a gradient and a slight blur applied to the item .shadow we gave shape to the pocket effect, simulating the insertion of the payment card inside the wallet.

One very important thing is to assign to the item .shadow a property z-index greater than the other elements of its group, in our case we give a value of 3.

Thanks to the property z-index it is in fact possible to define the order at the position level and in our case to obtain the desired effect it is necessary to have the shadow superimposed on the other objects.

Now all that remains is to insert other payment cards by duplicating the elements and repeating the operation. We then create the new objects.

<body>
<main>
<div class="container-1">
<div class="shadow"></div>
<div class="card-1"></div>
</div>
<div class="container-2">
<div class="shadow"></div>
<div class="card-2"></div>
</div>
<div class="container-3">
<div class="shadow"></div>
<div class="card-3"></div>
</div>
</main>
</body>

We then assign the style and evolve our macro element.

.container-2 
background-color: inherit;
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;

.card-2
width: 90%;
background-color: gold;
height: 30px
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;

.container-3 
align-items: center;
justify-items: center;
width: 100%;
height: 80px;
position: relative;

.card-3
width: 90%;
background-color: silver;
height: 30px;
position: absolute;
left: 5%;
top:-30px;
z-index: 1;
border-radius: 10px 10px 0px 0px;

We insert banknotes

We continue by adding banknotes inside our wallet in order to increase the effect of the final result, so we look for the image of a banknote and cut it at the base to place it perfectly on top of our wallet.

Now let’s create a new element entirely dedicated to the banknote and embed the image.

<div id="cash1"> <img src=" alt="Money here"> </div>

Then we assign the style rules suitable for inserting the element in the best way.

#cash1
width: 80%;
height: 120px;
position: absolute;
top: -120px;
left: 10%;
display: grid;
justify-items: center;
align-items: end;

#cash1 img
width: 100%;
height: auto;

Now let’s add a second banknote to further increase the effect of the final result

<div id="cash2"> <img src=" alt="Money here"> </div>

And even to this we assign a style.

#cash2 
width: 75%;
height: 110px;
position: absolute;
top: -100px;
left: 20%;
display: grid;
justify-items: center;
align-items: end;

#cash2 img
width: 100%;
height: auto;

At this point we further improve the result by creating an animation that will simulate the banknotes coming out of the wallet.

.animated 
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;

@-webkit-keyframes slideInUp 
from 
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
visibility: visible;

to 
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);


.slideInUp 
-webkit-animation-name: slideInUp;
animation-name: slideInUp;

Let’s add the two rules .animated And .slideInUp to the element #cash1 and reloading the page we will get the result of the animation.

We also assign the same classes to the second banknote to which we also assign a small delay:

.animation_delay 
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;

<div id="cash2" class="animated slideInUp animation_delay"> <img src=" alt="Money here"> </div>

Now all that remains is to add the style details we prefer to our wallet and the game is done.

<div id="logo"> </div>

#logo
width: 30px;
height: 30px;
background-color: lightgoldenrodyellow;
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -15px;
z-index: 3;
border-radius: 100%;

We would love to give thanks to the writer of this article for this outstanding content

A wallet with pockets effect and animation in CSS

You can find our social media accounts as well as other pages related to it.https://pyzal.com/related-pages/

We structure the page

We create payment cards

We insert banknotes

Related Posts: