SlideShare a Scribd company logo
1 of 25
Download to read offline
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

More Related Content

What's hot

CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondDenise Jacobs
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDoris Chen
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? Russ Weakley
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) Sara Soueidan
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreRuss Weakley
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sasschriseppstein
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation joilrahat
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Guillaume Kossi
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Pascal Rettig
 
Css for Development
Css for DevelopmentCss for Development
Css for Developmenttsengsite
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
2 introduction css
2 introduction css2 introduction css
2 introduction cssJalpesh Vasa
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship CourseZoltan Iszlai
 

What's hot (20)

CSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to RespondCSS3: Ripe and Ready to Respond
CSS3: Ripe and Ready to Respond
 
Dive into HTML5: SVG and Canvas
Dive into HTML5: SVG and CanvasDive into HTML5: SVG and Canvas
Dive into HTML5: SVG and Canvas
 
CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong? CSS3 - is everything we used to do wrong?
CSS3 - is everything we used to do wrong?
 
CSS and CSS3
CSS and CSS3CSS and CSS3
CSS and CSS3
 
CSS
CSSCSS
CSS
 
SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers) SVG For Web Designers (and Developers)
SVG For Web Designers (and Developers)
 
CSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and moreCSS - OOCSS, SMACSS and more
CSS - OOCSS, SMACSS and more
 
Authoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & SassAuthoring Stylesheets with Compass & Sass
Authoring Stylesheets with Compass & Sass
 
Html & Css presentation
Html  & Css presentation Html  & Css presentation
Html & Css presentation
 
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
Sara Soueidan: Styling and Animating Scalable Vector Graphics with CSS [CSSCo...
 
Compass/Sass
Compass/SassCompass/Sass
Compass/Sass
 
CSS3
CSS3CSS3
CSS3
 
Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3Vector Graphics on the Web: SVG, Canvas, CSS3
Vector Graphics on the Web: SVG, Canvas, CSS3
 
Css for Development
Css for DevelopmentCss for Development
Css for Development
 
Sass
SassSass
Sass
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
2 introduction css
2 introduction css2 introduction css
2 introduction css
 
Html5 more than just html5 v final
Html5  more than just html5 v finalHtml5  more than just html5 v final
Html5 more than just html5 v final
 
CSS Walktrough Internship Course
CSS Walktrough Internship CourseCSS Walktrough Internship Course
CSS Walktrough Internship Course
 
Learn svg
Learn svgLearn svg
Learn svg
 

Viewers also liked

Social Networks Ev.Liotzis
Social Networks Ev.LiotzisSocial Networks Ev.Liotzis
Social Networks Ev.Liotzisguest5e75c
 
Turning to the client side
Turning to the client sideTurning to the client side
Turning to the client sideLea Verou
 
Google Application Engine
Google Application EngineGoogle Application Engine
Google Application Engineguestd77e8ae
 
Antonis Plessas Podcamp Music Use Licencing
Antonis Plessas Podcamp Music Use LicencingAntonis Plessas Podcamp Music Use Licencing
Antonis Plessas Podcamp Music Use LicencingAntonios Plessas
 
Drupal Introduction
Drupal IntroductionDrupal Introduction
Drupal IntroductionPanos Ladas
 
Rain Up Mc Presentation
Rain Up Mc PresentationRain Up Mc Presentation
Rain Up Mc Presentationguest1c3c761
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de InteraçãoUTFPR
 
Mastering CSS3 gradients
Mastering CSS3 gradientsMastering CSS3 gradients
Mastering CSS3 gradientsLea Verou
 
Drupal 6 Theming using the Zen Theme
Drupal 6 Theming using the Zen ThemeDrupal 6 Theming using the Zen Theme
Drupal 6 Theming using the Zen Themeinfowonders
 

Viewers also liked (14)

Social Networks Ev.Liotzis
Social Networks Ev.LiotzisSocial Networks Ev.Liotzis
Social Networks Ev.Liotzis
 
Turning to the client side
Turning to the client sideTurning to the client side
Turning to the client side
 
Google Application Engine
Google Application EngineGoogle Application Engine
Google Application Engine
 
Kapou Gr
Kapou GrKapou Gr
Kapou Gr
 
Azure
AzureAzure
Azure
 
Antonis Plessas Podcamp Music Use Licencing
Antonis Plessas Podcamp Music Use LicencingAntonis Plessas Podcamp Music Use Licencing
Antonis Plessas Podcamp Music Use Licencing
 
Drupal Introduction
Drupal IntroductionDrupal Introduction
Drupal Introduction
 
Programming Humans
Programming HumansProgramming Humans
Programming Humans
 
Rain Up Mc Presentation
Rain Up Mc PresentationRain Up Mc Presentation
Rain Up Mc Presentation
 
Metodologias de Design de Interação
Metodologias de Design de InteraçãoMetodologias de Design de Interação
Metodologias de Design de Interação
 
Mastering CSS3 gradients
Mastering CSS3 gradientsMastering CSS3 gradients
Mastering CSS3 gradients
 
Object Oriented CSS
Object Oriented CSSObject Oriented CSS
Object Oriented CSS
 
Drupal 6 Theming using the Zen Theme
Drupal 6 Theming using the Zen ThemeDrupal 6 Theming using the Zen Theme
Drupal 6 Theming using the Zen Theme
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
 

Similar to Colors In CSS3

Photo echance. Problems. Solutions. Ideas
Photo echance. Problems. Solutions. Ideas Photo echance. Problems. Solutions. Ideas
Photo echance. Problems. Solutions. Ideas Andrew Nikishaev
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design WorkshopSuseZ
 
app/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messapp/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messjasnow
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)Roman Dvornov
 
Y Pipes Mashup Camp
Y Pipes Mashup CampY Pipes Mashup Camp
Y Pipes Mashup CampJinho Jung
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.Eugene Nor
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersJason Hando
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsSanjoy Kr. Paul
 
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Johannes Eriksson
 

Similar to Colors In CSS3 (20)

Photo echance. Problems. Solutions. Ideas
Photo echance. Problems. Solutions. Ideas Photo echance. Problems. Solutions. Ideas
Photo echance. Problems. Solutions. Ideas
 
Css3 color
Css3 colorCss3 color
Css3 color
 
Css3 color
Css3 colorCss3 color
Css3 color
 
Web Design Workshop
Web Design WorkshopWeb Design Workshop
Web Design Workshop
 
Css gradients
Css gradientsCss gradients
Css gradients
 
Professional Css
Professional CssProfessional Css
Professional Css
 
app/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a messapp/assets/stylesheets - How to not make a mess
app/assets/stylesheets - How to not make a mess
 
Artdm171 Week6 Images
Artdm171 Week6 ImagesArtdm171 Week6 Images
Artdm171 Week6 Images
 
CSSO – compress CSS (english version)
CSSO – compress CSS (english version)CSSO – compress CSS (english version)
CSSO – compress CSS (english version)
 
Lesson 02
Lesson 02Lesson 02
Lesson 02
 
PNGHack 1.0 Presentation
PNGHack 1.0 PresentationPNGHack 1.0 Presentation
PNGHack 1.0 Presentation
 
Y Pipes Mashup Camp
Y Pipes Mashup CampY Pipes Mashup Camp
Y Pipes Mashup Camp
 
Write LESS. DO more.
Write LESS. DO more.Write LESS. DO more.
Write LESS. DO more.
 
HTML5 and CSS3 for Teachers
HTML5 and CSS3 for TeachersHTML5 and CSS3 for Teachers
HTML5 and CSS3 for Teachers
 
pastel
pastelpastel
pastel
 
pastel
pastelpastel
pastel
 
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and ConsCSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
 
Tools for Modern Web Design
Tools for Modern Web DesignTools for Modern Web Design
Tools for Modern Web Design
 
Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014Vaadin Introduction at OOP 2014
Vaadin Introduction at OOP 2014
 
Sass compass
Sass compassSass compass
Sass compass
 

Recently uploaded

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 

Recently uploaded (20)

OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 

Colors In CSS3

  • 1. Colors in CSS3 A presentation by Lea Verou
  • 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. 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. 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. 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. 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. 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
  • 9. Browser support for RGBA/HSLA/HSL • Mozilla Firefox 3+ • Opera 10+ (still in Alpha) • Apple Safari 3+ • Google Chrome
  • 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. RGBA backgrounds: workarounds • IE gradient filter • 1x1 png images: – As external files – Embedded in the CSS via Data URIs
  • 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. Problems with the filter workaround • Filters make the text aliased:
  • 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. Problems with the filter workaround Doesn't play along well with other workarounds, since it doesn't modify the background of the element.
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Thank you! You can find me at: • http://leaverou.me • http://twitter.com/LeaVerou • leaverou@fresset.gr