Colors In CSS3

Colors in CSS3 A presentation by Lea Verou

Color formats in CSS2 • Hex format – #RRGGBB • Shorthand hex format - #RGB • rgb() format – rgb(red, green, blue) • Named colors – white, black, beige etc

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)

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.

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 

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.

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

Isn’t opacity enough? Example

Browser support for RGBA/HSLA/HSL • Mozilla Firefox 3+ • Opera 10+ (still in Alpha) • Apple Safari 3+ • Google Chrome

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.

RGBA backgrounds: workarounds • IE gradient filter • 1x1 png images: – As external files – Embedded in the CSS via Data URIs

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);

Problems with the filter workaround • Filters make the text aliased:

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!!

Problems with the filter workaround Doesn't play along well with other workarounds, since it doesn't modify the background of the element.

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.

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=);

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.

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!

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);

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.

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

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; }

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.

Thank you! You can find me at: • http://leaverou.me • http://twitter.com/LeaVerou • leaverou@fresset.gr

http://blog.templatemonster.com	6938
http://www.cssnolanche.com.br	5447
http://pelfusion.com	4465
http://leaverou.me	3304
http://lea.verou.me	1688
http://www.cssblog.es	369
http://neoandrej.blogspot.com	262
http://blog.websourcing.fr	172
http://www.axlinux.es	110
http://pw.blog.ictea.com	63
http://translate.googleusercontent.com	41
http://www.linkedin.com	37
http://mediacampathens.wordpress.com	37
http://www.missage.com	32
http://www.ehabaref.com	32
http://almacenplantillasweb.es	32
http://www.slideshare.net	31
http://www.claseactiva.com	31
http://webmasterinfnet.wordpress.com	29
http://blog.almacenplantillasweb.es	21
http://neoandrej.blogspot.ru	15
http://www.rudalov.com	14
http://www.netvibes.com	8
http://pinterest.com	7
http://pelfusion.net	6
http://www.a5project.com	6
http://wsionline.wsi.tafensw.edu.au	5
http://www.redditmedia.com	4
http://ordenador-de-francisco-cano-aparicio.local	4
http://blog.pjstaudt.com	4
http://talksathome.com	4
http://www.plugmasters.com.br	3
http://feeds2.feedburner.com	3
http://webcache.googleusercontent.com	3
http://www.neoandrej.blogspot.com	3
http://static.slidesharecdn.com	3
http://rudalov.com.br	2
http://siclaudioborges.freevar.com	2
http://131.253.14.66	1
http://glennfriesen.com	1
http://74.125.45.132	1
http://www.neoandrej.blogspot.ru	1
http://static.slideshare.net	1
https://pelfusion.com	1
http://209.85.229.132	1
http://neoandrej.blogspot.co.uk	1
http://online.wsi.tafensw.edu.au	1
http://paper.li	1
file://	1
http://blog.themeforest.net	1
http://wildfire.gigya.com	1

Colors In CSS3

by Lea Verou on Mar 15, 2009

Accessibility

Categories

Upload Details

Usage Rights

52 Embeds 23,251

Statistics

Colors In CSS3 Presentation Transcript