I just made the discovery — while I was editing the layout for this blog as a matter of fact — that RGB values can be used in CSS instead of hexadecimal, and nearly shat myself. To clarify, hex values are noted using the format #xxxxxx, where x is a number 0-9 or a letter A-F, and each couplet of digits represent red, green, or blue. This is limiting in terms of versatility, and somewhat involves guesswork if you don't have access to a hex chart, and don't happen to be a mathematics savant. As far as RGB values are involved, however, you have the ability to adjust the value of each red, green, and blue from 0 to 255 in this format: rgb(x, x, x). For example (0, 0, 0) would show black, and (255, 255, 255) would show white, (255, 0, 0) red, (0, 255, 0) green, (0, 0, 255) blue, and so on.
 |
| Some RGB value swatches — lifted from google images |
What got me excited about this discovery, however, wasn't so much the added versatility of being able to use up to 255 values for red green or blue, but it was the ability to manipulate the alpha effect. In other words, using the rgba(x, x, x, y) property, you can can adjust both the color and the opacity of whatever object you are modifying. In this format, the colors work the same as previously explained, whereas the "y" value here refers to a decimal between 0 and 1. For example the property rgba(125, 97, 186, .5) would yield a purple element at half opacity.
This is extremely useful in that it makes it very easy to create streamlined effects with a mere line of code. This has probably been around for a while and I totally must have skipped over it, but I am glad I made this discovery now.
I know, it's such a small thing to be excited about.
No comments:
Post a Comment