Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Let's get started with HTML:
<section class="credit-card visa gr-visa">
<div class="logo">Visa</div>
<form>
<h2>Payment Details</h2>
<ul class="inputs">
<li>
<label>Card Number</label>
<input type="text" name="card_number" pattern="[0-9]{13,16}" value="9842 9472 9457 9472" onclick="value=''" class="full gr-input" required />
</li>
<li class="expire last">
<label>Expiration</label>
<input type="text" name="expire_month" value="December (12)" onclick="value=''" size="10" class="month gr-input" required />
<input type="text" name="expire_year" value="2014" onclick="value=''" size="10" class="year gr-input" required />
<div class="clearfix"></div>
</li>
<li class="cvc-code last">
<label>CVC Code</label>
<input type="text" name="cvc_code" value="174" onclick="value=''" size="10" class="gr-input" required />
</li>
<div class="clearfix"></div>
</ul>
</form>
<div class="watermark">Visa</div>
</section>
After adding our html we'll add CSS coding:
/* === Basic reset === */
* { margin: 0; padding: 0; outline: none; box-sizing:border-box; }
a>img { border: none; }
header, footer, article, section, nav, aside { display: block; }
/* === General === */
body {
font-family:Arial;
font-size: 14px;
background:#ddd;
}
.clearfix {
clear:both;
}
/* === Credit Card === */
.credit-card {
display:block;
position:relative;
width:93.75%; /* This is 300px on 320px wide screen */
max-width:500px; /* Just to make sure that it doesnt get crazy on bg screens */
min-width:300px; /* And make sure that it contains at least some size */
margin:30px auto;
padding:20px;
overflow:hidden;
border-radius:6px;
z-index:1;
}
.credit-card .inputs {
list-style:none;
margin-top:30px;
}
.credit-card .inputs li {
margin-bottom:30px;
}
.credit-card .inputs li.last {
margin-bottom:10px;
}
.credit-card .inputs li.expire {
float:left;
width:70%;
margin-right:5%;
}
.credit-card .inputs li.expire input{
float:left;
width:35%;
}
.credit-card .inputs li.expire input.month{
width:60%;
margin-right:5%;
}
.credit-card .inputs li.cvc-code {
float:left;
width:25%;
}
.credit-card .inputs li.cvc-code input {
width:100%;
}
.credit-card .watermark {
position:absolute;
z-index:10;
}
.credit-card form {
position:relative;
z-index:50;
}
.credit-card .logo {
position:absolute;
top:15px;
right:20px;
text-transform:uppercase;
font-weight:bold;
}
/* === Visa === */
.visa {
color:#fff;
box-shadow: 0px 0px 4px rgba(0,0,0,0.8), inset 0px 1px 3px rgba(255,255,255,0.3), inset 0px 0px 2px rgba(255,255,255,0.2);
}
.visa h2 {
text-shadow:1px 1px 2px rgba(17,121,173,0.8);
}
.visa .logo {
color:rgba(255,255,255,0.9);
font-size:2em;
font-style:italic;
text-shadow:0px 0px 3px rgba(17,123,173,0.9);
}
.visa .logo:after {
content:' ';
position:absolute;
left:0px;
top:5px;
width: 0;
height: 0;
border-top: 10px solid orange;
border-left: 10px solid transparent;
}
.visa .watermark {
bottom:-100px;
left:-50px;
color:rgba(255,255,255,0.06);
font-size:20em;
font-weight:bold;
font-style:italic;
}
/* === Forms === */
label {
display:block;
margin-bottom:8px;
color:rgba(255,255,255,0.6);
text-transform:uppercase;
font-size:1.1em;
font-weight:bold;
text-shadow:0px 1px 2px rgba(17,123,173,0.6);
}
input {
display:block;
padding:12px 10px;
color:#999;
font-size:1.2em;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
border:1px solid rgba(16,103,133,0.6);
box-shadow:0px 0px 3px rgba(255,255,255,0.5), inset 0px 1px 4px rgba(0,0,0,0.2);
border-radius:3px;
}
input.full {
width:100%;
}
/* === Gradients === */
.gr-visa {
background: #1db1cf; /* Old browsers */
background: -moz-linear-gradient(top, #1db1cf 0%, #1078ab 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1db1cf), color-stop(100%,#1078ab)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1db1cf 0%,#1078ab 100%); /* IE10+ */
background: linear-gradient(to bottom, #1db1cf 0%,#1078ab 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1db1cf', endColorstr='#1078ab',GradientType=0 ); /* IE6-9 */
}
.gr-input {
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top, #d3d3d3 0%, #d9d9d9 38%, #e5e5e5 82%, #e7e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(38%,#d9d9d9), color-stop(82%,#e5e5e5), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* IE10+ */
background: linear-gradient(to bottom, #d3d3d3 0%,#d9d9d9 38%,#e5e5e5 82%,#e7e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3d3d3', endColorstr='#e7e7e7',GradientType=0 ); /* IE6-9 */
}
That's It....Don't forget to leave a comment!!!
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
