Abstract Sequential Stephanie Hobson's abstract thoughts in the sequence she has them.

CSS Loading Spinner

I needed a loading spinner for a side project the other day but I was too lazy to steal someone else’s off the internet or try to re-learn making an animated GIF so I just coded my own in CSS (CSS is my hammer).

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;
}

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 other styles.

A style tag counts as a :first-child

EDIT 2011-09-15: All of this applies to <script> in the body as well.

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>

Perfect Stranger

Twitter is an amazing tool to catch a glimpse of the collective consciousness. I’ve seen it during the Olympics and I’ve been apart of it at conferences like An Event Apart. Jeremy Keith once said that Twitter was the closest he’d ever come to feeling as though he’s jacked into the Matrix.

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.

A Dull April Fool’s Day

There was a rash of black and white April Fool’s Day sites this year. We weren’t the only ones to do it but I think we did it best, if I do say so myself. There were three parts to our little switch and it wouldn’t have been the same without any of them:

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 or Chrome/Safari’s

I hate form styling on the best of days. This is a good example of why:

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 ;)

Taking a photo of yourself with an iPhone

Bullets alligned to the top of the text

Know how IE and FF display list-style-image bullets at two different heights and it drives us all nuts?

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.

CSS3 only cover flow

Nothing teaches me how to do something like a project and I was trying to learn CSS3 so I tried to make a CSS only cover flow.

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 :)

Web Hot. Beer Foamy.

Like to talk about front-end web stuff? Like to do it with other people? Don’t object strenuously to the presence of beer or perhaps even see it as a benefit?

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:

[poll id=”3″]

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

I (miss|missed) AEA

Miss An Event Apart? Missed An Event Apart? Or like to talk about web stuff over beer?

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:

[poll id=”2″]

← Before After →