A little history and implementation details on the theme of this site, backlit.

Background

One of my favorite fictional computer interfaces is that of HAL 9000, from 2001: A Space Odyssey.

I've always wanted to bring a little bit of that look to my desktop, fortunately, there have been more than a few screen savers dedicated to emulating HAL's interface screens.

Yet, none of these satisfied me. They were missing the retro-futuristic magic. They looked like images on a monitor, because that's exactly all they were.

I needed to look closer at the source material. I needed to look beyond what HAL was display, and see how it was being displayed. And in the movie, HAL's displays were slides rear-projected onto frosted glass.

So, I opened Photoshop, and got to work. I made a basic image and added to following effects to try and replicate the look of the original rear-projected slides.

  • Added a bit of noise to simulated the frosted glass.
  • Added a radial gradient to replicate the lighting falloff and hotspot from the rear projection.
  • A tiny bit blur, assuming the projection would be just a touch out of focus.

Here's what I ended up with:

I only made the TLA slides, but that was enough. I was content.

For about a week.

I've always hated screen savers.

Towards the Web

Many years later, I found myself looking at an iPad 3, and I was stuck by how its display didn't look like a display at all. I wondered what my old screensaver images would look like on a display like this?

I never did get around to exploring that, but the seed was planted. When I got my Macbook Pro with a Retina display, it grew. Forget screen savers, what would a website look like with this effect?

So, I set out to build a website simulating a rear-projection slide display.

Like the Photoshop slides long ago, I broke it down to three effects. Noise, hotspot, and blur.

Noise

It's not enough to use a noisy image as a background. The grain of the frosted glass screen affects the the entire slide, so the noise must cover the entire website.

I created a div to cover the entire page.

<div class="filter-holder" id="filter-holder-a"></div>

With the following styles, so it completely overlays the entire page.

.filter-holder {
    background-image: (url:assets/images/noise.png);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99999;
    pointer-events: none;
}

The pointer-events: none keeps the div from blocking interaction with the website under it. It's experimental for use on HTML objects, but has support in modern browsers except IE and Opera.

Add a semi-transparent image with noise, and this works great.

Hotspot

Like the photoshop slides, the hotspot is simulated by a simple radial gradient. I used another div like the noise layer, to cover the entire page.

Here's the CSS, using Compass SASS mixins.

#filter-holder-b {
    @include background(
        radial-gradient(center, circle closest-corner, rgba(white, 0.2) 0, rgba(black, 0.2) 100%) fixed
    );
}

Defocus

There are so many ways of implementing blur, I thought this would be the easiest to implement.

I was wrong.

This was a tricky one to get right, but by far the most important effect to sell the effect.

It's critical to blur just enough to suggest the effect, without making the text difficult to read. This needs to work on HiDPI and regular displays.

CSS Canvas Filters were just becoming available, I believed that would be the magic bullet. Some tests in Chrome told me that filter: blur(0.5px); was just about perfect.

Unfortunately, Safari won't accept sub-pixel values. It interprets that as if I had entered 1px. Too much blur.

I decided to focus (hah!) on text. I knew adding a tiny bit of centered text-shadow, colored the same as the text, would give me the effect I was looking for.

Even that wasn't as simple as I'd hoped. The difference in text rendering engines required a lot of tweaking to find out what worked best.

Here's the settings I'm using now, again, using Compass:

text-shadow(rgba($text-color, 0.5) 0 0 1px);
color: rgba($text-color, 0.4);

Results, Limitations, and Moving Forward

So, what do I think?

It looks great on a HiDPI display, Chrome specifically - it really does a good job of rendering the text the way I want. Unfortunately, most of the effect is lost on a standard display.

This is the part when I realize I've spent a lot of time styling a website to look, well, worse.

I'm almost certainly going to scale-back some of the effects in general use, and set up a page or two to demo the concept.

Updates

March 25, 2013

I'm removing the hotspot. It was far too distracting.

A consequence of that is, the hotspot gradient layer had the secondary effect of desaturating the colors. Once I removed it... Gah! Not what I wanted. I've added a non-gradient overlay to temporarily fix it, until I can adjust the colors on the site to compensate.

January 31 2013.