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

webdesign

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 […]

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 […]

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 […]

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 […]

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. […]

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 […]

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! […]

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 […]

← Before After →