rowid,title,contents,year,author,author_slug,published,url,topic
99,A Christmas hCard From Me To You,"So apparently Christmas is coming. And what is Christmas all about? Well, cleaning out your address book, of course! What better time to go through your contacts, making sure everyone’s details are up date and that you’ve deleted all those nasty clients who never paid on time?

It’s also a good time to make sure your current clients and colleagues have your most up-to-date details, so instead of filling up their inboxes with e-cards, why not send them something useful? Something like a… vCard! (See what I did there?)

Just in case you’ve been working in a magical toy factory in the upper reaches of Scandinavia for the last few years, I’m going to tell you that now would also be the perfect time to get into microformats. Using the hCard format, we’ll build a very simple web page and markup our contact details in such a way that they’ll be understood by microformats plugins, like Operator or Tails for Firefox, or the cross-browser Microformats Bookmarklet.

Oh, and because Christmas is all about dressing up and being silly, we’ll make the whole thing look nice and have a bit of fun with some CSS3 progressive enhancement. 

If you can’t wait to see what we end up with, you can preview it here.



Step 1: Contact Details

First, let’s decide what details we want to put on the page. I’d put my full name, my email address, my phone number, and my postal address, but I’d rather not get surprise visits from strangers when I’m fannying about with my baubles, so I’m going to use Father Christmas instead (that’s Santa to you Yanks).

Father Christmas
fatherchristmas@elliotjaystocks.com
25 Laughingallthe Way
Snow Falls
Lapland
Finland
010 60 58 000

Step 2: hCard Creator

Now I’m not sure about you, but I rather like getting the magical robot pixies to do the work for me, so head on over to the hCard Creator and put those pixies to work! Pop in your details and they’ll give you some nice microformatted HTML in turn.



<div id=""hcard-Father-Christmas"" class=""vcard"">
	<a class=""url fn"" href=""http://elliotjaystocks.com/fatherchristmas"">Father Christmas</a>
	<a class=""email"" href=""mailto:fatherchristmas@elliotjaystocks.com""> fatherchristmas@elliotjaystocks.com</a>
	<div class=""adr"">
	<div class=""street-address"">25 Laughingallthe Way</div>
	<span class=""locality"">Snow Falls</span>
	, 
	<span class=""region"">Lapland</span>
	, 
	<span class=""postal-code"">FI-00101</span>
	<span class=""country-name"">Finland</span>
</div>
<div class=""tel"">010 60 58 000</div>
	<p style=""font-size:smaller;"">This <a href=""http://microformats.org/wiki/hcard"">hCard</a> created with the <a href=""http://microformats.org/code/hcard/creator"">hCard creator</a>.</p>
</div>

Step 3: Editing The Code

One of the great things about microformats is that you can use pretty much whichever HTML tags you want, so just because the hCard Creator Fairies say something should be wrapped in a <span> doesn’t mean you can’t change it to a <blink>. Actually, no, don’t do that. That’s not even excusable at Christmas.

I personally have a penchant for marking up each line of an address inside a <li> tag, where the parent url retains the class of adr. As long as you keep the class names the same, you’ll be fine.

<div id=""hcard-Father-Christmas"" class=""vcard"">
	<h1><a class=""url fn"" href=""http://elliotjaystocks.com/fatherchristmas"">Father Christmas </a></h1>
	<a class=""email"" href=""mailto:fatherchristmas@elliotjaystocks.com?subject=Here, have some Christmas cheer!"">fatherchristmas@elliotjaystocks.com</a>
	<ul class=""adr"">
		<li class=""street-address"">25 Laughingallthe Way</li>
		<li class=""locality"">Snow Falls</li>
		<li class=""region"">Lapland</li>
		<li class=""postal-code"">FI-00101</li>
		<li class=""country-name"">Finland</li>
	</ul>
	<span class=""tel"">010 60 58 000</span>
</div>

Step 4: Testing The Microformats

With our microformats in place, now would be a good time to test that they’re working before we start making things look pretty. If you’re on Firefox, you can install the Operator or Tails extensions, but if you’re on another browser, just add the Microformats Bookmarklet. Regardless of your choice, the results is the same: if you’ve code microformatted content on a web page, one of these bad boys should pick it up for you and allow you to export the contact info. Give it a try and you should see father Christmas appearing in your address book of choice. Now you’ll never forget where to send those Christmas lists!



Step 5: Some Extra Markup

One of the first things we’re going to do is put a photo of Father Christmas on the hCard. We’ll be using CSS to apply a background image to a div, so we’ll be needing an extra div with a class name of “photo”. In turn, we’ll wrap the text-based elements of our hCard inside a div cunningly called “text”. Unfortunately, because of the float technique we’ll be using, we’ll have to use one of those nasty float-clearing techniques. I shall call this “christmas-cheer”, since that is what its presence will inevitably bring, of course.

Oh, and let’s add a bit of text to give the page context, too:

<p>Send your Christmas lists my way...</p>
<div id=""hcard-Father-Christmas"" class=""vcard"">
	<div class=""text"">
		<h1><a class=""url fn"" href=""http://elliotjaystocks.com/fatherchristmas"">Father Christmas </a></h1>
		<a class=""email"" href=""mailto:fatherchristmas@elliotjaystocks.com?subject=Here, have some Christmas cheer!"">fatherchristmas@elliotjaystocks.com</a>
		<ul class=""adr"">
			<li class=""street-address"">25 Laughingallthe Way</li>
			<li class=""locality"">Snow Falls</li>
			<li class=""region"">Lapland</li>
			<li class=""postal-code"">FI-00101</li>
			<li class=""country-name"">Finland</li>
		</ul>
		<span class=""tel"">010 60 58 000</span>
	</div>
	<div class=""photo""></div>
	<br class=""christmas-cheer"" />
</div>
<div class=""credits"">
	<p>A tutorial by <a href=""http://elliotjaystocks.com"">Elliot Jay Stocks</a> for <a href=""http://24ways.org/"">24 Ways</a></p>
	<p>Background: <a href=""http://sxc.hu/photo/1108741"">stock.xchng</a> | Father Christmas: <a href=""http://istockphoto.com/file_closeup/people/4575943-active-santa.php?id=4575943"">iStockPhoto</a></p>
</div>

Step 6: Some Christmas Sparkle

So far, our hCard-housing web page is slightly less than inspiring, isn’t it? It’s time to add a bit of CSS. There’s nothing particularly radical going on here; just a simple layout, some basic typographic treatment, and the placement of the Father Christmas photo. I’d usually use a more thorough CSS reset like the one found in the YUI or Eric Meyer’s, but for this basic page, the simple * solution will do.

Check out the step 6 demo to see our basic styles in place.

From this…



… to this:



Step 7: Fun With imagery

Now it’s time to introduce a repeating background image to the <body> element. This will seamlessly repeat for as wide as the browser window becomes.

But that’s fairly straightforward. How about having some fun with the Father Christmas image? If you look at the image file itself, you’ll see that it’s twice as wide as the area we can see and contains a ‘hidden’ photo of our rather camp St. Nick.



As a light-hearted visual… er… ‘treat’ for users who move their mouse over the image, we move the position of the background image on the “photo” div. Check out the step 7 demo to see it working.

Step 8: Progressive Enhancement

Finally, this fun little project is a great opportunity for us to mess around with some advanced CSS features (some from the CSS3 spec) that we rarely get to use on client projects. (Don’t forget: no Christmas pressies for clients who want you to support IE6!)

Here are the rules we’re using to give some browsers a superior viewing experience:


	@font-face allows us to use Jos Buivenga’s free font ‘Fertigo Pro’ on all text;
	text-shadow adds a little emphasis on the opening paragraph;
	body > p:first-child causes only the first paragraph to receive this treatment;
	border-radius created rounded corners on our main div and the links within it;
	and webkit-transition allows us to gently fade in between the default and hover states of those links.


And with that, we’re done! You can see the results here. It’s time to customise the page to your liking, upload it to your site, and send out the URL. And do it quickly, because I’m sure you’ve got some last-minute Christmas shopping to finish off!",2008,Elliot Jay Stocks,elliotjaystocks,2008-12-10T00:00:00+00:00,https://24ways.org/2008/a-christmas-hcard-from-me-to-you/,code
145,The Neverending (Background Image) Story,"Everyone likes candy for Christmas, and there’s none better than eye candy. Well, that, and just more of the stuff. Today we’re going to combine both of those good points and look at how to create a beautiful background image that goes on and on… forever!

Of course, each background image is different, so instead of agonising over each and every pixel, I’m going to concentrate on five key steps that you can apply to any of your own repeating background images. In this example, we’ll look at the Miami Beach background image used on the new FOWA site, which I’m afraid is about as un-festive as you can get.

1. Choose your image wisely

I find there are three main criteria when judging photos you’re considering for repetition manipulation (or ‘repetulation’, as I like to say)…


	simplicity (beware of complex patterns)
	angle and perspective (watch out for shadows and obvious vanishing points)
	consistent elements (for easy cloning)


You might want to check out this annotated version of the image, where I’ve highlighted elements of the photo that led me to choose it as the right one.

The original image purchased from iStockPhoto.

The Photoshopped version used on the FOWA site.

2. The power of horizontal lines

With the image chosen and your cursor poised for some Photoshop magic, the most useful thing you can do is drag out the edge pixels from one side of the image to create a kind of rough colour ‘template’ on which to work over. It doesn’t matter which side you choose, although you might find it beneficial to use the one with the simplest spread of colour and complex elements.

Click and hold on the marquee tool in the toolbar and select the ‘single column marquee tool’, which will span the full height of your document but will only be one pixel wide. Make the selection right at the edge of your document, press ctrl-c / cmd-c to copy the selection you made, create a new layer, and hit ctrl-v / cmd-v to paste the selection onto your new layer. using free transform (ctrl-t / cmd-t), drag out your selection so that it becomes as wide as your entire canvas. 

A one-pixel-wide selection stretched out to the entire width of the canvas.

3. Cloning

It goes without saying that the trusty clone tool is one of the most important in the process of creating a seamlessly repeating background image, but I think it’s important to be fairly loose with it. Always clone on to a new layer so that you’ve got the freedom to move it around, but above all else, use the eraser tool to tweak your cloned areas: let that handle the precision stuff and you won’t have to worry about getting your clones right first time.

In the example below, you can see how I overcame the problem of the far-left tree shadow being chopped off by cloning the shadow from the tree on its right. 

The edge of the shadow is cut off and needs to be ‘made’ from a pre-existing element.

The successful clone completes the missing shadow.

The two elements are obviously very similar but it doesn’t look like a clone because the majority of the shape is ‘genuine’ and only a small part is a duplicate. Also, after cloning I transformed the duplicate, erased parts of it, used gradients, and — ooh, did someone mention gradients?

4. Never underestimate a gradient

For this image, I used gradients in a similar way to a brush: covering large parts of the canvas with a colour that faded out to a desired point, before erasing certain parts for accuracy.

Several of the gradients and brushes that make up the ‘customised’ part of the image, visible when the main photograph layer is hidden.

The full composite.

Gradients are also a bit of an easy fix: you can use a gradient on one side of the image, flip it horizontally, and then use it again on the opposite side to make a more seamless join.

Speaking of which…

5. Sewing the seams

No matter what kind of magic Photoshop dust you sprinkle over your image, there will still always be the area where the two edges meet: that scary ‘loop’ point. Fret ye not, however, for there’s help at hand in the form of a nice little cheat. Even though the loop point might still be apparent, we can help hide it by doing something to throw viewers off the scent.

The seam is usually easy to spot because it’s a blank area with not much detail or colour variation, so in order to disguise it, go against the rule: put something across it!

This isn’t quite as challenging as it may sound, because if we intentionally make our own ‘object’ to span the join, we can accurately measure the exact halfway point where we need to split it across the two sides of the image. This is exactly what I did with the FOWA background image: I made some clouds!

A sky with no clouds in an unhappy one.

A simple soft white brush creates a cloud-like formation in the sky.

After taking the cloud’s opacity down to 20%, I used free transform to highlight the boundaries of the layer. I then moved it over to the right, so that the middle of the layer perfectly aligned with the right side of the canvas.

Finally, I duplicated the layer and did the same in reverse: dragging the layer over to the left and making sure that the middle of the duplicate layer perfectly aligned with the left side of the canvas.

And there you have it! Boom! Ta-da! Et Voila! To see the repeating background image in action, visit futureofwebapps.com on a large widescreen monitor or see a simulation of the effect.

Thanks for reading, folks. Have a great Christmas!",2007,Elliot Jay Stocks,elliotjaystocks,2007-12-03T00:00:00+00:00,https://24ways.org/2007/the-neverending-background-image-story/,code