Thimbling a Can of Beans

I spent nearly most of my day working to design a label for a can of beans…

A remixable, editable label for a mysterious can of me….

UPDATE: Nov 25, 2013: Wowzers! I see about 30 different remixes of this project…

This was created/published with Mozilla Thimble, my first full go with this web-based tool for working with web page code where you see your work happen in real time. I am excited to be a Mozilla Webmakers Fellow- they have asked a few folks to use their maker tools to both test out the features, but also, to create “Makes” that other people can modify.

I have some experience with Popcorn and more with Xray Goggles, but I wanted to start first with the one I had never used, Thimble. We were told they have just enabled Javascript in thimble, and I had a few abortive, failed efforts to use the flickr javascript calls to generate some random photos. You know how I love random photos from flickr, right?

Next I fooled around with something that seems to much for Thimble, or something is not full integrated– This nifty demo of a jQuery PhotoShoot effect blew my fur backward. I liked the idea of having a large image with a lot of detail, and set up something where visitors can make “snapshots” of portions and put them in order to tell a visual story.

I made a test version in HTML that works on my web site:

I managed to get all the CSS and javascript inside the HTML file, and put the 3 images on my web server. I added my own photos, and changed the code so it would display 5 rather then 3 snapshots. It worked on the web.. but alas, in Thimble, I got a blank where the image should be.

This is neat, and worth noting what was possible with jQuery+CSS, but maybe too much for Thimble.

Dial it back.

For some weird reason of free form association, I thought back to one of the Writing assignments for the ds106 Daily Create:

Write what would appear on your ingredients label (e.g. what makes up your personality)

I went to the cupboard and spun it around until I found a can with a label in bright yellow:

cc licensed ( BY SA ) flickr photo shared by Alan Levine

And decided I would see if I could create the CSS that would be editable for changing the contents on the label. I opened the original image in PhotoShop, and blanked out the entire yellow part:

On the left side, I clone brushed out the bits of lettering, and added some bits of text to hint at the brand name (If you bend your mind, it might be “Mozilla Beans”), and made the small white QR Code on the top right a blank white area that could be used to add an image. I then cropped the image, and shrunk it to be 446×600 pixels.

Okay, so I had my base image, now I needed to do some CSS work to set up the display on the page. I found a Smashing Magazine article on Absolute Horizontal And Vertical Centering In CSS that showed several ways to create centered content. I did not want the can resizing, just wanted it to stay in the center of the page no matter the window size.

I started with the basic setuo (heck, I ended up keeping the dark green background).

For some additional flare, I learned about the box-shadow method from 4 Fun CSS Image Effects You Can Copy and Paste.

You can add multiple frames or shadows around a div with

, and by repeating them, you can make them work progressively outward. I modified the demo for a bit more spread on the first shadow, and the outer one is wide and really blurry green.

The CSS fun started first with making a relative positioned div to contain all of the label content:

Thimble made it easy to tweak these coordinates and widths to get that box in the right place. The overflow keeps content from spilling out of the box

All of the other stuff happens inside of the #souplabel. Maybe the trickiest part was trying to get fancy with the text for the top label:

I wanted the text to be fully justified and spaced to fill across; but justified text only works when there are multiple lines (and doing anything fancier called for extra Javascript). Instead I sized the height if this heading to be the size of the font, and added extra “text” with some blank spaces after the real text. By having Overflow hidden, we don’t see the extra invisible text!

The rest of the label making involved adding some classes for underlining the items (in a think or thick line), making divs and left/right floated spans to have the lines with an amount in the right column. The fine tune tweaking was sure easy in Thimble compared to coding and reloading in a web browser.

I also added the CSS to absolutely position (within the div for the bean can) the small thumbnail image on the right side:

The trick here is that the white “box” is not perfectly square in the image because of the curvature of the can. It would be way crazy to try and distort the icon in CSS. So I made a Photoshop file to frame the image, by making screen shot of the area:

I click in the qhite area of the label, creating a selection area. Then I opened my image file (resized it down to maybe 50px X 50px and copied it to the clipboard. Back to my icon file, I new use PhotoShop’s Edit =- Past Special — Paste Into to paste in the image with a Clipping Mask for the photo. I used the distort, resize commands to nudge the photo around. By making invisible the original layer, I cam now save this tiny image as a background transparent PNG, so it will have the irregular shape of the label area:

In Thimble, I can play with the positioning coordinates to get the icon in place.

For some of the other elements (the bottom caption), I use the Color Scheme Designer to find other colors compatible with the green background (I love this tool!)

From there, I added a fair amount of comments in Thimble to guide someone (not quite sure if anyone would ever do this) in modifying the HTML and CSS to make their own label:

What I like about this is that people can see the code, modify it, and see the effects in real time, so they can better understand how HTML and CSS work. The positioning stuff here, the box shadows, the text effects, are all smaller lessons hopefully someone might remember for their next project.

But I think the creativity here is figuring out how to label yourself! Ingredients are easy (that was the original Daily Create assignment), but the percentage of Daily Requirements was new. This is where being able to remix and rewrite my code can open new creative windows.

I’d like to add a bit more explanation, and there is no place now to really identify whose can this is. And the idea of a “serving” might be seen as a bit weird.

If I tweak it more, I might make the large white text on the left side editable (use the overflow hidden to truncate it). And I guess it is technically possible to substitute a different background image, though a lot of the divs are hardwired for the size of that image.

I really did want to get a deep taste for Thimble, I got it. All that and a can of beans.

cc licensed ( BY SA ) flickr photo shared by Alan Levine

This is fun, but the real excitement is that I was invited to go to MozFest in London to be part of the big WebMaker event! I am stoked for the trip over, the event, and the opportunity I hope to take on some UK visits.

I’ll leave the beans at home.

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon