{"id":7,"date":"2014-01-03T07:31:05","date_gmt":"2014-01-03T07:31:05","guid":{"rendered":"http:\/\/www.webmastersun.com\/?p=7"},"modified":"2014-02-03T02:50:34","modified_gmt":"2014-02-03T02:50:34","slug":"using-color-module-in-css-3","status":"publish","type":"post","link":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/","title":{"rendered":"Using color module in Css 3"},"content":{"rendered":"

PART 1 \u2013 CSS Color Module Level 3<\/strong><\/p>\n

In the latest CSS3 recommendations relating to color, e.g. opacity, rgb values, there are a couple of noticeable and welcome changes coming your way. Previously if you looked to adding any alpha transparency to backgrounds or manipulate the hue,saturation,lightness of elements it required the use of image manipulation in tools like photoshop, pngs and sometimes nasty css or javascript hacks. The opacity filter comes to mind for IE!<\/p>\n

RGBA (whats the A)<\/strong><\/p>\n

I\u2019m sure you are familiar with defining color values in CSS using RGB (Red,Green,Blue) integer values ranging from 0-255. The A in RGBA is for transparency, which allows you to set the colors transparency level in the range 0 (fully transparent) to 1.0 (opaque).<\/p>\n

Example<\/strong><\/p>\n

 <\/div>\n
 <\/div>\n
 <\/div>\n
 <\/div>\n
 <\/div>\n

Usage in the real world<\/strong><\/p>\n

This can be used in many areas of web design ranging from soft transparent overlays on headings, paragraphs etc.. The fall-back for browsers that don\u2019t support it will be a full colour, which in most cases will be acceptable.<\/p>\n

NOTE \u2013 unlike Opacity this CSS3 feature only effects the transparency of the element it is applied to and not all of the children contained within the element. So your p tag in a div styled with RGBA wont take the transparency of its parent. Nice!<\/p>\n

HSL & HSLA<\/strong><\/p>\n

Hue, Saturation, Lightness ( and Alpha) has been introduced in CSS3, for these reasons defined in the working draft of thee CSS Color Module Level 3.<\/p>\n

It has been observed that RGB colors have the following limitations: – RGB is hardware-oriented: it reflects the use of CRTs. – RGB is non-intuitive. People can learn how to use RGB, but actually by internalizing how to translate hue, saturation and lightness, or something similar, to RGB.<\/p>\n

Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades. Saturation is a percentage value; 100% is the full colour and 0% would be all colour removed. Lightness is also a percentage; 0% is dark (black), 100% is light (white)<\/p>\n

Example<\/strong><\/p>\n

 <\/div>\n
 <\/div>\n
 <\/div>\n

The color on the left has been produced with the HSL declaration and the color on the right has been produced by the standard RGB declaration. Adding an extra alpha parameter to the HSL statement from a value from 0 \u2013 1.0 allows you to specify transparency for the color.<\/p>\n

Summary<\/strong><\/p>\n

These are only a couple of changes regarding the CSS Color Module Level 3 and full details can be found here http:\/\/www.w3.org\/TR\/css3-color\/<\/p>\n","protected":false},"excerpt":{"rendered":"

PART 1 \u2013 CSS Color Module Level 3 In the latest CSS3 recommendations relating to color, e.g. opacity, rgb values, there are a couple of noticeable and welcome changes coming your way. Previously if you looked to adding any alpha transparency to backgrounds or manipulate the hue,saturation,lightness of elements it required the use of image […]<\/p>\n","protected":false},"author":1,"featured_media":86,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,53],"tags":[],"yoast_head":"\nUsing color module in Css 3 - Webmaster Sun Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using color module in Css 3 - Webmaster Sun Blog\" \/>\n<meta property=\"og:description\" content=\"PART 1 \u2013 CSS Color Module Level 3 In the latest CSS3 recommendations relating to color, e.g. opacity, rgb values, there are a couple of noticeable and welcome changes coming your way. Previously if you looked to adding any alpha transparency to backgrounds or manipulate the hue,saturation,lightness of elements it required the use of image […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/\" \/>\n<meta property=\"og:site_name\" content=\"Webmaster Sun Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-03T07:31:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-02-03T02:50:34+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"268\" \/>\n\t<meta property=\"og:image:height\" content=\"188\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tommy\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/#website\",\"url\":\"https:\/\/www.webmastersun.com\/blog\/\",\"name\":\"Webmaster Sun Blog\",\"description\":\"Blogging Tips to help you make money online\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webmastersun.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg\",\"contentUrl\":\"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg\",\"width\":\"268\",\"height\":\"188\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#webpage\",\"url\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/\",\"name\":\"Using color module in Css 3 - Webmaster Sun Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.webmastersun.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#primaryimage\"},\"datePublished\":\"2014-01-03T07:31:05+00:00\",\"dateModified\":\"2014-02-03T02:50:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.webmastersun.com\/blog\/#\/schema\/person\/441faf493750eb1507f97d50ea9cd742\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webmastersun.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using color module in Css 3\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/#\/schema\/person\/441faf493750eb1507f97d50ea9cd742\",\"name\":\"Tommy\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.webmastersun.com\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b17c25a7f242f8dc0328ed5929c512fd?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b17c25a7f242f8dc0328ed5929c512fd?s=96&d=mm&r=g\",\"caption\":\"Tommy\"},\"url\":\"https:\/\/www.webmastersun.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using color module in Css 3 - Webmaster Sun Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/","og_locale":"en_US","og_type":"article","og_title":"Using color module in Css 3 - Webmaster Sun Blog","og_description":"PART 1 \u2013 CSS Color Module Level 3 In the latest CSS3 recommendations relating to color, e.g. opacity, rgb values, there are a couple of noticeable and welcome changes coming your way. Previously if you looked to adding any alpha transparency to backgrounds or manipulate the hue,saturation,lightness of elements it required the use of image […]","og_url":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/","og_site_name":"Webmaster Sun Blog","article_published_time":"2014-01-03T07:31:05+00:00","article_modified_time":"2014-02-03T02:50:34+00:00","og_image":[{"width":"268","height":"188","url":"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg","type":"image\/jpeg"}],"twitter_misc":{"Written by":"Tommy","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/www.webmastersun.com\/blog\/#website","url":"https:\/\/www.webmastersun.com\/blog\/","name":"Webmaster Sun Blog","description":"Blogging Tips to help you make money online","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webmastersun.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#primaryimage","inLanguage":"en-US","url":"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg","contentUrl":"https:\/\/www.webmastersun.com\/blog\/wp-content\/uploads\/2012\/07\/css3-color1.jpg","width":"268","height":"188"},{"@type":"WebPage","@id":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#webpage","url":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/","name":"Using color module in Css 3 - Webmaster Sun Blog","isPartOf":{"@id":"https:\/\/www.webmastersun.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#primaryimage"},"datePublished":"2014-01-03T07:31:05+00:00","dateModified":"2014-02-03T02:50:34+00:00","author":{"@id":"https:\/\/www.webmastersun.com\/blog\/#\/schema\/person\/441faf493750eb1507f97d50ea9cd742"},"breadcrumb":{"@id":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.webmastersun.com\/blog\/using-color-module-in-css-3\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webmastersun.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Using color module in Css 3"}]},{"@type":"Person","@id":"https:\/\/www.webmastersun.com\/blog\/#\/schema\/person\/441faf493750eb1507f97d50ea9cd742","name":"Tommy","image":{"@type":"ImageObject","@id":"https:\/\/www.webmastersun.com\/blog\/#personlogo","inLanguage":"en-US","url":"https:\/\/secure.gravatar.com\/avatar\/b17c25a7f242f8dc0328ed5929c512fd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b17c25a7f242f8dc0328ed5929c512fd?s=96&d=mm&r=g","caption":"Tommy"},"url":"https:\/\/www.webmastersun.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/posts\/7"}],"collection":[{"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/comments?post=7"}],"version-history":[{"count":0,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/posts\/7\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/media\/86"}],"wp:attachment":[{"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/media?parent=7"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/categories?post=7"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webmastersun.com\/blog\/wp-json\/wp\/v2\/tags?post=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}