With geriatric Internet Explorer versions this site looks shite. This because Impossiblue is built with modern tools and would require hacks and workarounds to function in legacy browsers. I no longer have the patience nor the inclination to satisfy everybody. Impossiblue is an experiment and a playground – and my sustenance does not depend on it. As a concequence – to embarrass nobody – I have decided to lock you out. So, there.

Impossiblue

Background gradients

In Norway we have the mnemonic ROGGBIF to help us remember the colours of the rainbow. That would be roygbiv in English, something that never triggers any memories, I guess. Anyways; red, orange, yellow, green, blue, indigo, and violet in that fascinating blurred gradient that Noah’s god is said to have put in the sky when the rain stopped, telling Man that a flood would never again be used against his sins.

On a larger scale, you English speaking sinners do have an association in OBAFGKM, or at least those of you who have studied astronomy and learned the Oh, Be A Fine Girl/Guy, Kiss Me; the way to remember a spectral classification of stars.

“What are you getting at?”, you may ask. And right you are. But let me enlighten you: A colourful spectrum is ground zero for learning how to use CSS background gradients. They lend themselves perfectly. And from now on I will restrict my blah blahs to practical exercises and necessities. Read on. Stay tuned. Here goes…

OBAFGKM

Fig. Spectrogram of an artist’s (that’s me) impression of the OBAFGKM classification system, with a tip of the hat to the cool (pun intended) red and brown dwarf stars, as well as to Annie Jump Cannon. Colours have been extracted from the article Stellar classification and colour divisions are more or less empirical, based on effective temperature and Vega-relevance.

The CSS

#obafgkm {
	background-image: linear-gradient(
		to right,
		#bcf,
		#fbf8ff 68%,
		#ffffed 76%,
		#ff0 81%,
		#ff9833 84%,
		#f00 89%
		);
	}

As class O occupies the space greater than 30.000 K, with no upper limit specified, it actually starts (darker blue) to the left of the spectrum in the illustration. To indicate this in the spectrogram we can build on the former illustration by positioning a repeating-linear-gradient topmost left while at the same time shifting the rest of the spectrum slightly to the right.

Fig. The OBAFGKM O class is indicated with zebra stripes.

The CSS

#classO {
	position: relative;
	background: linear-gradient(
		to right,
		#9bb0ff,
		#bcf 5%,
		#fbf8ff 73%,
		#ffffed 81%,
		#ff0 86%,
		#ff9833 89%,
		#f00 94%
		);
	}
#classO::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 5%;
	height: 74px; /* Or 100% for more general use */
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 8px,
		#9bb0ff 8px,
		#9bb0ff 16px /* Sets size */
		);
	z-index: 1; /* "0" works, too! */
	content: "";
	}

Note: My initial desire was to stack two background images, one on top of the other, using a mixture of repeating-linear-gradient and linear-gradient. I ran into two problems testing this. Most frustrating was that I was not able to adjust background-position using % values (tested in Safari 10.0.3). Which ran havoc with the implementation of colour distribution based on %. This could have been mollified using pixel values for each of the break points in the responsive design, but the result would not be a general, use-for-all-applications kind of thing. Secondly, and strange: Safari worked well with non-prefixed properties like so:

repeating-linear-gradient followed by linear-gradient

The following broke, however:

-webkit-repeating-linear-gradient followed by -webkit-linear-gradient

The following combination again worked:

-webkit-repeating-linear-gradient followed by linear-gradient

Life is too short for this and the reason why I resorted to a pseudo-element for the zebra stripes. I also deleted WebKit prefixes from the code belonging to the spectrogram with the stripes. For what this was worth, it gave me a chance to experiment with repeating linear gradients and it taught me to pay heed to what MDN says:

With CSS3, you can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.

The theory, sort of

The specification for the implementation of background-image has changed over time and between browser vendors. To serve as many users on as many platforms as possible one could easily end up with exhausting code. Chris Coyier has documented this on CSS-Tricks and a sanitized version of his table (sans comments) is shown below for that gooseflesh sensation.

The CSS

.gradient {
	background-color: red;
	background-image: url(fallback-gradient.svg);
	background-image: -webkit-gradient(linear, left top, right top, from(red), to(#f06d06));
	background-image: -webkit-linear-gradient(left, red, #f06d06);
	background-image: -moz-linear-gradient(left, red, #f06d06);
	background-image: -o-linear-gradient(left, red, #f06d06);
	background-image: linear-gradient(to right, red, #f06d06);
	}

As of this writing, his article was last updated in 2014, so testing and reading up on stuff is very much relevant. The web based Ultimate CSS Gradient Generator (and this is an example, not a recommendation) will spit out code with -moz- and -webkit- prefixes together with support for standardized code and Internet Explorer 6 through 9. This might be an indication of what is still necessary in spring, 2017. Note that they spec with background and not with background-image.

The CSS

background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );

Important: If gradients described in this here article fail to materialize in your browser, it may be because I try my luck with only moz, the final webkit, and the standard.

ROGGBIF

Fig. An artist’s (that’s me, again) representation of the colours of a rainbow, based on wavelength distribution.

The CSS

#fibggor {
	background-image: linear-gradient(
		to right,
		#ee82ee,
		#4b0082 10%,
		#00f 15%,
		#008000 25%,
		#ff0 47%,
		#ffa500 52%,
		#f00 59%
		);
	}

Going from short wavelengths to longer wavelengths, left to right, as in the rainbow above, might be the proper teaching, but me I sort of expect the red of ROGGBIF to be on the left hand side of the spectrum. Now, as it turns out, it is easy to reverse the direction of the gradient with CSS. There is no need to recalculate and replace percentages. All it takes is to change the direction after to (and forget not vendor specific code).

Fig. Now, that is much better. But the real question is, where is the treasure? On the left hand side or on the right hand side of the rainbow?

The CSS

#roggbif {
	background-image: linear-gradient(
		to left,
		#ee82ee,
		#4b0082 10%,
		#00f 15%,
		#008000 25%,
		#ff0 47%,
		#ffa500 52%,
		#f00 59%
		);
	}

Note: The colours used for the rainbow here are in no scientific way associated with the real thing. They are the RGB hexagonal values ripped off the CSS/SVG keywords red, orange, yellow, green, blue, indigo, and violet as tabulated by MDN. Throw in a rather loose approximation of wavelength distributions and it would only be proper to let Isaac Asimov have the final word:

It is customary to list indigo as a color lying between blue and violet, but it has never seemed to me that indigo is worth the dignity of being considered a separate color. To my eyes it seems merely deep blue.