Adam was cool and let me sit in his shop everyday and use his internet while telling me tales of traveling and tattooing around the world, people he’d met and numerous encounters with biker gangs. He mentioned he’d like a portfolio site for the tattoo shop so I whipped him up a quick WordPress site to show case the shops work. I took this as an opportunity to try out some new things… Firstly a Javascript image protection that dynamically place a blank GIF over all the image on the site, this doesn’t fully protect images from screengrabs or printing (or poking around with Firebug) but does stop the copying of images by dragging them off the page or with right click save-as. I also tested out Paul Irish’s infinite scroll plugin and a ‘back to the top’ slide animation along with some CSS3 scale transforms in the gallery. Check out the La Bomba Loca site.

As a way of saying thanks for the site they offered to give me a free tattoo and I ended up with this beauty on my calf. I quite like the idea of swapping work and trading skills with people, in this case everybody seemed to come away from the deal far more happy than when they spend money on things.

After heading back to Melbourne for a few weeks I then ended up in Geraldton, WA for a weeks work with Us & Them Studios. I was helping them finish off some installations for the city wide arts festival that was going on and also to help them move into their shiny new studio. I’ve got a few projects going on at the moment that are quite fun so will put some details of these up once they’re closer to completion.

To do this I needed to create a couple of unordered lists of categories to use as the filters, but they need a few bits of specific mark-up. The final product should look something like this…

1
2
3
4
5
6
7

<h2>Filter the Content</h2> 
<ul class="filter" data-filter-group="color"> 
	<li><a href="#filter-color-any" data-filter-value="" class="selected">All</a> 
	<li><a href="#filter-color-red" data-filter-value=".red">red</a> 
	<li><a href="#filter-color-blue" data-filter-value=".blue">blue</a> 
	<li><a href="#filter-color-yellow" data-filter-value=".yellow">yellow</a> 
</ul>

In short this gives you a URL hash and the data-filter-value is the class of the items you want to filter.

You run into problems trying to do this using WordPress categories as the standard wp_list_categories just dumps out a load of pre-formatted list items that we have little control over. Instead we have to use the get_categories function which allows us more control over formatting the results. So, here goes…

1
2
3
4
5
6
7
8
9
10
11
12

<h2>Filter the Content</h2> 
<ul class="filter" data-filter-group="color">
	<li><a href="#filter-topic-any" data-filter-value="" class="selected">All</a></li>
	<?php
		//Grab the child categories
		$categories=get_categories('child_of=XX');
		foreach($categories as $category) {
			//and format them for use as isotope filters
			echo '<li><a href="#filter-topic-' . $category->slug . '" class="" data-filter-value=".category-' . $category->slug . '" ' . '>' . $category->name . '</a></li>';
		} 
	?>
</ul>

This grabs all the children of a given category (replace ‘XX’ with your category number!), and then formats them for use as Isotope filters. You can then repeat this code to pull in different lists for use as filters.

Then our jQuery, assuming you’ve already loaded in jQuery and Isotope (this is pretty much taken straight from the Isotope Documentation)…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

$(document).ready(function () {
 
	//Set your isotope area
	var $container = $('#yourContainer'),
	filters = {};
 
	//Set our items to be filtered, .post will work if you're using the post_class(); function
	$container.isotope({
		itemSelector : '.post'
	});
 
	//Set the buttons to filter the content
	$('.filter a').click(function(){
		var $this = $(this);
		// don't proceed if already selected
		if ( $this.hasClass('selected') ) {
		return;
	}
 
	var $optionSet = $this.parents('.option-set');
	//change selected class
	$optionSet.find('.selected').removeClass('selected');
	$this.addClass('selected');
 
	//store filter value in object
	//i.e. filters.color = 'red'
	var group = $optionSet.attr('data-filter-group');
	filters[ group ] = $this.attr('data-filter-value');
 
	//convert object into array
	var isoFilters = [];
	for ( var prop in filters ) {
	isoFilters.push( filters[ prop ] )
	}
	var selector = isoFilters.join('');
	$container.isotope({ filter: selector });
 
	return false;
	});
 
});

Job’s a good’un!

Here’s my recreation of this using HTML5 and CSS3. Please note this is just for demonstration purposes’ only, and the image is copyright to Chris Polack.

Ok, let’s check out some code! Here’s the HTML…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<section id="wrapper">
    <article>
        <h1>Image with pure CSS animated tooltips</h1>
        <figure>
            <a href="#" class="caption one">
                <aside>This is a dog, woof woof woof!</aside>
            </a>
 
            <a href="#" class="caption two">
                <aside>Check out this dudes haircut.</aside>
            </a>
 
            <a href="#" class="caption three">
                    <aside>Graffiti, ten points if you can read what it says.</aside>
            </a>
 
        <figcaption>Hover the <span class="dot">dot</span> for information.</figcaption>
        </figure>
    </article>
</section><!-- /#wrapper -->

So, reasonably straight forward… We’re using the new HTML5 figure element to wrap the whole image, and the new figcaption element for the main caption. I was going to use figcaption for all the captions but the HTML5 spec states that each figure should only have one figcaption. I decided to use another new element aside, for the pop-out captions as it seemed the most semantically appropriate: secondary content that is related to the main content. These are wrapped in anchor tags (using anchors to wrap block level elements is allowed and validates in HTML5).

Then on to the CSS…

1
2
3
4
5
6
7

section,
article,
aside,
figure,
figcaption {
    display:block;
}

First we run a quick reset to ensure our new elements will be displayed how we want them, and then the rest of the CSS…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

article {
    width:760px;
    margin:0 auto;
}
figure {
    background: url(img/tooltips.jpg) no-repeat;
    width:760px;
    height:500px;
    position:relative;
    margin:0;
    padding:0;
}
h1 {
    color:#fff;
    font-weight:normal;
}
a {
    position:absolute;
}
a:before {
    content: "";
    display:block;
    position: relative;
    top: 23px;
}
a:before,
span.dot {
    height:10px;
    width:10px;
    background:orange;
    border-radius:5px;
    vertical-align: middle;
}
span.dot {
    text-indent:-9999px;
    display:inline-block;
}
.caption.one {
    top: 210px;
    left: 305px;
}
.caption.two {
    top: 210px;
    left: 680px;
}
.caption.three {
    top: 360px;
    left: 330px;
}
a {
    width:174px; /*10px extra for dot, 10px for arrow, 4px for box-shadow */
    overflow:hidden;
    text-decoration:none;
    color:#333;
    font-size:12px;
}
a aside {
    background:#fff;
    padding:10px;
    width:130px;
    border-radius:4px;
    position:relative;
    margin:0 0 4px 0; /*to show box shadow*/
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    right:200px;
    opacity:0.0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
}
a aside:before {
    content: "";
    position: absolute;
    left: -8px;
    top: 10px;
    border-top:8px solid transparent;
    border-right:8px solid #fff;
    border-bottom:8px solid transparent;
    display: block;
    width: 0;
    height:0;
}
a:hover aside {
    right:-20px;
    opacity:1.0;
}
figcaption {
    background:#000;
    background:rgba(0,0,0,0.8);
    position:absolute;
    bottom:0;
    padding:10px;
    color:#fff;
    width: 740px;
}

So, there’s quite a bit going on there, but there’s only a few key points to look at.

1. The orange dots are created with a :before pseudo class on the anchor‘s.
2. The parent figure element is has relative positioning, allowing for it’s child anchor elements to be positioned absolutely.
3. The anchor‘s have an explicit width set, and are set to hide the overflow.
4. The asides are positioned relatively, hiding them from view, this position is then changed (and animated with CSS3 transitions) when the anchor is hovered.
5. The arrows on the side of the captions are based on a CSS technique by Nicolas Gallagher using pseudo elements.

So far this works in all the modern browsers… but, using Modernizr we can get the same animated experience in older versions on internet explorer too. I grabbed a customised version, containing a basic HTML5 Shim and feature detection for CSS3 transitions.

1
2
3
4
5
6
7

<script src="modernizr.js"></script>
	<script>
		Modernizr.load({
			test: Modernizr.csstransitions,
			nope: ['http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js', 'animate.js']
		});
	</script>

I loaded in the script the my page head, and using Modernizr‘s built in Yep Nope library we can choose to load further resources based on browser support. Here we test if the browser supports CSS transitions, if the answer is no, we then load in a Google CDN copy of jQuery and our own animation file…

1
2
3
4
5
6
7

$(document).ready(function() {
	$('figure a').hover(function(){
				$(this).find('aside').animate({right:'-20px'},{queue:false,duration:500});
			}, function(){
				$(this).find('aside').animate({right:'200px'},{queue:false,duration:500});
			});
});

…which effectively does exactly the same as the CSS transitions. Tested in IE8 and works fine.

So thats that! I’d love to hear any suggestions of how the semantics or markup could be improved or if you find somewhere to put this to use! This could also be taken further, if necessary to force IE support for border-radius and box-shadow, but I’m perfectly content with old browsers seeing little orange squares rather than circles, as long as the interaction still works.

Here’s my demo.

I’m up in Sydney for a bit while visiting some friends… The guys at 2020 BMX Magazine have been nice enough to let me work from their studio, cheers!

Mutiny Bikes have been pushing BMX in the right direction for years, both with the quality of their video production and with their branding and art direction. Just spotted this little test edit up on their Vimeo page. They’ve got themselves a remote control helicopter and strapped a Canon 7D to it, looks amazing!

It allows you to link up a large selection of web apps that don’t quite link up how you’d want them to, and also lets you manage all these things in a central place. I’ve set it up to do some basic things, for example: whenever I create a new post on this site it will automatically publish it to Facebook and Twitter. But you can also do more unexpected things like whenever sun is forecast for the nest day, it can send an email to your boss to tell him you’re feeling ill!

I really like the big bold and simple user interface and it also gives you quite a bit of control over how things are published which is always nice.

IFTTT is still in BETA testing currently but I’ve got some invites if anybody is interested!

The Problem: When using centered layouts, if you get to a page which doesn’t have enough content to cause the page to scroll, the layout will ‘jump’ slightly to the side compared to pages which have a scroll bar.

The Solution: For once, IE seems to do the right thing here and always forces a scroll bar. So we can use a new CSS3 property called “overflow-y”. This works in the latest versions of all the main browsers: Chrome, Safari, Firefox and Opera.

1

html {overflow-y: scroll;}

I’ve been aware and a fan of Chris Polacks work for a few years now, I think perhaps through seeing his work published in Dig Magazine. It was a pleasant surprise to find out his studio was just round the corner from my house in Melbourne!

Anyway, I recently did a bit of work on Chris’s WordPress based site, which was origionally built by Miek Dunbar.

A tidy up of the main portfolio pages ‘thumbnail wall’, making it simpler to update for Chris and slightly clearer for users. It was put together with the help of the jQuery Masonry project which I had been looking for a reason to use for some time now!

Check out Chris Polacks new site!

All images are Copyright © Chris Polack.

Brief: Website design and build for a music management agency.
Client: Vice Royalty while working with Godel Design.
Details: Working with the guys at Godel Design we created this minimal, Drupal CMS based site for Melbourne based music management agency Vice Royalty.

Viceroyalty was founded by Zachary Abroms in Melbourne, Australia in October 2010 with an objective to draw together a family of uniquely talented artists and represent their management interests professionally in a manner underpinned by principles of honesty, respect, creativity, passion and ambition.

My role in the project was design and front-end CSS development, we used a few subtle CSS3 transforms to make the sites simple design feel a bit slicker and interactive in modern browsers. David from Godel also put together an animated SVG version of the logo on the front page using the Raphaël JS library.

Check out Vice Royalty.