April 21, 2012

Project 2: pog.gs

When someone mentions "pogs", my eyes light up and a pleasant feeling emerges from deep within the recesses of my brain. I miss pogs and the simplicity of gradeschool. I was playing around with bootstrap and brushing up on jquery (I would be lying if I told you I didn't get inspiration / view source on Mig Reyes' footer image) so I whipped up this fun attempt to turn any image into a digital representation of a pog like object.


Give it a try

Play with the standalone demo.
Fork out the repo.
Tweak the jsfiddle.

Relevant Code

CSS to transform an image to a pog:
.pog {
    /*make div, give it a border radius of half the height*/
    height: 200px;
    width: 200px;
    border-radius: 100px;
    border: 3px solid black;  
    float: left;
    margin: 10px;

    /*give it some shadow for fun*/
    -webkit-box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);
    box-shadow: 2px -3px 5px rgba(50, 50, 50, 0.75);

#pogFront {
/*give the div a background image, center, cover */
    background: url('http://octodex.github.com/images/octonaut.jpg') center center;
    background-size: cover;

More on background image properties from Chris Coyier.

Function to change the image:
  //Wait for a click on the button
  $('#go').click(function() {
    //grab the string the user put in the input box
    var newImage = $('#newImage').val();
    //and make that string the new source for the background of the front of the pog
    $('#pogFront').css('background-image','url(' + newImage + ')');

Reward Beer

Port Brewing Company: Hot Rocks Lager

Roadmap (if I had no job)

  • Allow for different options on the back
  • Create a bookmarklet
  • Allow for exporting
  • Pull image from URI (easier to share links)

If you think these changes would be worth the time, fork the project on github and let me know.


Top Image Credit: Pog! by freshfauxx, on Flickr
Pog Front Base Image: Octonaut by Cameron McEfee

MKSHT is the project log of Cris Noble. Follow him on twitter, github, Google+ or forrst. You should check out his homepage and if you are feeling freindly, you could do it the old fashion way and send him an email.

Creative Commons License