pixelmasochist.net

4 D W E

4 D W E - Revived

Something for the weekend!

A demonstration of colour switching using jQuery and CSS Transitions

Click on one of the colours to view the effect.


How To

The colours are broken into blocks within the CSS for ease of duplication. The CSS (if you haven't examined it already) looks like this.

/* @ORANGE */
.co-Orange {
background: rgba(250,150,0,0.6);
}
.co-Orange .baseCo,
#co-Orange{
background: rgb(250,150,0);
}
.co-Orange a,
.co-Orange .highlights {
color: rgb(250,150,0);
}
/* @HOT-PINK */
.co-HotPink {
background: rgba(250,20,150,0.6);
}
.co-HotPink .baseCo,
#co-HotPink {
background: rgb(250,20,150);
}
.co-HotPink a,
.co-HotPink .highlights {
color: rgb(250,20,150);
}

It's a pretty basic set up that gets the colour selection from the body. Like this.

body class="co-Orange"

Once that's set, the CSS filters the unnecessary colours and applies the relevant ones.

The jQuery (thanks to the awesomeness of jQuery) is also simple. The clicked target id becomes the body class, simple.

$('.baconPowder div').click(function() {
$('body').removeClass();
coSelect = $(this).attr('id');
$('body').addClass(coSelect);
});

About

So, what's the point of this? Good question!

There are a great many people on this planet who are colour blind, there are a great many designers who are far too arrogant to acknowledge this (yes, I am guilty of this myself). With this method applied to a web based application the user can choose a colour that is in their spectrum of vision. Any links will not only be underlined, but very different from the rest of the text, coloured to the users personal visual spectrum. This should make navigation far easier to those who are colour blind.