Tag: CSS

Interactive intro to web typography

This is a nice little resource/essay that outputs typographic css for your web design.

“The mechanics of the em unit offer an excellent way to size child elements in relation to their parents. In fact, if every child element defines its sizing values in em, a chain reaction is set off. Each child becomes proportionally bound to its parent, which in turn is bound to its parent, all the way up to the root element, ancestor of all. In this way, the proportions of the whole document end up being defined in relation to a single, shared value: the font-size of the body.

Documents sized in this way enjoy a golden property, one that most web pages would do well to provide: proportional scaling. Should the user or designer change the base font-size, all the other elements on the page will resize accordingly, preserving their original proportion to the body. It will look as if the view has just been zoomed in or out. “

How to tell the internet to shut up

Comments are what makes the social internet go round – but they also are a classic example of the signal v noise aspect of effective communication. Annoyingly long comment threads obscure much goodness. You can, though I don’t recommend it, block comments from almost every site you visit around the world wide web, by installing this code snippet in your browser.

It comes with a warning:


The stylesheet blindly hides blocks with IDs like “comments”, which could have unexpected side effects. (I’m told it hides the “discussion” section of Bugzilla installations, for example.) Disable shutup.css if you think you might be missing important page content.

Unlike the guy who wrote this plug-in – I like and value your comments, and would appreciate more of them…

Wrap text with style with CSS Wrap Text

CSS text wrapper is a cool little webapp that generates shaped text frames for your website. You can customise them. This might prove useful if you’re doing something like a Christmas card and want to make a bunch of little baubles or something… or if your landing page has pictures. Check it out. Here are some samples.

Design brief

I have been doing a bit of web design stuff for work and on my blog for a while now – and I still find CSS glitches in my ad hoc approach to changing things.

Here are three essential tools for making web design using CSS an easier job.

  1. This Smashing Magazine CSS Tutorial is a must
  2. Firebug – the Firefox extension that allows you to chop and change your code and watch what it does to your page as you do it.
  3. A good CSS editor program (here are ten suggestions) takes out a lot of the grunt work.

Update – here are some cliched features to avoid. And my favourites listed in order of how annoying I find them…

  1. Autoplaying music
  2. Introduction movies with no skip button
  3. Comic Sans
  4. Overuse of stock images
  5. Animated Globes

One that wasn’t on the list that I find particularly annoying is talking ads that don’t pop up but move across the page. I guess people are trying to prove that they’re tech savvy and stuff…

Am I missing anything design people?

Class = “mug”

Yeah, so I’m a geek. And I spend a fair bit of time trying to get frustrating CSS anomalies ironed out of our work website. So this mug is funny. Ok. That is all.

Shirt of the Day: Ninja Code

For people who know CSS and like ninjas… Buy it here.

CSS and desist

CSS is confusing. I just saw my new design in Internet Explorer 7 for the first time – and it still didn’t work. Oh for a standards compliant Microsoft… oh well, I think I fixed it by essentially ditching the transparency setting for Explorer. Still, my design looks better in Chrome and Firefox. I doubt that will be the tipping point for anyone contemplating switching browsers. Any Explorer readers out there finding this easier to read? Let me know please – older versions than IE7 may still have problems.

The new black

I’ve been doing a fair bit of HTML and CSS stuff at work lately.

So I found this shirt particularly amusing. I’d buy it – but my wife is campaigning against stupid shirts.

In other hexadecimal colour news – this site makes converting between RGB and Hex codes a breeze.

I don’t know how I, the colour blind guy with no design sense, became responsible for our website design (note: only the Corporate site – and the design is currently mostly broken and I’m not fixing it ahead of a comprehensive redesign), but that tool makes my job easier.