Colors In CSS3

37,557 views

Published on

The presentation for my yesterday's session at MediaCampAthens.

Published in: Technology, Art & Photos, Design
6 Comments
39 Likes
Statistics
Notes
No Downloads
Views
Total views
37,557
On SlideShare
0
From Embeds
0
Number of Embeds
24,730
Actions
Shares
0
Downloads
419
Comments
6
Likes
39
Embeds 0
No embeds

No notes for slide

Colors In CSS3

  1. 1. Colors in CSS3 A presentation by Lea Verou
  2. 2. Color formats in CSS2 • Hex format – #RRGGBB • Shorthand hex format - #RGB • rgb() format – rgb(red, green, blue) • Named colors – white, black, beige etc
  3. 3. New color formats in CSS3 • HSL – hsl(hue, saturation, lightness) • CMYK – cmyk(cyan, magenta, yellow, black) • HSLA – hsl(hue, saturation, lightness, alpha) • RGBA – rgba(red, green, blue, alpha)
  4. 4. HSL • HSL stands for Hue, Saturation, Lightness. • A format that is easier for humans to understand and manipulate. • HSL makes it much easier to create color palettes: You just use a color picker for the basic colors of the palette and not for the lighter/darker variants.
  5. 5. CMYK • CMYK stands for Cyan, Magenta, Yellow, blacK • Easier for most people to understand and manipulate. • Easier to produce good-looking colors • Allows us to define precisely how our colors will get printed • Graphic designers are already accustomed to it so it will be easier for them to switch to Web design • Smaller color gamut than RGB • Not supported yet by any browser 
  6. 6. RGBA and HSLA • RGBA and HSLA allow for a fourth parameter – Alpha. • Alpha defines the transparency of the color – where 1 is fully opaque and 0 is fully transparent. • This brings a revolution in web design that many designers are still unaware of.
  7. 7. Isn’t opacity enough? • No! Opacity is very useful but it’s not enough • Opacity allows us to make the whole container semi-transparent, including it's contents • RGBA/HSLA allow us to make only the border/background/text color/etc semi transparent which opens up great possibilities in web design
  8. 8. Isn’t opacity enough? Example
  9. 9. Browser support for RGBA/HSLA/HSL • Mozilla Firefox 3+ • Opera 10+ (still in Alpha) • Apple Safari 3+ • Google Chrome
  10. 10. RGBA backgrounds: workarounds • RGBA backgrounds are the easiest ones for compatibility workarounds. • They are based on the fact that if a browser doesn’t understand RGBA, it ignores the declaration that contains RGBA values completely. • They are used like this: /* Workarounds here */ background: rgba(255,0,80,0.5); • Important! The declaration that contains the RGBA value should always come after the workarounds.
  11. 11. RGBA backgrounds: workarounds • IE gradient filter • 1x1 png images: – As external files – Embedded in the CSS via Data URIs
  12. 12. Workaround for IE: Gradient filter • IE supports a proprietary “extended hex” format in the parameters of some of it’s filters. • In that format the Alpha parameter is converted to the range 00-FF and concatenated in front of a normal hex value, which results to #AARRGGBB • We can use the gradient filter to simulate RGBA backgrounds for IE, which looks like this: filter:progid:DXImageTransform.Microsoft.grad ient(startColorstr=#CC000000, endColorstr=#CC 000000); That's equivalent to: background:rgba(0,0,0,0.8);
  13. 13. Problems with the filter workaround • Filters make the text aliased:
  14. 14. Problems with the filter workaround Filters are lengthy and add lots of non-standard clutter in our CSS: -ms-filter:quot;progid:DXImageTransform.Microsoft.grad ient(startColorstr=#CC000000, endColorstr=#CC000000) quot;; /* For IE8 beta */ filter:progid:DXImageTransform.Microsoft.gradient(st artColorstr=#CC000000, endColorstr=#CC000000); zoom:1; /* To give the element “layout” */ O_o!!
  15. 15. Problems with the filter workaround Doesn't play along well with other workarounds, since it doesn't modify the background of the element.
  16. 16. More problems with the filter workaround • Filters are slow • Filters are only for IE. What about Firefox 2- , Opera 9.6-? • To use that method, RGBA values need to be converted to hex values. Too much of a hassle.
  17. 17. PNGs via Data URIs • Data URIs allow us to embed a file inside our CSS • They look like this: background: url(data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA fFcSJAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/w D/oL2nkwAAAA1JREFUCNdjYGBgOAMAANEAzdAP7 DMAAAAASUVORK5CYII=);
  18. 18. Disadvantages of Data URIs • IE7- doesn’t support Data URIs, so if we use them, the filter method and all it’s disadvantages should be used as well in order to support IE7-. • Not easily changeable, you will need a converter of some sort to change the color even a little bit. • Clutter in our CSS file. Lots of clutter! • The image itself cannot be cached.
  19. 19. Advantages of Data URIs • Less external http requests = faster website • The png image loads instantly, since it’s embedded in the CSS file. Not a single glimpse of containers without backgrounds!
  20. 20. External png images • You don’t need to create them yourself, let PHP do the hard work! • You can find a script of mine that does exactly that here: http://leaverou.me/2009/02/bulletproof- cross-browser-rgba-backgrounds/ • It’s used like this: background: url(rgba.php?r=255&g=0&b=80&a=50); or background: url(rgba.php?name=white&a=50);
  21. 21. RGBA/HSLA in other CSS properties • RGBA/HSLA is not only useful for backgrounds! Backgrounds are just the easiest to workaround and the most frequently needed to. • For solid borders, you can use 2 containers with an appropriate padding and background. • For text color, in most cases opacity (or the alpha filter for IE) is sufficient.
  22. 22. Detect RGBA via JavaScript • Try to assign an RGBA value to a CSS property that accepts color values (e.g. color, background-color, border-color etc) on any element . • If the browser is not RGBA capable, it will do nothing, and may also throw an error (IE) • Otherwise the value will be applied
  23. 23. RGBA detection: code function supportsRGBA() { var elem = document.getElementsByTagName('script')[0], prevColor = elem.style.color; try { elem.style.color = 'rgba(1,5,13,0.44)'; } catch(e) {} var result = elem.style.color != prevColor; elem.style.color = prevColor; return result; }
  24. 24. RGBA detection: improvements • Performance: Cache the result • Accuracy: What happens if the element already has that rgba color? • Completeness: We can detect HSL, HSLA and CMYK in the exact same way.
  25. 25. Thank you! You can find me at: • http://leaverou.me • http://twitter.com/LeaVerou • leaverou@fresset.gr

×