We recently had cause to create some CC icons for a checkout process, we just needed the four most common.
Had a heck of a time getting good downloads, quality images &c.
Google has a good image they use; one image file used as sprites – smart.
Other sites the downloads were not working, or there was some restrictive license on the images.
The card vendors themselves also don’t make this easy – requiring registration to download? WTF?
Why not post to their Facebook pages, make downloadable from the Pictures section.
So, we searched and went directly to each brand, downloaded their source images and created this image sprite, as a indexed- PNG so it’s roughly 8K!
It has a hot and cold view of each of the four major credit card providers.
Use as needed, no-fee, no-charge, no-license, no-restrictions.
To use it, do something like this:
.cc { height: 36px; }
.cc div { background:url(http://cdn.edoceo.com/img/cc.png); border:1px solid #666; float:left; }
.cc .mc { background-position:0px 0px; height:32px; margin:2px; width:56px; }
.cc .vc { background-position:-56px 0px; height:32px; margin:2px; width:56px; }
.cc .dc { background-position:-112px 0px; height:32px; margin:2px; width:56px; }
.cc .ac { background-position:-168px 0px; height:32px; margin:2px; width:56px; }
.cc .mb { background-position:0px 32px; height:32px; margin:2px; width:56px; }
.cc .vb { background-position:-56px 32px; height:32px; margin:2px; width:56px; }
.cc .db { background-position:-112px 32px; height:32px; margin:2px; width:56px; }
.cc .ab { background-position:-168px 32px; height:32px; margin:2px; width:56px; }
<div class="cc"> <div class="mc"></div> <div class="vc"></div> <div class="dc"></div> <div class="ac"></div> </div>
<div class="cc"> <div class="mb"></div> <div class="vb"></div> <div class="db"></div> <div class="ab"></div> </div>
Add some JavaScript card type auto-detection and adjust the card indicators as necessary.
Thanks to merchant account blog for some pointers.
More information about CSS Sprites can be found on CSS Tricks.