I recently finished a major redesign of my site. I had a lot of fun designing and building this new version and got a chance to experiment a ton with new things. A few of the changes that I made include using CSS3 instead of images, the addition of @media queries, and simplifying the entire site to focus more on my blog.
Just a short note to say that it looks like Firefox will finally be supporting CSS transitions in their next release. I downloaded the beta release of Firefox 4 the other day and was very happy to see that my -moz-transition styles were working.
Last week I had the opportunity to attend An Event Apart Seattle. The conference itself was two days long, followed by a one day workshop on HTML5 and CSS3. I got to hear from experts like Jeffrey Zeldman, Dan Cederholm, Jeremy Keith, Andy Clarke and a lot more. I even got to meet and talk to Andy Clarke at lunch.
This weekend I really wanted to design a quick site and try out some new CSS techniques I’ve been learning, so I made a sandbox site. What’s a sandbox? Basically it’s a place where I’ll post my experiments and little projects that I’ve been playing around with.
A couple of days ago Elliot Jay Stocks posted a tweet about his feelings on web designers who can’t write code. Since then, the web design community has erupted into a debate on whether or not designers should be able to code. I can see valid points on both sides of the argument and I must admit I’m not totally sure where I stand on this subject.
I’ve worked on a few sites before where I had to develop tooltips. You know what I mean, those little boxes of text that come up when you hover over a link or an image. I used jQuery plugins in the past, but for my site I wanted to try something different. I wanted a solution that used no JavaScript, but still looked good and had some cool effects. Luckily, some pretty standard CSS along with some CSS3 animations were all I needed.
There has been a lot of excitement about CSS animation lately, and I’ve been playing around with it. In this tutorial, I’ll show you how to use CSS Animation to make an old video game style website.
First things first: some of the CSS we’ll be using in this tutorial will not work in all browsers. Right now, only webkit supports CSS animation properties, so Chrome and Safari will render the page correctly. Firefox will work aside from the animations, and IE will probably find ways to screw everything up.
About a year ago I watched Helvetica. It had a really big impact on the way that I look at the world. I became obsessed with identifying the type face in the wild. One thing that I started to notice, though, was that a lot of websites used Arial as their primary font. I started to look into it more and found that many of these sites put Arial before Helvetica in their font stacks. I was (and still am) really confused by this.
Most web designers know that typographic options on the web are… well, lacking. The list of fonts that are available on all computers is a short one. Luckily, though, we have CSS font stacks. This allows us to specify the font that we want, and then provide a list of backup fonts in case a visitor to our website doesn’t have the one we intended. Font stacking is all well and good, but imagine how great it would be if we could ensure that every visitor to our website saw the font that we wanted them to see every time. How great would that be? No more Arial in place of Helvetica. No more Georgia instead of Hoefler Text.