Alpha channel

I’m not much of a visual designer, but here’s a subtle little use for alpha channel I found while build a related episode feature. (You may have to squint a bit here or alternatively zoom in.)

In the before pic, we have dark text on a dark-and-light texture:

The text blends into the background too much, so we can sharpen it up with a subtle background (#eee):

Better, but observing closely shows the discontinuity. So instead of full light-gray, let’s blend it into the background. Here I used a 0.5 alpha channel (rgba(240,240,240,0.5)) and to make the transition even less jarring, a 5 pixel border radius too. (I suppose I could have added a box shadow for max combo.) I think it’s considerably sharper now, but without any noticeable background.

One thought on “Alpha channel

Leave a Reply