thing13

(One of the weird things about these weekly reports is that I’m going by exact week, which means every seven days from January 1st. The first one was on a Thursday, so that means my week is Thursday to Thursday… which feels slightly odd.

When I sit down on the Thursday or Friday (and sometimes slightly later) to write the report, I have to think back over the week in a way that makes me realise just how arbitrary it is to break our time up into slots of seven labelled days. Anyway.)

This week’s activities centre around Oxford. (I see a pattern emerging, by the way: I write about whatever happened at the weekend, and skip over the week… even though the weekend sits in an odd position in the seven days. Anyway.)

By the way… as I write this, I am sitting on a tube train. I’ve just been to the pub, which is probably the reason why I’m slightly more chatty and tangential than usual. I have just arrived at Bond Street. The carriage is filling up with odder than average people. Some of them a lot more odd than average… including the man sitting next to me, who has just got up and left, who was obviously disturbed. Anyway.

Oxford, then. Jen went to see her friend Lou, who is about to have her second baby. A load of their friends gathered to make a plaster-cast of Lou’s torso… which they also did just before she had her first baby. I wonder what she does with the casts? I wonder if the first and second casts are different?

I went and joined her later, with Jed and Bex, at a pub called The Kite. Jed was playing with his band - about 6 or 7 folk musicians - that evening. They play traditional-sounding stuff, but they mix in covers of tracks by people like Snoop Dogg and others in a folk style. All very good.

Jen played some violin (very well) and I picked up a guitar and played (a bit) for the final third of the evening, which was brilliant. Good to know that the musical part of my brain hasn’t entirely evapourated.

This week I was 34. Time went very quickly.

On my birthday, we went for breakfast at a very good breakfast place, and then bought Indian food ingredients from shops in Drummond Street. We took these home and made lots of food for the party we had that evening. Lots of people came, time went very quickly, I seem not to have taken any decent pictures, but it was all good.

For my birthday I got some good books, some socks, a camera tripod, several other things, and a lovely orange birthday cake.

I discovered a while ago that I had a few extra days of annual leave that I’d forgotten about… so Jen and I booked a few random days off work. We were planning to go to Stockholm, possibly even by train, but got scared by the huge cost, and the huge lack of money in our bank account, so stayed in London instead.

The time was spent productively… we did a lot of lying in, drinking tea and eating toast. But over the long weekend we also went for a great meal at a place called Konstam, and wandered over to The Grant Museum of Zoology via The School of Life.

We perused Broadway Market with Jenny’s sister Morag, and went to the Victoria & Albert Museum for the Decode exhibition, and to the Natural History Museum to generally amble around.

I then went to Oxford to see my brother and his significant others, play with their cat, and take our other brother out for lunch, which was good.

The rest of the week was spent… doing something or other…

Arguments about AT-ATs aside, I’ve been reading a bit about CSS3 recently. Although I’m not necessarily a huge fan of the Ken Burns Effect, I was slightly surprised to find no results for ‘Ken Burns Effect CSS3’, so I tried some code…

On this site, the effect I wanted was letterbox-sized cropped versions of my Flickr pictures, so that they fit in with the text (like in this post).

I did this originally by using JavaScript: adding a class to the image I wanted to letterbox, and then grabbing it, adding a new element around it that had restricted height and overflow: hidden; and resizing things slightly.

Although this is quite involved, it did have the advantage of letting me add picture-specific values that could be read by the JS, so that I could have a different height and vertical focal point for each one…

(As you can see, I also grabbed the alt attribute value and inserted a caption under each image.)

The next step would have been to animate the image behind the letterbox, moving the background position gradually with something like glow.anim.css.

But I realised I could do the whole thing with CSS3…

Here’s the code:

<p class="sframe">
    <a href="http://www.flickr.com/photos/northover/3807482811/">
        <img src="http://farm3.static.flickr.com/2574/3807482811_a828b56d59.jpg" alt="Grass snake" width="375" height="500" />
    </a>
</p>

…and the CSS (the dimensions are quirky, ignore them)…

.sframe {
    height: 200px;
    width: 611px;
    overflow: hidden;
}

.sframe img {
    width: 627px;
    height: 478px;
    -webkit-transform: translate(0, 0);
    -webkit-transition: all 3.9s ease-in-out;
}

.sframe:hover img {
    -webkit-transform: translate(-13px, -200px) scale(1.3);
}

The container acts as the letterbox, while the image inside is given special properties.

The :hover state is translated and scaled slightly (vary these values to get a different effect) while the normal image has the transition defined on it, which seems to mean that the animation returns to its starting place even if you unhover the image halfway though. The image is stretched slightly, which makes it slightly pixellated, but these are all things that could be tweaked.

I started playing with keyframe animations, too: this allows several stages of animation, rather than just one. You can move from the top to the bottom, then zoom slowly out, for example. Some people say that’s a step too far, but… I think it depends on what you’re doing.

It can be made to work in Firefox by adding -moz-transform rules as well, but I haven’t done that yet. In the meantime, as with other browsers, the images should just look like letterboxes, with no animation.

There’s a whole discussion to be had about CSS3’s pros and cons, progressive enhancement, standards, HTML5, Flash, the iPad, and all the rest, but… another time.

After a lengthy week, Jen and I went for drinks with Frances (whose birthday it was) and then a meal with Olly and Lars (who are very soon to have a baby). I learned that Lars’ surname translates from German as “heifer shit-heap”, amongst other things.

On Saturday, a bit of breadmaking was followed by a train journey to Ramsgate, to stay with Gail, Jen’s old friend from way back. She and her husband Charlie have a very amazing house, and they cooked us amazing food, and we got amazingly drunk playing pool.

One thing about their house is that it’s really old, and it has a safe in one of the walls that holds the original hand-written deeds from the 1700’s… which slightly blew my mind. Wish I’d taken a photo of them.

The next day we walked around Ramsgate a bit. You can tell that it used to be a very popular place to go… parts of it feel a bit like you’re in a time-warp. We walked to the end of the harbour wall and surveyed the ocean, and it was dangerously cold.

We went to a great Belgian bar and had a glass of Belgian beer, and that was a very good idea wrapped up in a bad idea. The journey home and the rest of the day was a slow-burning hangover of epic proportions.

The week was another good’un. Lots of diagrams were drawn, and extensive discussions had.