Semi-transparent colors ...

JeffTucker

Posts: 8,219
Registered: 31-Jan-2006

Semi-transparent colors
Posted: 24 Sep 12, 04:09

It is possible to use semi-transparent colors, also known as alpha channel colors, in page layouts. These work in all modern browsers: Chrome, Edge, Firefox, and Safari, along with their mobile cousins.

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 alpha channel hex field has eight characters, rather than six. The format in jAlbum is #AARRGGBB, where the first two characters indicate the degree of transparency, with 00 being completely transparent (invisible) and ff being completely opaque. A value of 3f would be 75% transparent, a value of 7f would be 50% transparent, and a value of bf would be 25% transparent. So, a hex value of #7fff0000 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 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.

Edited by: jGromit on 05-Feb-2020 17:54 - update long overdue

JeffTucker

Posts: 8,219
Registered: 31-Jan-2006

Re: Semi-transparent colors
Posted: 24 Sep 12, 18:46

in response to: JeffTucker

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.toRGBAString(boxColor) %>;

One caution: 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.

All current browsers now support alpha channel colors in their hex form, so in theory, converting the hex string to an rgba string is no longer needed. In short, you should be able to use this in your CSS:

background-color: ${boxColor};

But there's a catch. All browsers have adopted alpha channel colors in the form #RRGGBBAA, with the transparency indicated by the last two positions, rather than the first two.

So, as long as jAlbum continues to use the #AARRGGBB format, the hex codes for semi-transparent colors have to be converted to rgba values.

JeffTucker

Posts: 8,219
Registered: 31-Jan-2006

Re: Semi-transparent colors
Posted: 10 Feb 20, 16:59

in response to: JeffTucker

Here's a lookup table you can use for transparency on #RRGGBBAA CSS colors, where 100% transparency is completely transparent and 0% transparency is completely solid:

Trans	Hex
100%	00
95%	0c
90%	19
85%	26
80%	33
75%	3f
70%	4c
65%	59
60%	66
55%	72
50%	7f
45%	8c
40%	99
35%	a5
30%	b2
25%	bf
20%	cc
15%	d8
10%	e5
5%	f2
0%	ff

So, a 35% transparent red would be #ff0000a5.

Note that in the current jAlbum model, the same color code for pasting into a settings field, like in the Tiger settings, would be #a5ff0000.

For opacity, just reverse the table - 60% transparent is 40% opaque. So, for a black shadow that's 40% opaque, the standard color code would be rgba(0, 0, 0, 0.4). That can be replaced with #00000066.

JeffTucker

Posts: 8,219
Registered: 31-Jan-2006

Re: Semi-transparent colors
Posted: 25 Aug 21, 14:20

in response to: JeffTucker

There is now a new standard for representing semi-transparent colors in CSS. The older standard used rgb() for solid colors, and rgba() for semi-transparent colors. So, for example, the CSS for a solid red background color was:

background-color: rgb(255, 0, 0);

And for a semi-transparent red:

background-color: rgba(255, 0, 0, 0.5);

Under the new standard, a single attribute serves both situations, and the syntax has changed:

background-color: rgb(255 0 0);
 
or:
 
background-color: rgb(255 0 0 / 0.5)

The new standard is honored in all current browsers. The older standard is now considered "legacy," but will continue to work correctly in browsers for the foreseeable future.