Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Colors In CSS3

37,966 views

Published on

The presentation for my yesterday's session at MediaCampAthens.

Published in: Technology, Art & Photos, Design

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

×