Hello Everyone,
Today we can create a custom credit card using CSS. I done this as a part of my current project and I wish to share with you guys. Let's jump into the code.
STEP 1 : Creating the HTML structure and Card theme
Let's create the basic html structure for the card and add some styles.
<div class='card'>
</div>
Here I have used linear-gradinet to give a shady effect to the card.
.card {
height: 310px;
width: 500px;
background-image:linear-gradient(rgba(255, 61, 61, 1),rgba(255, 61, 61, 0.8));
border-radius: 20px;
color:white;
margin:20px;
font-size: 16px;
box-shadow: 2px 2px 20px #707070;
}
STEP 2 : Creating blocks for card details and icons.
Now let's divide the card into top and bottom blocks so that we can add the details easily.
<div class='card'>
<div class='top-block'>
</div>
<div class='bottom-block'>
</div>
</div>
Then let's add width and height of the blocks.
.top-block {
display: inline-block;
width:500px;
height:155px;
}
.bottom-block {
display: inline-block;
width:500px;
height:155px;
}
STEP 3 : Adding icon and card title to the first block.
The top block of the card will display the icon of your own and the name you wish to use for the card.
<div class='card'>
<div class='top-block'>
<div class='card-chip'>
<i class="icon-credit-card icon-3x"></i>
</div>
<span class='card-name'>
Oxygen Pay
</span>
</div>
<div class='bottom-block'>
</div>
</div>
Lets' sprinkle some CSS to align the text and data in position.
.card-chip {
float:left;
margin: 20px;
}
.card-name {
float:right;
margin:20px;
position:relative;
font-size: 28px;
font-weight:550;
}
STEP 4 : Adding data to the bottom block
In this card the balance of the card will be displayed along with the card type like VISA, Master etc...
<div class='card'>
<div class='top-block'>
<div class='card-chip'>
<i class="icon-credit-card icon-3x"></i>
</div>
<span class='card-name'>
Oxygen Pay
</span>
</div>
<div class='bottom-block'>
<div class='balance'>
<div>Balance</div>
<div class='card-balance'>
$ 8619.98
</div>
</div>
<div class='card-icon'>
<span class='circle-left'>
<i class="icon-circle icon-3x "></i>
</span>
<i class="icon-circle icon-3x"></i>
</div>
</div>
</div>
To position the data we can add some CSS to it.
.balance {
float:left;
margin: 20px;
position:relative;
top:38px;
}
.card-balance {
font-weight:700;
font-size: 30px;
margin-top:10px;
}
.card-icon {
float:right;
margin: 0 20px 0 0;
margin-top:75px;
}
.circle-left {
margin-right: -15px;
opacity:0.7;
}
The card is almost done, here I have used icons from fontawesome.com if you want the same either you can use the CDN or else you can download and use.
SETP 5 : (Optional) Adding Card number
Every card has it's own number, we'll also add some card number here.
<div class='card'>
<div class='top-block'>
<div class='card-chip'>
<i class="icon-credit-card icon-3x"></i>
</div>
<span class='card-name'>
Oxygen Pay
</span>
</div>
<div class='card-number'>
<p>5459 xxxx xxxx 7203</p>
</div>
<div class='bottom-block'>
<div class='balance'>
<div>Balance</div>
<div class='card-balance'>
$ 8619.98
</div>
</div>
<div class='card-icon'>
<span class='circle-left'>
<i class="icon-circle icon-3x "></i>
</span>
<i class="icon-circle icon-3x"></i>
</div>
</div>
</div>
The card number is added to the middle of both blocks. Now we can add some styles to make it look better.
.card-number {
font-size: 28px;
margin: -15px 0 0 0;
text-align-last: center;
}
Tadaaaaa!!!!
Find this tutorial in Codepen
The card is done. You can use this anywhere in the web, if you customize the size kindly edit the styles too.
I hope you like this article and it's been useful, feel free to drop a comment, hit the like button and share.
Find my other projects at GitHub