CSS3 Tutorial (Ten): CSS3 HSL declaration Set color _css3_css_ Web Authoring

Web Page Authoring WEBJX article introduction: Using the CSS3 HSL declaration is also used to set the color. What's next? HSLA? Yes, this is the same as the Rgba effect. Using the CSS3 HSL declaration is also used to set the color. What's next? HSLA? Yes, this is the same as the Rgba effect. Previous article

Using the CSS3 HSL declaration is also used to set the color. What's next? HSLA? Yes, this is the same as the Rgba effect.
Using the CSS3 HSL declaration is also used to set the color. What's next? HSLA? Yes, this is the same as the Rgba effect.
Previous post: CSS3 Tutorial (9): Setting RGB Colors
The HSL declaration uses Hue Hue (H), saturation saturation (s), and Luma lightness (L) to set the color.
Hue is derived from the color dial: 0 and 360 are red, close to 120 is green, 240 is blue.
Saturation value is a percentage: 0% is grayscale, 100% saturation is highest
The lightness value is also a percentage: 0% is the darkest, 50% mean, and 100% brightest.
Caprice: Why is "ligntness"? Maybe I'm more used to the "brightness" in Photoshop ...
Browser compatibility:
HSL and Hsla are now supported by Firefox, Google Chrome, and Safari browsers, and do not require any prefix CSS3 HSL

The above demo is implemented by the following styles
div.hsll1 {BACKGROUND:HSL (100%, 50%); height:20px;} div.hsll2 {BACKGROUND:HSL (+/-50%, 50%); height:20px;} div.h slL3 {BACKGROUND:HSL (100%, 75%); height:20px;} div.hsll4 {BACKGROUND:HSL (202, 100%, 50%); height:20px;} div.hslL5 {BACKGROUND:HSL (202, 50%, 50%); height:20px;} div.hsll6 {BACKGROUND:HSL (202, 100%, 75%); height:20px;}
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...) CSS3 HSLA

The above effect is implemented by the following styles:
Div.hslal1 {Background:hsla (165, 35%, 50%, 0.2); height:20px;} div.hslal2 {Background:hsla (165, 35%, 50%, 0.4); Height: 20px; } div.hslal3 {Background:hsla (165, 35%, 50%, 0.6); height:20px;} div.hslal4 {Background:hsla (165, 35%, 50%, 0.8); Heigh t:20px; } DIV.HSLAL5 {Background:hsla (165, 35%, 50%, 1.0); height:20px;}
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...)

The above is CSS3 Tutorial (Ten): CSS3 HSL Statement set Color _css3_css_ Web page production content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

