The document discusses color models in CSS3 including RGB, RGBA, HSL, and HSLA. It explains how to specify colors in hexadecimal, keyword, and function notation for each model. It also covers determining color values, color property syntax, adding transparency with alpha channels, and providing fallback colors for browsers without support for newer models.
23. RGB is a mixed color model. Red, green and blue are mixed together in order to form other colors. As a mixed model, 100% of all the three colors will give white color.
24. Syntax RGB rgb(0,0,0) rgb(255,255,255) rgb(69%,9%,12%) In CSS RGB values can be written as the three different values separated by a comma ranging from 0 to 255, or as a percentage ranging from 0 to 100%, in the following order: red, green and blue.
25. RGBA Model A new color model introduced in CSS3. It allows to add alfa value which specifies a level of opacity. It is supported in Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+, IE9 Beta. .nav { color: rgba(0, 0, 0, 60% ); /* black at 60% opacity */ } .nav { color: rgba(0, 0, 0, 0.6 ); /* black at 60% opacity */ }
26. RGBA Model Value 1 ( 100% ) means that the color is opaque . Value 0 means that the color is fully transparent .
27. Styling the link color with RGBA RGBA model can help us style the link color. It allows to make the text soak up some of the background color behind it. The white color at 70% opacity allows the background to shine through. .nav li a { color: rgba(255, 255, 255, 0.7); }
28. RGBA backup Due to the fact that RGBA is not supported by all browsers it is a good practice to provide sort of backup for the browers which don't support this color model. In the code we should put a solid color first. The browers which support RBGA will override the solid color whereas the browsers which don't support RGBA will ignore RGBA rule. .nav li a { color: #ccc; color: rgba(255, 255, 255, 0.7); }
29. Important ! Remember to specify solid backups for RGBA colors in a separate rule which appears BEFORE the RGBA rule.
38. Thank you for your attention. Visit my website: www.slawomirzdunek.com Follow me on Twitter: http://twitter.com/#!/slawomirzdunek Find me on Facebook.