Credit Card Css | Flip Credit Card







Credit Card Css | Flip Credit Card 

WelcomeπŸŽ‰ to Code With Random blog. In this blog, we learn how to create Credit Card. We use HTML & CSS for Credit Card. Hope you enjoy our blog so let’s start with a basic HTML structure for the Credit Card. 

HTML code

 <div class="card">  
<div class="card__info">
<div class="card__logo">CODEWITHRANDOM</div>
<div class="card__chip">
<svg class="card__chip-lines" role="img" width="20px" height="20px" viewBox="0 0 100 100" aria-label="Chip">
<g opacity="0.8">
<polyline points="0,50 35,50" fill="none" stroke="#000" stroke-width="2" />
<polyline points="0,20 20,20 35,35" fill="none" stroke="#000" stroke-width="2" />
<polyline points="50,0 50,35" fill="none" stroke="#000" stroke-width="2" />
<polyline points="65,35 80,20 100,20" fill="none" stroke="#000" stroke-width="2" />
<polyline points="100,50 65,50" fill="none" stroke="#000" stroke-width="2" />
<polyline points="35,35 65,35 65,65 35,65 35,35" fill="none" stroke="#000" stroke-width="2" />
<polyline points="0,80 20,80 35,65" fill="none" stroke="#000" stroke-width="2" />
<polyline points="50,100 50,65" fill="none" stroke="#000" stroke-width="2" />
<polyline points="65,65 80,80 100,80" fill="none" stroke="#000" stroke-width="2" />
</g>
</svg>
<div class="card__chip-texture"></div>
</div>
<div class="card__type">debit</div>
<div class="card__number">
<span class="card__digit-group">0000</span>
<span class="card__digit-group">0021</span>
<span class="card__digit-group">4748</span>
<span class="card__digit-group">3647</span>
</div>
<div class="card__valid-thru" aria-label="Valid thru">Valid<br>thru</div>
<div class="card__exp-date"><time datetime="2038-01">01/38</time></div>
<div class="card__name" aria-label="Dee Stroyer">Anki(CWR)</div>
<div class="card__vendor" role="img" aria-labelledby="card-vendor">
<span id="card-vendor" class="card__vendor-sr">Mastercard</span>
</div>
</div>
<div class="card__texture"></div>
</div>

There is all HTML code for the Credit Card. Now, you can see output without CSS, then we write CSS for the Credit Card.

Output

Credit Card Css | Flip Credit Card

CSS code

 * {  
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,90%);
--fg: hsl(var(--hue),10%,10%);
--primary: hsl(var(--hue),90%,55%);
font-size: calc(20px + (30 - 20) * (100vw - 320px) / (1280 - 320));
}
body {
background-color: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
display: grid;
place-items: center;
perspective: 600px;
transition: background-color 0.3s;
}
.card,
.card__chip {
overflow: hidden;
position: relative;
}
.card,
.card__chip-texture,
.card__texture {
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
.card {
animation-name: rotate;
background-color: var(--primary);
background-image:
radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 29.5%,hsla(0,0%,100%,0) 30%),
radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 39.5%,hsla(0,0%,100%,0) 40%),
radial-gradient(circle at 100% 0%,hsla(0,0%,100%,0.08) 49.5%,hsla(0,0%,100%,0) 50%);
border-radius: 0.5em;
box-shadow:
0 0 0 hsl(0,0%,80%),
0 0 0 hsl(0,0%,100%),
-0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
color: hsl(0,0%,100%);
width: 10.3em;
height: 6.8em;
transform: translate3d(0,0,0);
}
.card__info,
.card__chip-texture,
.card__texture {
position: absolute;
}
.card__chip-texture,
.card__texture {
animation-name: texture;
top: 0;
left: 0;
width: 200%;
height: 100%;
}
.card__info {
font: 0.75em/1 "DM Sans", sans-serif;
display: flex;
align-items: center;
flex-wrap: wrap;
padding: 0.75rem;
inset: 0;
}
.card__logo,
.card__number {
width: 100%;
}
.card__logo {
font-weight: bold;
font-style: italic;
}
.card__chip {
background-image: linear-gradient(hsl(0,0%,70%),hsl(0,0%,80%));
border-radius: 0.2rem;
box-shadow: 0 0 0 0.05rem hsla(0,0%,0%,0.5) inset;
width: 1.25rem;
height: 1.25rem;
transform: translate3d(0,0,0);
}
.card__chip-lines {
width: 100%;
height: auto;
}
.card__chip-texture {
background-image: linear-gradient(-80deg,hsla(0,0%,100%,0),hsla(0,0%,100%,0.6) 48% 52%,hsla(0,0%,100%,0));
}
.card__type {
align-self: flex-end;
margin-left: auto;
}
.card__digit-group,
.card__exp-date,
.card__name {
background: linear-gradient(hsl(0,0%,100%),hsl(0,0%,85%) 15% 55%,hsl(0,0%,70%) 70%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-family: "Courier Prime", monospace;
filter: drop-shadow(0 0.05rem hsla(0,0%,0%,0.3));
}
.card__number {
font-size: 0.8rem;
display: flex;
justify-content: space-between;
}
.card__valid-thru,
.card__name {
text-transform: uppercase;
}
.card__valid-thru,
.card__exp-date {
margin-bottom: 0.25rem;
width: 50%;
}
.card__valid-thru {
font-size: 0.3rem;
padding-right: 0.25rem;
text-align: right;
}
.card__exp-date,
.card__name {
font-size: 0.6rem;
}
.card__exp-date {
padding-left: 0.25rem;
}
.card__name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 6.25rem;
}
.card__vendor,
.card__vendor:before,
.card__vendor:after {
position: absolute;
}
.card__vendor {
right: 0.375rem;
bottom: 0.375rem;
width: 2.55rem;
height: 1.5rem;
}
.card__vendor:before,
.card__vendor:after {
border-radius: 50%;
content: "";
display: block;
top: 0;
width: 1.5rem;
height: 1.5rem;
}
.card__vendor:before {
background-color: #e71d1a;
left: 0;
}
.card__vendor:after {
background-color: #fa5e03;
box-shadow: -1.05rem 0 0 #f59d1a inset;
right: 0;
}
.card__vendor-sr {
clip: rect(1px,1px,1px,1px);
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.card__texture {
animation-name: texture;
background-image: linear-gradient(-80deg,hsla(0,0%,100%,0.3) 25%,hsla(0,0%,100%,0) 45%);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,30%);
--fg: hsl(var(--hue),10%,90%);
}
}
/* Animation */
@keyframes rotate {
from,
to {
animation-timing-function: ease-in;
box-shadow:
0 0 0 hsl(0,0%,80%),
0.1rem 0 0 hsl(0,0%,100%),
-0.2rem 0 0.75rem 0 hsla(0,0%,0%,0.3);
transform: rotateY(-10deg);
}
25%,
75% {
animation-timing-function: ease-out;
box-shadow:
0 0 0 hsl(0,0%,80%),
0 0 0 hsl(0,0%,100%),
-0.25rem -0.05rem 1rem 0.15rem hsla(0,0%,0%,0.3);
transform: rotateY(0deg);
}
50% {
animation-timing-function: ease-in;
box-shadow:
-0.1rem 0 0 hsl(0,0%,80%),
0 0 0 hsl(0,0%,100%),
-0.3rem -0.1rem 1.5rem 0.3rem hsla(0,0%,0%,0.3);
transform: rotateY(10deg);
}
}
@keyframes texture {
from,
to {
transform: translate3d(0,0,0);
}
50% {
transform: translate3d(-50%,0,0);
}
}

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output

Credit Card Css | Flip Credit Card

Credit Card Css | Flip Credit Card

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Credit Card, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you πŸ™πŸ’•

In this post, we learn how to create a Credit Card using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki 

code by – Jon Kantner

Check out more…..

Share on:

Leave a Comment