Tower Grove Wallpaper

Posted on

A friend asked me for some Tower Grove art she could hang in her office. I was happy to oblige with a little filter-y, pixel-y magic. This is suitable for a desktop wallpaper or printing at 17″ x 11″.

Click the image for the full size.

It’s alive!

Posted on

I’ve finally converted my entire site to live on WordPress with my own custom theme. While I bring everything up to speed, do let me know if you see any funkiness.

Helping Threadless automate their printing

Posted on

This thread is asking for help automating printing and using Data Merge with Adobe InDesign (CS5), here it is.

First download threadless.zip

Edit data.csv as needed, open template.indd and choose Window>Data Merge from the menu. (Adobe Docs)

Click the little “Merge Documents” icon in this panel. It spits out an .indd with a page for each set of data.

Obviously for testing I didn’t set up nice fonts, etc. but you get the point. Read thru the Adobe Docs for the extra details.

Thanks to my lovely wife Kassie for pointing me in the right direction.

Quick Discount Calculator – DisCalc

Posted on

I’ve whipped up a quick little web app called DisCalc. Visit it here: http://juliankussman.com/discalc/

Enter an item’s cost, click the discount button (common percentages plus enter your own custom). Click ‘Add to list’ to add it to your running shopping total.

You can save this to your iPhone’s home screen to use it without Safari chrome. I’ve also implemented HTML5 localStorage to allow saving your running total between launches/restarts.

Have fun :)

Easy auto-width HTML button with 1 background image

Posted on

Here’s a super simple technique to create a button of variable width in HTML/CSS.

I started here and then stripped it down to only 2 HTML elements, your A and an EM.

This technique uses one background image for the button.

First, create a button image that is about 2x as long as any button would ever be on your site.

Like so:

The rest is in the CSS comments…

<a href="#" class="button"><em>CLICK ME!!!</em></a>

.button{
border:none;
background:none;
padding:0;
margin:0;
width:auto;
height:31px;
overflow:visible;
text-align:center;
display:inline-block;
white-space:nowrap;

/* Here's the magic sauce
padding left is the space between the left edge of your button and your text
background is set to left top
*/

padding-left:22px;
background:url(../images/largeBtn.png) no-repeat 0 0;
}

.button em{
height:31px;
display:block;
margin:0;
color:#fff;
font-style:normal;
line-height:33px;

/* Here's the magic sauce
margin right is the radius of your rounded corner if you have one (so pngs don't show through behind)
padding right is the space between the right edge of your button and your text
background is set to right top
*/

margin-right:-3px;
padding-right:22px;
background:url(../images/largeBtn.png) no-repeat 100% 0;

}