Sam Croft

Full-stack developer

Using a smattering of CSS3 and two background images to create a colour-burst effect

  • 0 comments

Filed in: css, jQuery, Uncategorized

CSS3 colour bursts

Recently I’ve been helping my brothers fiancée with her website. The site uses a lot of close-up photography layered using CSS backgrounds. In an effort to make things a little more interesting I wanted to create a simple effect of fading black and white images into colour versions.

A considered approach

My priority in creating something for this effect was to use as little JavaScript as possible, avoiding the use of a beefy jQuery colour plugin.

I’ve been using jQuery a lot recently and although I’ve never relied on it, or built foundations with it, I wanted to ensure that as much of this effect was achieved using CSS as possible. With that said, I knew from the outset that this kind of technique would require a substantial amount of CSS3 properties. But that’s ok, everything would degrade nicely for Internet Explorer users. Right?

The basic outline of CSS colour-bursts

In its simplest form; CSS colour-bursts is a rapid injection of colour into a black and white image. A number of assets and properties are required:

  • Two identical background images, one black and white and one colour version
  • Absolute CSS positioning
  • Border-radius CSS property
  • Opacity CSS property
  • Transition CSS properties
  • A small amount of jQuery to toggle classes

Looking at this list it’s probably fairly obvious where I am going with things.

The HTML markup and CSS

This is a very straightforward technique and there is only a small amount of HTML markup and CSS required.

Just two HTML elements

<div class="black-and-white">
	<figure class="colour">

	</figure>
</div>

This is the basic markup, but it’s worth pointing out a few things. This is a work-in-progress idea and uses the CSS background-image property rather than actual img‘s.

I’ve used div and figure to illustrate the semantic intentions of this technique. A refined version of this would have an img within the figure element. The img would be the final colour version of the black and white image that is loaded via the colour burst. The refined version would remove this img, using jQuery, and use the src attribute as the CSS background-image. I hope to update the repo with a refined version, but for now humour me in the absence of an actual img!

The class names probably give each element away, the div will house the black and white background image and the figure will hold the colour version of the same image. I’m using a div for the black and white image as it bears no real meaning, it’s just an extra hook for our CSS to create a visual effect. Where as figure is used for the actual colour image that will burst into view—this does bear a lot of semantic meaning, as it’s the actual image that is being ‘loaded’, so to speak.

A few lines of CSS for the colour burst effect

90% of this technique is achieved using CSS. The effect is accomplished with the use of three separate classes.

div.black-and-white {
	background: url(black-and-white.jpg) no-repeat 50% 50%;
	position: relative;
	width: 400px;
	height: 400px;
	margin: 0;
}

Not much to explain here; just a square div with a centre aligned (vertically and horizontally) black and white background image. It must have its position property set to relative to allow the figure element to be correctly positioned within it.

figure.colour {
	background: url(colour.jpg) no-repeat 50% 50%;
	position: absolute;
	top: 175px;
	left: 175px;
	z-index: 2;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	-webkit-border-radius: 800px;
	-moz-border-radius: 800px;
	-o-border-radius: 800px;
	border-radius: 800px;
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-webkit-transition: all 1s cubic-bezier(0.335, 0.475, 0.890, 0.150);
	-moz-transition: all 1s cubic-bezier(0.335, 0.475, 0.890, 0.150);
	-o-transition: all 1s cubic-bezier(0.335, 0.475, 0.890, 0.150);
	transition: all 1s cubic-bezier(0.335, 0.475, 0.890, 0.150);
}

Slightly more here, but largely thanks to a plethora of browser vendor prefixes.

Similar to the first class this is a square element (at first), although a lot smaller, with a colour background image.

This class has a position of absolute and top and left values to centre align the figure element within the div. The values will, of course, depend on the size of your div and figure.

A z-index greater than that of the div is used to ensure that it remains above the background image of the div.

To create the colour burst effect the figure element is rendered as a circle, using border-radius. All corner values are equal to double the width and height of the final sized element; creating a circle for the burst.

Initially we don’t want any of the colour burst effect to show, so the figure element has an opacity of 0. Even though a part of me died inside, I have added the various Internet Explorer ‘fugly filters’ to achieve the same level of opacity for those browsers.

Finally I have used the transition property to define how each aspect of the figure element will animate. Because several aspects will be animating I have used the all keyword, rather than listing width, height, border and opacity.

To create the desired ease-in and punch for the colour burst I used the wonderful CSS easing animation tool by Matthew Lein to produce the necessary cubic-bezier curve timing function.

figure.colour.in {
	width: 400px;
	height: 400px;
	top: 0;
	left: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	border-radius: 0;
	opacity: 1;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
}

The final class sets the value for the ‘resting state’ of the colour image after the animations are complete. This involves setting the figure element’s height and width to match the div and positioning it in the top left of the div.

The border-radius is removed to ensure the figure element is the same shape as the div. Finally the opacity is brought back up to 100% to make the element fully visible.

This is the bulk of the effect complete. What is left is just down to how the effect is triggered.

A bit of jQuery to start the CSS colour burst

Using jQuery it’s really easy to add a class to an element, and that is all that’s required here. The .in class just needs to be added to the figure element whenever the CSS colour burst is required. The event that triggers the effect could be anything, but for demonstrative purposes I’ve just gone and added two links that will toggle the effect.

$('a[href="#in"]').click(function(e){
	e.preventDefault();
	$('figure.colour').addClass('in');
});

$('a[href="#out"]').click(function(e){
	e.preventDefault();
	$('figure.colour').removeClass('in');
});

Self explanatory—simply adding or removing the .in class.

There we go.

But does it work on Internet Explorer?

It works, yes. But of course it doesn’t look quite as it does in Chrome, Safari, Firefox or Opera. And not surprisingly that is because of Internet Explorer’s lack of CSS property support. Only IE 9 will support border-radius and to my knowledge there is no IE support for transitions (I might be wrong here), but the approved W3C property name is there for when they finally do support them.

The overall effect is progressive in that no functionality is removed if someone is using a poor browser, simply the effect is more shiny in the ‘nicer browsers’.

Future ideas and uses for CSS3 colour bursts

I’ve always wanted to write my own jQuery slideshow plugin. I’ve used many, and never really found one that really ticks all the boxes—no matter how many pro’s there is usually one giant con that stops me from wanting to use it.

Given time I’d like to fully integrate this technique into a lightweight and semantic jQuery slideshow plugin. A list of images with no superfluous markup and a tiny plugin that would initially display low(er) quality black and white images and then load the colour versions on the fly, using the colour bursts technique.

I’ll be sure to update this post if I ever develop things any further.

About the author

I'm Sam Croft a full-stack developer with over 15 years experience in web and app development. For the last six years I have been a partner of Running in the Halls, an app and game design studio based in Huddersfield, UK. During this time I have developed many web and applications. Highlights include a node.js/socket.io app to create the worlds largest crowd-based game on the first series of Channel 4's Gadget Man with Stephen Fry and Librarygame, a Library gamification platform for Universities. Librarygame is being played by over 6,000 students at The Open University, The University of Manchester, The University of Glasgow and The University of Huddersfield.

In my spare time I enjoy long distance running, watching all sports (especially F1) and playing video games. I live in the Holme Valley in West Yorkshire with my wife, Alex.

Sometimes I tweet.