Category Archives: Design

Styling Scroll Bars

Recently I was working on a project at my job at Pierce Communications and decided I wanted to play about with some scroll bar functionality.

Normally we would never advocate changing default browser behaviour — it can confuse users and jar the user experience, but occassionally small changes can be fun and add to an experience.

One such change is to style the scroll bars that appear when you have overflow in your content. By default the scroll bar will appear just as the browser intended, this is because the scroll bar is part of the browser’s chrome, fortunately we can hack around this in most cases.

The first thing a lot of people would do is start looking for a jQuery plugin, and indeed there are a few out there which seem to work quite well. But I have a problem with using JavaScript for style when I shouldn’t need to and I have a big problem with introducing extra code to support just to add some visual fluff. If the design really really needed it then I would look at using a plugin, but for a little bit of visual sugar I don’t think it is worth it.

Of course even if we use a plugin, we shouldn’t rely on JavaScript to do our dirty work, so there are also some CSS hacks we can apply, unfortunately they only work on a small amount of browsers but since this is essentially a bit of visual icing that is fine.

The CSS you need would be something like this;

	/**
	 * This will work for some verions of Internet Explorer
	 * and apparently Opera, although I cannot confirm this.
	 */

	.myCoolDiv {
	    scrollbar-face-color: #000000;
	    scrollbar-shadow-color: #000000;
	    scrollbar-highlight-color:#000000;
	    scrollbar-3dlight-color: #000000;
	    scrollbar-darkshadow-color: #000000;
	    scrollbar-track-color: #D9D1AC;
	    scrollbar-arrow-color: #D9D1AC;
	}

	/**
	 * These will work for some versions of Webkit enabled browsers.
	 */

	.myCoolDiv::-webkit-scrollbar {
	    width: 12px;
	}

	.myCoolDiv::-webkit-scrollbar-track {
	    -webkit-box-shadow: inset 0 0 6px rgba(217, 209, 172, 0.85);
	    border-radius: 10px;
	}

	.myCoolDiv::-webkit-scrollbar-thumb {
	    border-radius: 10px;
	    -webkit-box-shadow: inset 0 0 6px rgba(217, 209, 172, 0.85);
	}

There is plenty of information available online about each of the properties for both Internet Explorer and Webkit.

Remember that with great power comes great responsibility, this should always be used with caution and always with the user experience in mind, colouring in scrollbars for the sake of it is not something we would ever do or recommend anyone do.

With that said, happy hacking!

Share this on

Useful CSS Links

Here is a dumping ground for any CSS links I find particularly useful.

Latest Edited: 04/04/12

Inline-Block – Why it rocks and why it sucks – A nice rundown of why inline-block can be used instead of float, but some potential pitfalls with it.

Subtle Backgrounds – Really nice subtle background images you can you use for your next project.

CSS3 Button Generator – For us lazy types who like GUIs for doing this sort of thing!

Share this on

CSS Vendor Prefixes – A potential use case

You know those moments when you know something won’t work but you try it anyway just in case the web gods look favourably on you for once? Well I just had one of those and I would like to share it, because I think this is something that the web gods should consider.

Vendor prefixes in CSS serve the purpose of allowing browsers to play about with their own implementations of new CSS rules or adding stuff totally unique to them.

There have been arguments back and forward about how useful these are in production systems and there have been some great tools made to try and reduce how much time we spend in vendor prefix hell, personally I think anything that drives the web forward is a good thing and I think prefixes do that.  But anyway, enough pre-able.

What I would like to propose is that since we have vendor prefixes anyway, could we use them to target specific browsers with already known rules.

I have an edge case where it would be really nice to be able to do something like;

margin-bottom: 59px;
-webkit-margin-bottom: 39px;

What this would allow me to do is set the standard margin-bottom to 59px (if it not being 60px makes you twitch, join the club!) but in webkit browsers I would like the margin to be slightly smaller.

I know this could be misused and end in really sloppy, massive CSS files – but if used with care (which I promise I would do) it would be a neat way to achieve these odd little hacks that occasionally we need to do.

Share this on

Keeping on top of my to-do list.

I want to start off this post by immediately going off topic. Up until fairly recently I would have referred to my list of things to do as a todo list, which is technically fine, but as per my question on the subject, best practice would dictate it should probably be called a to-do list.  Interesting, huh? *ahem* moving on.

I have decided after giving pretty much every other conceivable to-do list system a fair try that the best way to manage mine in a way that allows me to keep on top of my current tasks is by popping myself an email, or letting others pop me an email.

In my opinion email wins for several reasons;

  1. I always have access to my email – including when I am offline, when I am on my mobile devices and when I am in work.
  2. I already need email – rolling my to-do list into my email doesn’t add an extra application, website or function to my daily life.  I would be checking it anyway.
  3. I can categorise my list how I want – or decide not to categorise them, a lot of to-do list managers seem to want you to either not have groupings or categories, or force you to always assign a task to one group.
  4. People can add to my list without my input – with pretty much every other list if someone wants you to action something you have to take time out to put it into your list, with email if someone mails me it goes straight on my list.
  5. Conversely, I can remove from my list easily – I don’t feel as bad archiving off an email as I do marking off a to-do list item, if someone sends me an action I don’t think I want to do for whatever reason I can easily remove it.
  6. Emails come complete with meta data – a lot of the time the email will already contain who it is for and when it was asked for, these are two of the three most important things you could need for meta data (when it is needed by is the third)
  7. I can easily add links and attachments to my to-do item – this is something that is lacking from a lot of the solutions out there.
  8. Email is normally the first contact – a lot of my actions are born from emails anyway, so it makes sense to capture them at source.

So there we have it, 8 reasons why I am going to use email for my personal to-do list manager. Glad I stopped short of having a top 10 list!

I said “personal to-do list” because one thing email does fall over on is allowing me to report on what I have done in the past hour / day / week / etc. which is something I need to do for work related projects.

Having discussed now what I use, let me briefly mention what I have used in the past and why they have failed in my opinion.

  • Offline to-do list managers – Even the ones that sync feel very clunky and not very connected, always required that extra step to input things and needed installed on every machine you use.
  • Online to-do list managers – Normally lacked core features, very few had good offline capabilities and it meant you had to remember a site to log onto when you wanted to view your list.
  • Paper based list – This actually almost became my main way of doing things, it is quick and easy, gives you full control over what you write down, It’s just that I found that my notepad wasn’t to hand a little too often.

I would be interested to hear what you use and why.

Share this on

My first doodle in about 7 years.

Today I bought a Wacom Bamboo tablet;

This is my first attempt at using it.

I used to draw these little guys when I was bored during class.  I want to get better at drawing / creating graphics and hopefully charging about on this tablet will help me.  There is also built in hand writing recognition, which could be fun to play with.

I don’t think the design team at Pierce have much to worry about just yet, but who knows?

Share this on