November | 2011 | Edoceo's Blog

Credit Card Brand Logos as CSS Sprite

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 class="cc">
  <div class="mb"></div>
  <div class="vb"></div>
  <div class="db"></div>
  <div class="ab"></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.


Getting Started with PhoneGap on Linux without Eclipse

Eclipse is a great editor and all, but I’m a much bigger fan of jEdit which I’ve been using since forever (at least 10 years). So, when wanting to do Android development and especially when using PhoneGap most of the existing documentation focuses on Eclipse.

This shows a full manual process, from installing the Android SDK and PhoneGap, creating the initial project and building the sample provided by PhoneGap. The target system is Linux (Gentoo) and we’ll mostly be working in the home directory of a non-privileged user.

Install the Android SDK

At this time of this writing it was version: android-sdk_r15-linux.tgz.

Might take some time to complete all the downloads during update sdk.

wget http://dl.google.com/android/android-sdk_r15-linux.tgz
tar -zxf android-sdk_r15-linux.tgz
rm android-sdk_r15-linux.tgz
cd android-sdk-linux
tools/android update sdk --no-ui
echo "PATH="${PATH}:~/android-sdk-linux/tools"" >> ~/.bashrc

Install PhoneGap

Download the latest, at this time PhoneGap 1.2.0.

wget https://github.com/callback/phonegap/zipball/1.2.0
cd phonegap-1.2.0

Building the Sample

cd ~/phonegap-1.2.0/Android/Sample
android update project --path $(pwd)
ant debug

Running the Sample


Using this UI create a AVD Tools -> Manage AVDs

~/android-sdk-linux/platform-tools/adb devices

Now install to the running emulator

~/android-sdk-linux/platform-tools/adb -e install -r bin/PhoneGapExample-debug.apk


See Also