Web Design: (part 2) Pete's Multi-Purpose Alpha-Background PNG

This one predates the gradient idea--and probably inspired the gradient idea. This came about when I was designing some customized GetRight To Go (http://www.getrighttogo.com/) downloaders. A large game company wanted a standard template that they could just change the background image to make custom downloaders for each of their new games.
This "background image" would be full sized for the downloader window--essentially the same graphic as the game's advertising campaign, or the graphics from the box, something like that.

At first, this seemed very difficult to do, since I wouldn't know anything about the future background images that they may use. Some would be light, some dark, All different colors, some high-contrast, some low, etc...

I thought an ideal solution would be semi-transparent DIV overlays that could help neutralize the differences between whatever images may be used. This would allow the text and interface to be legible under any circumstance. IE has a proprietary alpha-channel control, but this effects the opacity of the entire content of the element, and I didn't want that! I just wanted to set the background to X% transparent.
(Setting a DIV to Alpha:50% using IE's control would also set the text and graphics inside the DIV to 50%.)
Also, (obviously) using proprietary IE controls is not cross-platform.
NOTE: Stacking two DIVs with absolute positioning--one with the text and another with the alpha background would have been OK for the specific GetRight To Go project, as the software uses an embedded IE control to show the customized content (thus cross-platform is unnecessary). But still, this seemed like a clunky way to achieve what I wanted.

Then I came up with a pretty cool solution:
Although CSS can't set background-only opacity, PNGs can! This type of effect can be achieved by using a background image instead of a background color for the DIV. A small PNG with the alpha setting that you want will do the trick.
NOTE: IE can take painfully long to 'tile' a 1x1 pixel image into a large area, so I would recommend using larger images just for this purpose. At 100x100 pixels (solid color at 50% alpha) the PNG file size is still less than 1k. 300x300 is less than 4k. for smaller areas like buttons, even 5x5 or 10x10 PNG will give you much-improved performance over 1x1.

Here it is in action:

Alpha: 50% white
Multiple overlays
are possible, too...

Normal background.

Alpha: 25% white

Alpha: 50% white

Alpha: 75% white

Alpha: 25% gray

Alpha: 50% gray

Alpha: 75% gray

Alpha: 25% black

Alpha: 50% black

Alpha: 75% black

Code sample:
<div class="alphasamples" style="BACKGROUND-IMAGE: url(http://www.getrighttogo.com/template-images/alpha-25-black.png); COLOR: white">Alpha: 25% black</div>

This doesn't need to be white/gray/black. Any color set to any transparency will work.

Web Design: Pete's Multi-purpose Apha-Gradient PNG

This one is a bit more technical for web designers. This came about when I was redesigning the GetRight website (http://www.getright.com/) and wanted to make nice looking page section titles that could have different looks but without creating a new graphic for each one.

So I created a simple white-to-transparent gradient PNG that I could use for all the title backgrounds on each page. These titles are simply CSSed h1 through h6 tags. 1-3 being green variants from largest to smallest and 4-6 being the gray variants.

You can see it in action all over the site, but this page has several different types in close proximity:
http://www.getright.com/new.html
Both the green section titles and the gray year titles are using the same graphic overlay on different background colors. Different titles also are of different heights and the various ways the image is clipped (by adjusting the image alignment--or not) can also effect each look.

During the design of the site, I wasn't sure if we would use one color-scheme for the entire site, or a different one for each section (blue for download pages, green for support pages, etc.). As it turns out, Michael (the owner & my brother) liked the green titles so much that we used them on the entire site--but if we ever change our minds in the future, we need just change a few lines in the CSS file to switch the color scheme for some (or all) of the site without the need to change or re-create any of the title graphics.

In writing this blog article, I realized that this concept could have been used for buttons and other navigation pieces of the site as well. I wish I'd thought of this earlier (and I may now go back and make this change), as it would have greatly reduced the download size for some of the more graphically-intensive pages.

Here is a quick sample I made in just a few minutes in Photoshop:



This image consists of two gray-to-transparent gradients creating the texture for the top and bottom of the button (starting at about 70-80% opaque at the top and bottom edges), and then a black border gradient starting at 50% with the Photoshop 'bevel' effect on it just to mix things up a bit.

NOTE: Since this sample is just a quick thing I threw together, I didn't bother with rounded corners. Rounded corners would need to blend into an opaque mask (white or whatever the page background is) so that the background color you set later doesn't bleed around the edges. You've been warned.

You may be thinking "Hmm, that image doesn't look very exiting." And you're right, it doesn't...yet! But look here:

These all use the same graphic!

The only difference is the background color of the div or span containing the image. This concept can be used for many design elements that can be quickly color-coded (highlighted, customized, activated, etc.) to meet your needs.

The image above is 1.93k and is used 16 times on this page. But you only needed to download it once! If each color were a different graphic it would be around 31k combined download, and 16 server hits instead of 1.

If you look at the GetRight home page (http://www.getright.com/) I could have saved a lot of server load by using a system like this for each of those big buttons on the page. A project for next week...or sometime...

Poker

I booked a $236 win (playing $4-$8 limit hold-em) yesterday playing at Diamond Lil's in Renton. This was my first substantial live-poker win in...a long time. (Been running bad in live-play recently, so haven't been playing very much.)

Apparently, I hit a 1-outer on the river to make A-A-A-Q-Q and beat both Q-Q-Q-x-x and an Ace-high flush. In my defence, I had pocket Aces, and am just not a good enough player to fold them on the turn for $8 even with Q-Q and 3 spades on board when playing against typical 4-8 idio...opponents. (Although the guy who claimed to have the Ace high flush--I didn't see his cards--seemed to be a pretty good player who got very unlucky yesterday.)

I was dealt K-K on two consecutive hands, and they held up both times.
I also made Q-Q-Q against 3-3-3 and won a lot of money there.
However my 4-4 on a board of 3-4-10 went down when 5-6 (who called from early position!?) made his straight with a 2 on the turn... Such is low limit poker. (And high limit poker, too.)

Underwater Photography

I have just returned home from a week on Maui, and took some really nice underwater pictures of green sea turtles.

These were taken while I was snorkeling at Black Sand Beach in Wailea. Ironically, my best pictures were all taken while snorkeling and not scuba diving... The ocean was very accommodating this day.

This is one of the turtle on the sand is one of my favorite underwater pictures of all time.

Thank you. I hope you enjoyed my photographs.

For the more technically minded folks out there, these were taken with a Nikonos-V camera using good old-fashioned 35mm film. It would be nice to have digital underwater, but I'm not quite there yet...