<div class="card">
<div class="bank-name" title="BestBank" style="font-size:20px;">memoria membership card
</div>
<div class="chip">
<div class="side left"></div>
<div class="side right"></div>
<div class="vertical top"></div>
<div class="vertical bottom"></div>
</div>
<div class="data">
<div class="pan" title="4123 4567 8910 1112">4123 4567 8910 1112</div>
<div class="first-digits">4123</div>
<div class="exp-date-wrapper">
<div class="left-label">EXPIRES END</div>
<div class="exp-date">
<div class="upper-labels">MONTH/YEAR</div>
<div class="date" title="01/17">01/17</div>
</div>
</div>
<div class="name-on-card" title="John Doe">John Doe</div>
</div>
<div class="lines-down"></div>
<div class="lines-up"></div>
</div>@import "lesshat";
@import url(https://fonts.googleapis.com/css?family=Iceland);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
body {
background-color: #ecf0f1;
}
.card {
position: absolute;
.pos(0, 0, 0, 0);
margin: auto;
width: 85.60mm;
height: 53.98mm;
color: #fff;
font: 22px/1 @monospace;
background:#4a1427;
border: 1px solid #441802;
.border-radius(10px);
overflow: hidden;
}
.bank-name {
float: right;
margin-top: 15px;
margin-right: 30px;
font: 800 28px @sansSerif;
}
.chip {
position: relative;
z-index: 1000;
.size(@chipWidth, @chipHeight);
margin-top: 50px;
margin-bottom: 10px;
margin-left: 30px;
background: @chipYellowLight; /* Old browsers */
background: linear-gradient(-45deg, @chipYellowLight 0%, @chipYellowDark 100%); /* FF3.6+ */
background: gradient(linear, left top, right bottom, color-stop(0%,@chipYellowLight), color-stop(100%,@chipYellowDark)); /* Chrome,Safari4+ */
background: linear-gradient(-45deg, @chipYellowLight 0%,@chipYellowDark 100%); /* Chrome10+,Safari5.1+ */
background: linear-gradient(-45deg, @chipYellowLight 0%,@chipYellowDark 100%); /* Opera 11.10+ */
background: linear-gradient(-45deg, @chipYellowLight 0%,@chipYellowDark 100%); /* IE10+ */
background: linear-gradient((135deg), @chipYellowLight 0%,@chipYellowDark 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="@{chipYellowLight}", endColorstr="@{chipYellowDark}",GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
border: 1px solid #441802;
.border-radius(10px);
.box-shadow(0 1px 2px @chipLine,
0 0 5px @chipYellowShadow inset);
overflow: hidden;
.side {
position: absolute;
top: ((@chipHeight - @chipSideHeight) / 2);
.size(@chipSideWidth, @chipSideHeight);
&.left {
left: 0;
border-left: none;
.border-radius(0 2px 2px 0);
}
&.right {
right: 0;
border-right: none;
.border-radius(2px 0 0 2px);
}
border: 1px solid #441802;
.box-shadow(
@chipYellowShadow inset,
@chipYellowShadow,
@chipLineShadow,
@chipLineShadow inset
);
&:after {
content: '';
position: absolute;
.pos(0, 0, 0, 0);
display: inline-block;
.size(100%, 0);
margin: auto;
border-top: 1px solid @chipLine;
.box-shadow(
@chipYellowShadow inset,
@chipYellowShadow,
@chipLineShadow
);
}
}
.vertical {
position: absolute;
left: 0;
right: 0;
&.top {
top: 0;
border-top: none;
&:after {
top: @chipVerticalHeight;
width: 2 * @chipVerticalWidth;
}
}
&.bottom {
bottom: 0;
border-bottom: none;
&:after { bottom: @chipVerticalHeight; }
}
margin: 0 auto;
.size(@chipVerticalWidth, @chipVerticalHeight);
border: 1px solid #441802;
.box-shadow(
@chipYellowShadow inset,
@chipYellowShadow,
@chipLineShadow,
@chipLineShadow inset
);
&:after {
content: '';
position: absolute;
left: -@chipVerticalWidth;
display: inline-block;
.size(3 * @chipVerticalWidth, 0);
margin: 0;
border-top: 1px solid @chipLine;
.box-shadow(
@chipYellowShadow inset,
@chipYellowShadow,
@chipLineShadow
);
}
}
}
.data {
position: relative;
z-index: 100;
margin-left: 30px;
text-transform: uppercase;
.pan,
.month,
.year,
.year:before,
.name-on-card,
.date {
position: relative;
z-index: 20;
letter-spacing: 1px;
text-shadow: 1px 1px 1px #000;
&:before,
&:after {
position: absolute;
z-index: -10;
content: attr(title);
color: rgba(0, 0, 0, 0.2);
text-shadow: none;
}
&:before {
.pos(-1px, -1px);
color: rgba(0, 0, 0, 0.1);
}
&:after {
.pos(1px, 1px);
z-index: 10;
}
}
.pan {
position: relative;
z-index: 50;
margin: 0;
letter-spacing: 1px;
font-size: 26px;
}
.first-digits {
margin: 0;
font: 400 10px/1 @sansSerif;
}
.exp-date-wrapper {
margin-top: 5px;
margin-left: 64px;
line-height: 1;
.clearfix;
.left-label {
float: left;
display: inline-block;
width: 40px;
font: 400 7px/8px @sansSerif;
letter-spacing: 0.5px;
}
.exp-date {
display: inline-block;
float: left;
margin-top: -10px;
margin-left: 10px;
text-align: center;
.upper-labels { font: 400 7px/1 @sansSerif; }
.year:before { content: '/'; }
}
}
.name-on-card { margin-top: 10px; }
}
.lines-down {
&:before {
content: '';
position: absolute;
.pos(80px, -200px);
z-index: 10;
.size(550, 400);
.border-radius(40%, 60%, 0, 0);
box-shadow: 1px 1px 100px #441802;
.gradient-radial(rgba(45,33,166,0), rgba(45,33,166,1));
}
&:after {
content: '';
position: absolute;
.pos(20px, -100px);
z-index: 10;
.size(350, 400);
.border-radius(20%, 80%, 0, 0);
box-shadow: inset -1px -1px 44px #441802;
.gradient-radial(rgba(45,33,166,0), rgba(45,33,166,1));
}
}
.lines-up {
&:before {
content: '';
position: absolute;
.pos(-110px, -70px);
z-index: 2;
.size(480, 300);
border-bottom: 2px solid #441802;
.border-radius(0, 0, 60%, 90%);
box-shadow: inset 1px 1px 44px #441802;
.gradient-radial(rgba(64,49,178,0), rgba(35,24,154,1));
}
&:after {
content: '';
position: absolute;
.pos(-180px, -200px);
z-index: 1;
.size(530, 420);
border-bottom: 2px solid #441802;
.border-radius(0, 40%, 50%, 50%);
box-shadow: inset 1px 1px 44px #441802;
.gradient-radial(rgba(45,33,166,0), rgba(45,33,166,1));
}
}
// COLORS:
@cardBgBlue : #441802;
@cardBorder : darken(@cardBgBlue, 5%);
@chipLine : #322d28;
@chipYellowLight : lighten(#fffb97, 5%);
@chipYellowDark : darken(#bcad76, 5%);
// SHADOWS:
@chipYellowShadow : 0 0 5px rgba(144, 133, 87, 0.25);
@chipLineShadow : 0 0 4px rgba(0, 0, 0, 0.1);
// DIMENTIONS:
@chipWidth : 50px;
@chipHeight : 40px;
@chipSideWidth : 12px;
@chipSideHeight : 24px;
@chipVerticalWidth : ((@chipWidth - 2*@chipSideWidth) / 3);
@chipVerticalHeight : 12px;
// FONTS:
@sansSerif : 'Open Sans', Arial, sans-serif;
@monospace : 'Iceland', monospace;
// MIXINS:
.clearfix () {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
*zoom: 1; // IE 6/7
}
.gradient-radial (@color1, @color2) {
background: rgb(red(@color1), green(@color1), blue(@color1)); /* Old browsers */
background: radial-gradient(center, ellipse cover, @color1 100%, @color2 100%); /* FF3.6+ */
background: gradient(radial, center center, 0px, center center, 100%, color-stop(0%,@color1), color-stop(100%,@color2)); /* Chrome,Safari4+ */
background: radial-gradient(center, ellipse cover, @color1 100%, #441802 100%); /* Chrome10+,Safari5.1+ */
background: radial-gradient(center, ellipse cover, @color1 44%, @color2 100%); /* Opera 12+ */
background: radial-gradient(center, ellipse cover, @color1 44%, @color2 100%); /* IE10+ */
background: radial-gradient(ellipse at center, @color1 44%,#441802 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="@{color1}", endColorstr="@{color2}",GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.pos (@top, @left) {
top: @top;
left: @left;
}
.pos (@top, @left, @bottom, @right) {
top: @top;
left: @left;
bottom: @bottom;
right: @right;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.