On the bright side it works on any background colour and is a little transparent which is neat. And it’s way faster to adjust the colour scheme than an image file would be.

The basic idea

It’s one <div> containing 8 <span>s, styled to be little grey lozenges:

.spinner span{
display:block;
height:13px;
width:5px;
border-radius: 2px;
background-color:rgba(77, 77, 77,0.5);
...

In anticipation of rotating them I moved the transform-origin to the middle of the element and then a significant way down beneath it. Later, when I rotate the lozenges this spaces them further apart.

...
transform-origin:50% 160%;
...

They all have a simple animation applied to them that makes them fade in and out (it has a bit of an opacity on it just for fun):

...
animation-name: fade;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode:backwards;
}

@keyframes fade {
0% {
background-color:rgba(77, 77, 77,0.8);
}
40% {
background-color:rgba(77, 77, 77,0.8);
}
100% {
background-color:rgba(255, 255, 255,0.8);
}
}

Using nth-of-type each lozenge is rotated 45degrees more than the last and has a delay of 250ms added to the animation on it. Unfortunately there is no easy way to do this program-magically so they have to be specified for each. Here is an example of the code for the second one:

.spinner span:nth-of-type(2){
transform: rotate(45deg);
animation-delay:-750ms;
}

Starting in the middle

Did you know that you can provide a negative value for animation-delay? Cool, eh?!?! This means I can make it appear that the animation is beginning in the middle, otherwise the first time it’s run it looks funny.

Placing the spinner

I added some absolute positioning to the <span>s, so the origin of the transform is at the top left of their parent <div>. This means the spinner fans out from the top left of the <div> and you can absolutely position it to exactly where you want the middle of the spinner. Handy if you want to place the spinner in the middle of something, like I did.

.spinner{
position:absolute;
top:50%;
left:50%;
}

.spinner span{
position:absolute;
top:-20px;
left:-3px;
...

Changing the colour

Changing the colour is as simple as creating a new animation and applying that to your special spinner spans.

.special .spinner span{
animation-name: specialfade;
}

Why not as generated content?

Yeah, ideally they would have been created using :after but I couldn’t find a way to style all generated content at once so I would have had to repeat the entire declaration for each :after element and it’s long enough already (you should see it with the browser prefixes).

I’m comfortable with that trade off because a loading spinner is only going to be used in association with javascript in which case you can generate the spans dynamically and remove them when you’re done.

Using it

Here’s the loading spinner with the moz and webkit prefixes. Of course, it only works in browsers that support animation and transforms but there’s more and more of those these days.

Also, yes, totally, please use it. Tweet me if you make any improvements.

A little bit more

I got a little carried away and made a few more. They only have the vendor prefixes to work in FireFox 6 right now: other styles.

I have some bad news and a fix (I hesitate to call it good news).

HTML5 introduces a way for us to include <style> elements on the page, we just need to give them an attribute of scoped. So, for example, if you have an SSI included widget you can include the styles in the widget file instead of trying to devise a way to add them to the head.

A Problem

But it causes an itsy bitsy problem with the styles. The <style> counts as an element, and if you put it first, it becomes the first-child. The styles I’d defined for the first-child in that block were not applied to the (now) second child.

In other words this:
div p:first-child
stopped working when I added the style to the HTML here:

<div>
<style> p{color:#00F;} </style>
<p>Text!</p>
</div>


A Fix

Fortunately we can include style in our CSS declarations (and even style it if you want, I gave it a width, and garish background colour in both FF3.6 and Chrome) so an adjacent sibling selector is the fix:
div style:first-child + p

I’m not keen on going through my styles sheets and adding this rule to every place I have first-child declarations but we don’t use scoped style elements too much so hopefully I won’t have to.

The other option would be to not put the <style> first in the parent I pretty clearly remember reading that the style has to be the first-child, of course, I can’t find where I read it.

Side Note: using <style scoped> today.

As of August 2011 there are no browsers that support the scoped attribute but if you’re using an HTML5 doctype you can still use <style scoped> today. Browsers have been happily rendering style elements inside the body for quite some time, it just wasn’t valid HTML before ;)

The old browsers will apply the styles in your scoped tag to the entire page so I combine it with a class to get the effect I intended.

<div class="foo">
<style scoped> .foo p{color:#00F;} </style>
<p>Text!</p>
</div>


Most of us use Twitter to keep in touch with people we know and keep up with things we care about. It makes sense, it’s familiar and comforting but it blocks out people and ideas we disagree with and it ignores some of the most powerful potential of Twitter.

What are we missing by insulating ourselves with the familiar? A recent episode of CBC’s Spark discussed the benefits of following a stranger with Joel Johnson who wrote a gizmodo article on the topic.

Not only can it help us avoid groupthink but Joel mentions a study that suggests exposure to other view points can make us more creative.

So I had the idea to create a twitter account that will add a random tweet to my feed now and then and when I mentioned it to Daniel he took a few minutes and built it.

You should follow a @perfectstranger on Twitter, and let me know what you think.

• Desaturating the colours in the style sheet.
• Desaturating every image on the site, that’s right, all of them.
• Authentic content.

Desaturating the colours in the stylesheet.

I captured the colours in the stylesheet using the Web Developer Extension in FireFox. Information > View Color Information produces a list of all the colours used in the styles and their hex codes. I took a screen shot of that and then desaturated it in Photoshop by adding a desaturation layer.

Once I had the desaturated colours I did a find and replace for the original hex codes in the style sheet, sampling the new hex codes from my Photoshop document.

Desaturating all the images.

All the images? Yep, all the images.

For this I tried out a couple different javascript libraries but ultimately went with PaintBrushJS by Dave Shea because it was the only one that could handle background images and didn’t add any extra elements to the page. PaintBrushJS uses a combination of javascript and canvas to alter the images.

For backwards compatibility I manually converted all the header and footer assets to black and white, this also meant I could restrict the desaturating javascript to running on just the content and leaving these pieces alone, taking a bit of a load off the client.

I actually had the easiest time getting it to work in IE… there’s a filter. I wouldn’t have used an evil evil filter if it hadn’t just been for half of one day but it was so I did.

I think this kind of photo manipulation has a place in web design since it means we can keep the unaltered versions of files and change their rendering when we change the theme, that’s pretty powerful.

Authentic Content.

We were lucky that the BCIT Archives have begun digitizing much of their collection. We got a great deal of source material from the 1968-69 Program and Course Catalogue. We listed courses like Punch Card Systems and Fortran VI for the day – both sold out of course.

Nope, the logo wasn’t a Star Trek knock off, that’s what the future looked like in the 60s and both BCIT and Star Trek ran with it.

The content about campus events came from copies of the student news paper from the same era. My favourite of the new stories was about how BCIT was getting its second computer.

It was a lot of fun and I’m glad we work at the kind of place that was keen to let us do it.

Firefox’s buttons are wider than IE’s or Webkit’s. Why? This little gem in the browser’s style sheets:

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px 2px 0px 2px;
}


That’s right, it’s 4px wider. Thank you FireFox.

Fortunately, we can fix it!

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
padding: 0px;
}


That was easy :)

We have a class on our site that is applied to every button. I call it “formbutton” (I didn’t get to pick it. My boss picked it 8 years ago. It’s a great name isn’t it? Epic and enduring.) So I can simplify that code up to this:

.formbutton::-moz-focus-inner {
padding: 0px;
}


Want a little more info:

I found this with a little help from this article on viewing FireFox’s default style sheets. The observant among you may notice there is another style in there. It is for keyboard navigation. Use your new found powers wisely, don’t remove it without replacing it.

Also, here’s a link if you’re wondering what is up with the double colon notation.

And so far it does not look like there are equivalent pseudo elements in Webkit or IE, but I will admit to not looking very hard since this fixed my problem ;)

Did you know it was possible to use vertical-align on any inline element? Did you know that first-line is an inline element?

If you’re working on displaying the bullets at the same height, this might be the fix for you.

Some of it works in FireFox but all the cool stuff works best in webkit: here’s as far as I got.

Have fun with it :)

Are you free June the 2nd between 5:30 and 8:30? Join others like you at Steamworks. Look for the girl in the hat (That’s me! Hopefully there won’t be more than one…)

Please let me know if you’re coming so I can reserve the right number of seats:

PS – I know I said I’d go for a different day, but unfortunately I’m pressed for time this month :/

Are you free April the 28th at 5:30pm? Join others like you at the Irish Heather in Gastown. Look for the girl in the hat (That’s me! Hopefully there won’t be more than one…)

Please let me know if you’re coming so I can reserve the right number of seats: