Semi-transparent colors ...

jGromit

Posts: 33,612
Registered: 31-Jan-2006

Semi-transparent colors
Posted: 24-Sep-2012 04:09

With the advent of Java 7 and jAlbum 10.10.2, it is now possible to use semi-transparent colors in page layouts. These work in all modern browsers - Firefox, Chrome, Safari, and IE9. In IE8, IE7, and IE6, traditional opaque colors must be specified. If only a semi-transparent color is specified, these older browsers will ignore the CSS, and display no color at all. Skin developers must make provision for this peculiarity if they wish to support IE8, IE7, and/or IE6.

These are not simply pale versions of the regular colors; they will, in fact, allow background colors or images to "shine through." Therefore, a semi-transparent red on a blue background will appear purple.

Skins must be modified to make use of semi-transparent colors. If a skin has not been so modified, and you specify a semi-transparent color in the user interface, the skin will ignore your choice, and use the corresponding opaque color, instead.

If a skin has been modified to allow the selection of semi-transparent colors, the user interface will look something like this:

The text field shows the hex value of the color. The traditional hex value for red, for example, is #ff0000. The new hex field has eight characters, rather than six. The first two indicate the degree of transparency, with 00 being completely transparent (invisible) and ff being completely opaque. A value of 40 would be roughly 75% transparent, a value of 80 would be 50% transparent, and a value of cc would be 25% transparent. So, a hex value of #80ff0000 would be a 50% transparent red.

The color swatch has been programmed to show a checkboard pattern if you have selected a semi-transparent color, and a solid color if you have selected an opaque color.

There are several other ways to specify a semi-transparent color. If you are running jAlbum on top of Java 7 (the Windows version of jAlbum is now bundled with Java 7), there is a new color selector. If you click on the color swatch and then choose the HSV or HSL tab, there is a "Transparency" slider with percentage values. Moving the slider to the right makes the color more transparent.

On the RGB and CMYK tabs, there is an "Alpha" slider with alpha channel values. This operates in the opposite sense; moving it to the left makes the color more transparent.

Oddly, the "Color Code" field on the RGB tab does not show the full eight-digit color code with the alpha channel value in it.

You can use any of these sliders to adjust the transparency of the color you've chosen. If you're not using Java 7, the only way to specify a semi-transparent color is to enter the eight-digit hex value.

jGromit

Posts: 33,612
Registered: 31-Jan-2006

Re: Semi-transparent colors
Posted: 24-Sep-2012 18:46

in response to: jGromit

For skin developers, incorporating transparent colors into a skin is not particularly difficult. Anticipating how it will alter the look and feel of a page is another matter, of course.

Setting up the user interface involves a simple alteration. Instead of:

JColorSelector boxColor = new JColorSelector("Box", new JSmartTextField(6));

Use:

JColorSelector boxColor = new JAlphaColorSelector("Box", new JSmartTextField(7));

Because the hex code is now a total of nine characters instead of seven, you need to make the text field a bit bigger. Placing it in the user interface layout remains exactly the same, as does doing things like copying colors from one field to another. In short, you can treat the boxColor variable exactly the same way you did before.

Calling the color in your CSS involves a bigger change. Instead of:

background-color: ${boxColor};

You need this:

background-color: <%= JAlphaColorSelector.toRGBString(boxColor) %>; /* for IE8 and earlier */
background-color: <%= JAlphaColorSelector.toRGBAString(boxColor) %>;

The first line is grabbed by all browsers, including IE8, IE7, and IE6, and produces an opaque color. The second line is understood by modern browsers, and overrides the first. You could, instead, put the first line in a stylesheet that's called only when the page is viewed by an older version of IE.

Some other random considerations....

The old jAlbum filters generally don't behave well when fed color codes for semi-transparent colors. The XBorderFilter, for example, creates new JPG files with the borders incorporated into them, but there's no such thing as transparency in a JPG, so the filter can't possibly deal with semi-transparent colors correctly. Experiment.
Semi-transparent text usually just ends up being hard to read, unless you're talking about something with a very large font size.
I'm not a Flash programmer, but I gather that Flash simply can't handle semi-transparent color specifications at all.

jGromit

Posts: 33,612
Registered: 31-Jan-2006

Re: Semi-transparent colors
Posted: 27-Mar-2013 23:27

in response to: jGromit

A quick example of what you can do with semi-transparent colors, on the thumbnail page of this demo album. The Matrix skin now supports semi-transparent colors for most index page objects. Using them in the Highslide JS expander is a minefield because of restrictions in the Javascript and because of wrapper layering, so the enlarged images are still the province of solid colors.