Your SlideShare is downloading. ×
0
CSS3 color
Work with color http://www.w3.org/TR/css3-color
Determining color in CSS color: #000 background-color:#333 border-color:#999
Color Keywords
Color Keywords
Color Keywords
Color Keywords
Determining color in CSS3 <ul><li>Hexadecimal expressions and keywords
CSS 2.1 allows to determine color as RGB values
CSS3 adds keywords SVG 1.0 to the specification
More information on available keywords:
http://www.w3.org/TR/css3-color/#svg-color   </li></ul>
New color models in CSS3 <ul><li>RGB (in CSS2)
red, green, blue
RGBA (in CSS3)
red, green, blue, alpha transparency
HSL
hue, saturation, lightness
HSLA
hue, saturation, lightness, alpha
CMYK  (in Generated Paged Media Module)
cyan, magenta, yellow, black </li></ul>
RGB is a mixed color model. Red, green and blue are mixed together  in order to form other colors. As a mixed model,  100%...
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 sepa...
RGBA Model A new color model introduced in CSS3. It allows to add alfa value which specifies a level of opacity. It is sup...
Upcoming SlideShare
Loading in...5
×

Css3 color

505

Published on

Different models of definiting color in cascading style sheets.

1 Comment
0 Likes
Statistics
Notes
  • nice preso!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
505
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Css3 color"

  1. 1. CSS3 color
  2. 2. Work with color http://www.w3.org/TR/css3-color
  3. 3. Determining color in CSS color: #000 background-color:#333 border-color:#999
  4. 4. Color Keywords
  5. 5. Color Keywords
  6. 6. Color Keywords
  7. 7. Color Keywords
  8. 8. Determining color in CSS3 <ul><li>Hexadecimal expressions and keywords
  9. 9. CSS 2.1 allows to determine color as RGB values
  10. 10. CSS3 adds keywords SVG 1.0 to the specification
  11. 11. More information on available keywords:
  12. 12. http://www.w3.org/TR/css3-color/#svg-color </li></ul>
  13. 13. New color models in CSS3 <ul><li>RGB (in CSS2)
  14. 14. red, green, blue
  15. 15. RGBA (in CSS3)
  16. 16. red, green, blue, alpha transparency
  17. 17. HSL
  18. 18. hue, saturation, lightness
  19. 19. HSLA
  20. 20. hue, saturation, lightness, alpha
  21. 21. CMYK (in Generated Paged Media Module)
  22. 22. cyan, magenta, yellow, black </li></ul>
  23. 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. 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. 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. 26. RGBA Model Value 1 ( 100% ) means that the color is opaque . Value 0 means that the color is fully transparent .
  27. 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. 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. 29. Important ! Remember to specify solid backups for RGBA colors in a separate rule which appears BEFORE the RGBA rule.
  30. 30. Hue Saturation Lightness <ul>HUE </ul>
  31. 31. Hue Saturation Lightness <ul>LIGHTNESS </ul>
  32. 32. Hue Saturation Lightness <ul>SATURATION </ul>
  33. 33. Hue Saturation Lightness
  34. 34. SYNTAX HSL <ul>hsl(0,10%,95%) </ul>
  35. 35. Adding alpha value
  36. 36. Current support color syntax rgbs ( ) 4 3 x* 10 4 hsl ( ) 4 3 x* 10 4 hsla ( ) 4 3 x* 10 4 *support added for IE 9
  37. 37. Current support
  38. 38. Thank you for your attention. Visit my website: www.slawomirzdunek.com Follow me on Twitter: http://twitter.com/#!/slawomirzdunek Find me on Facebook.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×