CSS3 cores e transparencia

1,564 views

Published on

Veja como trabalhar com cores usando CSS3 RGB, RGBA, HSL, Transparencia e opacidade. Copyright Russ Weakley - Max Design.

Published in: Design, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,564
On SlideShare
0
From Embeds
0
Number of Embeds
368
Actions
Shares
0
Downloads
44
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS3 cores e transparencia

  1. 1. CSS3COLORS
  2. 2. Before we talk about CSS3colors, we need to review CSS2.1 colors.
  3. 3. CSS2.1Colors
  4. 4. CSS2.1 allowed colors to bedefined using six different types of values.
  5. 5. 1 Keywords2 Six-digit hexadecimal notation3 Three-digit hexadecimal notation4 RGB numeric notation5 RGB percentage notation6 System colors
  6. 6. 1. Keywords
  7. 7. CSS2.1 allowed 17 keywords:aqua, black, blue, fuchsia, gray,green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
  8. 8. Example keywords:p { color: aqua; }p { color: black; }p { color: blue; }p { color: fuchsia; }p { color: gray; }p { color: green; }p { color: lime; }
  9. 9. 2. Six-digithexadecimal notation
  10. 10. Six-digit hexadecimal notation (#rrggbb): p { color: #AE03FF; }
  11. 11. 3. Three-digithexadecimal notation
  12. 12. Three-digit hexadecimal notation allows authors to replace double ‘rr’, ‘gg’ or ‘bb’values with single values (#rgb): p { color: #663399; } p { color: #639; } p { color: #aaff55; } p { color: #af5; }
  13. 13. The six-digit RGB notation (#rrggbb) can only by convertedinto three-digit form (#rgb) if each the rr, gg, and bb values each use duplicate digits. Many six-digit values cannot be converted. Cannot convert p { color: #953d3d; } p { color: #34d209; } Cannot convert
  14. 14. 4. RGB numeric notation
  15. 15. RGB numeric notationuses rgb( followed by a comma- separated list of three integer values, followed by ‘)’. p { color: rgb(109, 22, 255); }
  16. 16. RGB numeric notation allowsvalues between 0 (black) and 255 (white). No unit identifier is required.
  17. 17. 5. RGB percentage notation
  18. 18. RGB percentage notation uses rgb( followed by a comma-separated list of three percentage values, followed by ). p { color: rgb(0%,10%,100%); }
  19. 19. RGB percentage notation allows values between 0% (black) and 100% (white). Allvalues must include % symbol.
  20. 20. 6. System colors
  21. 21. CSS2.1 allowed System colorsto be used to specify colors thatmatched the operating systems graphic style. p { color: ButtonFace; }
  22. 22. Note: System Colors have been deprecated in favor of the CSS3 UI “appearance’ property for specifying the complete look of userinterface related elements.
  23. 23. CSS3 Colors
  24. 24. With CSS3, we can now apply colours using eight new methods:
  25. 25. 1 Extended color keywords2 Opacity3 RGBA numeric notation4 RGBA percentage notation5 HSL notation6 HSLA notation7 The ‘currentColor’ keyword8 The ‘transparent’ keyword
  26. 26. 1. Extended Color Keywords
  27. 27. While CSS2.1 allowed us to use17 basic color keywords, CSS3 allows us to use and additional130 extended color keywords.This is a total of 147 keywords.
  28. 28. Example color keywords:p { color: peru; }p { color: salmon; }p { color: thisle; }p { color: firebrick; }p { color: ghostwhite; }p { color: goldenrod; }p { color: honeydew; }
  29. 29. Quick tip:Do you have trouble spelling the keyword gray/grey?Well, CSS3 color keywords have got you covered. They include gray, grey, darkgrey and darkgray.
  30. 30. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8, 9 Yes
  31. 31. 2. Opacity
  32. 32. Opacity allows us to dictate the opacity/transparency of elements.
  33. 33. Opacity values range from 0 (or 0.0), which is fully transparent to 1 (or 1.0) which is 100% opaque.p { opacity: 0.3; }
  34. 34. The opacity value must be anumber, which is zero or more digits followed by a dot (.)followed by one or more digits. For example: 0.5 .5
  35. 35. Be aware that this property willset the opacity for the elementand all of it’s child elements.
  36. 36. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  37. 37. 3. RGBA numeric notation
  38. 38. With CSS3 we can add an alpha channel to RGB values. This allows us to set our colors to specific levels of opacity.
  39. 39. While the ‘opacity’ propertysets the opacity/transparency ofentire elements, RGBA is used to set the opacity of color values only.
  40. 40. RGBA numeric notation uses rgba( followed by a comma-separated list of three integer values, followed by an alpha value followed by a ‘)’.p { color: rgba(100, 66, 255, 1); }
  41. 41. The three integer values must be between 0 (black) and 255 (white). No unit identifier is required. For example: 255 0
  42. 42. This alpha value must be anumber, which is zero or more digits followed by a dot (.)followed by one or more digits. For example: 0.5 .5
  43. 43. An alpha value of 1 meansthe color will be fully opaque (displayed as a solid color).An alpha value of 0.5 will be half opaque.
  44. 44. You should always include a backup for browsers that do not support this property.p{ color: rgb(100, 66, 255); color: rgba(100, 66, 255, 0.5);}
  45. 45. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  46. 46. 4. RGBA percentage notation
  47. 47. RGBA percentage notation uses rgba( followed by a comma-separated list of three percentage values, followed by an alpha value followed by a ‘)’.p { color: rgba(10%, 6%, 20%, 1); }
  48. 48. The three percentage valuesmust be between 0% (black) and 100% (white). All values mustinclude % symbol. For example: 100% 0%
  49. 49. This alpha value must be anumber, which is zero or more digits followed by a dot (.)followed by one or more digits. For example: 0.5 .5
  50. 50. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  51. 51. 5. HSL notation
  52. 52. HSL notation allows us to define colors using hue, saturation and lightness.
  53. 53. HSL notation is written like this:p { color: hsl(280,100%,50%); }
  54. 54. The first value is for Hue and must be a integer value between 0 and 359.p { color: hsl(280,100%,50%); }
  55. 55. The second value is for Saturation and must be defined as a percentage value.p { color: hsl(280,100%,50%); }
  56. 56. The third value is Lightness and must also be defined as a percentage value.p { color: hsl(280,100%,50%); }
  57. 57. These three HSL values must be separated by commas. Whitespace after the commas is optional.p { color: hsl(280,100%,50%); }
  58. 58. You should always include a backup color that is not HSL for older browsers.p{ color: rgb(85,0,128); color: hsl(280,100%,50%);}
  59. 59. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  60. 60. 6. HSLA notation
  61. 61. Like RGBA, we can add an alpha channel to HSL values. This allows us to set our colors to specific levels of opacity.
  62. 62. First of all, we need to change the HSL to HSLA:p { color: hsla(280,100%,50%); }
  63. 63. Then, we need to add a new value at the end of the three comma-separated values.p { color: hsla(280,100%,50%,0.5); }
  64. 64. The opacity value must be anumber, which is zero or more digits followed by a dot (.)followed by one or more digits. For example: 0.5 .5
  65. 65. You should always include a backup color that is not HSL or HSLA for older browsers.p{ color: rgb(85,0,128); color: hsla(280,100%,50%,0.5);}
  66. 66. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  67. 67. Why use HSL or HSLA?
  68. 68. From the browsers point of view,there is no difference between values defined in RGBA or HSLA.
  69. 69. Some designers find it easierto choose and adjust colors using HSLA.
  70. 70. 7. The ‘currentColor’ keyword
  71. 71. CSS1 and CSS2 definedthe initial value of the ‘border- color’ property to be “thevalue of the ‘color’ property” . However, there is no corresponding keyword.
  72. 72. We had no way of specifying a border-color to match the color.p{ color: red; border-width: 1px; border-style: solid; border-color: “the value of the ‘color’ property”;}
  73. 73. CSS3 allows us to the currentColor keyword for this:p{ color: red; border-width: 1px; border-style: solid; border-color: currentColor;}
  74. 74. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 8, 9, 10 YesOpera 11 YesIE 6, 7, 8 NoIE 9 Yes
  75. 75. 8. The ‘transparent’ keyword
  76. 76. CSS1 introduced the ‘transparent’ value for the background-color property.
  77. 77. CSS2 allowed the ‘transparent’value to be applied to the ‘border- color’ property.
  78. 78. CSS3 allows the ‘transparent’ keyword to be applied to any properties that accepts a ‘color’ value.p { color: transparent; }
  79. 79. Browser SupportedFirefox 3.6, 4 YesSafari 4, 5 YesChrome 9, 10 YesOpera 10, 11 YesIE 6, 7, 8 NoIE 9 Yes
  80. 80. Russ WeakleyMax DesignSite: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley

×