Credit Card Entry Form

Form Designed to Look Like a credit card for entering your payment information. Make sure it works properly with 1password (see forum post)

by kizer

HTML

<div id="credit-card">
    <h1>Credit Card</h1>
    <div id="name"></div>
    <div id="magstripe"></div>
    <form>
    <input type="text" name="first-name" id="first-name" class="short" placeholder="First Name…" value="">
    <input type="text" name="last-name"  id="last-name" class="short" placeholder="Last Name…" value="">
    <input type="text" name="credit-card"  id="credit-card" class="long" value="">
    <input type="text" name="cvv" id="cvv" class="long" placeholder="CVV" value="">
    </form>
</div>

CSS

body { 
    background: #f3f3f3; 
    font-family: "Helvetica Neue", Helvetica, Arial, San-Serif;
    -webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
 }

div {
-webkit-font-smoothing: antialiased;
}

div, input {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

div, canvas, img, input, button, form {
position: absolute;
}


h1 { 
position: absolute;    
font-size: 42px;
top: 15px;
left: 20px;
font-weight: 700;
text-shadow: rgba(255,255,255, .3689) 0 1px 0;
}

div#credit-card {
 position: relative;
 width: 500px;
 height: 300px;
 border-radius: 8px;
 background: red;
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F2113E), to(#BA0327));
}

div#name {
 position: absolute;
 top: 90px;
 width: 500px;
 height: 45px;
 background: red;
 border-top: 1px solid rgba(0,0,0, .5689);
 border-bottom: 1px solid rgba(255,255,255, .5689);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#333));
}

#first-name {
 position: absolute;
 top: 100px;
 left: 20px;
 width: 130px;
}

#last-name {
 position: absolute;
 top: 100px;
 width: 130px;
 left: 175px; 
}


.long {
 width: 300px;   
}

#credit-card {
 position: relative;
 top: 200px;
 left: 20px;
 right: 20px;
}

#cvv {
 position: relative;
 top: 200px;
 left: 30px;
 right: 20px;
 width: 80px;
}

input[type=text] {
 outline: 0;
 height: 25px;
 border-radius: 3px;
 padding: 0 5px;
 -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 0px 1px inset, 
        rgba(0, 0, 0, 0.199219) 0px 2px 1px 0px inset, 
        rgba(0, 0, 0, 0.199219) 0px 2px 3px 0px inset, 
        rgba(255, 255, 255, 0.392969) 0px 1px 0px;
  border: 0px;
    
     transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in;
    -moz-transition: all .25s ease-in-out;
}

input[type=text]:focus {
 outline: 0;
 content="test";
  -webkit-box-shadow: rgba(0, 0, 0, 0.398438) 0px 0px 0px 1px inset, 
        rgba(0, 0, 0, 0.199219) 0px 2px 1px 0px inset, 
        rgba(0, 0, 0,...