{"id":430,"date":"2012-09-11T18:00:29","date_gmt":"2012-09-11T18:00:29","guid":{"rendered":"http:\/\/a.parsons.edu\/~dejongo\/12-fall\/?p=430"},"modified":"2024-12-02T18:21:55","modified_gmt":"2024-12-02T18:21:55","slug":"09-the-basics","status":"publish","type":"post","link":"https:\/\/b.parsons.edu\/~dejongo\/09-the-basics\/","title":{"rendered":"09 The Basics"},"content":{"rendered":"

We start with the CSS3 additions that were rolled out first: HSL color<\/a> transparency<\/a> rounded borders<\/a> and box shadow<\/a>. You can be introduced to the properties here pursue them in the exacting details of the W3.org specification itself or use a CSS3 generator<\/a> to create the code for you.<\/p>\n

Hue Saturation and Luminance Color<\/h2>\n<\/p>\n

The first specification to be widely implemented CSS3 color includes opacity and the hue saturation and luminance (HSL) color space.
\n\n<\/p>\n

HSL<\/a> takes three values: Hue<\/strong> is a degree on the color wheel from 0 to 360 where 0 is red 180 is green and 240 is blue and 360 is red again. So is 720 or any other multiple of 360 \u2014 the colors repeat.\n<\/p>\n

Saturation<\/strong> is a percentage value: 100% is full saturation and 0% is no saturation. Saturation works in conjunction with luminance. <\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Hexadecimal<\/th>\nPercent<\/th>\n<\/tr>\n
#000<\/td>\n0%<\/td>\n<\/tr>\n
#111<\/td>\n7%<\/td>\n<\/tr>\n
#222<\/td>\n13%<\/td>\n<\/tr>\n
#333<\/td>\n20%<\/td>\n<\/tr>\n
#444<\/td>\n27%<\/td>\n<\/tr>\n
#555<\/td>\n33%<\/td>\n<\/tr>\n
#666<\/td>\n40%<\/td>\n<\/tr>\n
#777<\/td>\n47%<\/td>\n<\/tr>\n
#808080<\/td>\n50%<\/td>\n<\/tr>\n
#888<\/td>\n53%<\/td>\n<\/tr>\n
#999<\/td>\n60%<\/td>\n<\/tr>\n
#aaa<\/td>\n67%<\/td>\n<\/tr>\n
#bbb<\/td>\n73%<\/td>\n<\/tr>\n
#ccc<\/td>\n80%<\/td>\n<\/tr>\n
#ddd<\/td>\n87%<\/td>\n<\/tr>\n
#eee<\/td>\n93%<\/td>\n<\/tr>\n
#fff<\/td>\n100%<\/td>\n<\/tr>\n<\/table>\n

Luminance<\/strong> is also a percentage; 0% is dark (black) 100% is light (white) and 50% allows for full chroma before it is made lighter or darker. The table on the right gives percentages of grey translated from hexadecimal or base 16 with middle grey being #808080<\/code>.\n<\/p>\n

Connecting up the color with the degree is the least intuitive part of this more intuitive way to think about color but it is preferred over the RGB method of specifying a color. With hsl<\/em> it is easy to increase the saturation or luminance for a particular hue something that is not at all intuitive using RGB. <\/p>\n

Opacity<\/h2>\n<\/p>\n

CSS3 also added the alpha property transparency<\/a> or opacity or alpha which can be combined with color to change RGB to RGBA and HSL to hsl. The value range is from 0 to 1 with 0 being transparent and 1 being opaque. That makes .5 half way transparent. color: hsl(0 50% 50% \/.5);<\/code> You can make any element transparent by using the opacity<\/code> property.\n<\/p>\n

To help you see the relation between the HLS and opacity change the numbers in this demo. I’m sure you have a favorite color or color combination. Try changing some of these colors to your favorite colors:<\/p>\n

\n

CSS Code View<\/h3>\n
\r\n