CSS3 Colors by learnguy

VIEWS: 18 PAGES: 89

More Info
									CSS3
COLORS
Before we talk about CSS3
colors, we need to review
     CSS2.1 colors.
CSS2.1
Colors
  CSS2.1 allowed colors to be
defined using six different types
           of values.
1   Keywords
2   Six-digit hexidecimal notation
3   Three-digit hexidecimal notation
4   RGB numeric notation
5   RGB percentage notation
6   System colors
1. Keywords
CSS2.1 allowed 17 keywords:
aqua, black, blue, fuchsia, gray,
green, lime, maroon, navy, olive,
 orange, purple, red, silver, teal,
        white, and yellow.
    Example keywords:



p   {   color:   aqua; }
p   {   color:   black; }
p   {   color:   blue; }
p   {   color:   fuchsia; }
p   {   color:   gray; }
p   {   color:   green; }
p   {   color:   lime; }
     2. Six-digit
hexidecimal notation
Six-digit hexidecimal notation
           (#rrggbb):



   p { color: #AE03FF; }
   3. Three-digit
hexidecimal notation
   Three-digit hexidecimal
   notation allows authors to
 replace double ‘rr’, ‘gg’ or ‘bb’
values with single values (#rgb):


   p { color: #639; }
 The three-digit RGB notation
(#rgb) is converted into six-digit
  form (#rrggbb) by doubling
 digits, not by adding zeros.


   p   {   color:   #d2e; }
   p   {   color:   #dd22ee; }   Digits doubled
   p   {   color:   #369; }
   p   {   color:   #336699; }   Digits doubled
    The six-digit RGB notation
 (#rrggbb) can only by converted
into three-digit form (#rgb) if each
  the rr, gg, and bb values each
 use duplicate digits. Many six-
digit values cannot be converted.

                             Cannot convert
    p { color: #953d3d; }
    p { color: #34d209; }    Cannot convert
4. RGB numeric
    notation
    RGB numeric notation
uses 'rgb(' followed by a comma-
 separated list of three integer
     values, followed by ‘)’.



   p {
   color: rgb(109, 22, 255); }
 RGB numeric notation allows
values between 0 (black) and 255
    (white). No unit identifier is
              required.
5. RGB percentage
     notation
RGB percentage notation uses
   'rgb(' followed by a comma-
separated list of three percentage
      values, followed by ')'.

    p {
    color: rgb(0%,10%,100%); }
  RGB percentage notation
  allows values between 0%
 (black) and 100% (white). All
values must include % symbol.
6. System colors
CSS2.1 allowed System colors
to be used to specify colors that
matched the operating system's
         graphic style.

   p { color: ButtonFace; }
           Note:
 System Colors have been
 deprecated in favor of the
   CSS3 UI “appearance’
 property for specifying the
   complete look of user
interface related elements.
CSS3 Colors
With CSS3, we can now apply
   colours using eight new
          methods:
1   Extended color keywords
2   Opacity
3   RGBA numeric notation
4   RGBA percentage notation
5   HSL notation
6   HSLA notation
7   The ‘currentColor’ keyword
8   The ‘transparent’ keyword
1. Extended Color
    Keywords
While CSS2.1 allowed us to use
17 basic color keywords, CSS3
 allows us to use and additional
130 extended color keywords.
This is a total of 147 keywords.
Example color keywords:



p   {   color:   peru; }
p   {   color:   salmon; }
p   {   color:   thisle; }
p   {   color:   firebrick; }
p   {   color:   ghostwhite; }
p   {   color:   goldenrod; }
p   {   color:   honeydew; }
           Quick tip:
Do you have trouble spelling the
       keyword gray/grey?
Well, CSS3 color keywords have
 got you covered. They include
    gray, grey, darkgrey and
            darkgray.
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8, 9    Yes
2. Opacity
Opacity allows us to dictate the
  opacity/transparency of
           elements.
 Opacity values range from 0 (or
 0.0), which is fully transparent to
 1 (or 1.0) which is 100% opaque.


p { opacity: 0.3; }
Be aware that this property will
set the opacity for the element
and all of it’s child elements.
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
3. RGBA numeric
    notation
With CSS3 we can add an alpha
 channel to RGB values. This
 allows us to set our colors to
    specific levels of opacity.
  While the ‘opacity’ property
sets the opacity/transparency of
entire elements, RGBA is used
  to set the opacity of color
          values only.
 First of all, we need to change the
            RGB to RGBA:



p { color: rgba(100, 66, 255); }
    Then, we need to add a new
    alpha value at the end of the
  three comma-separated values.


p { color: rgba(100, 66, 255, 0.5); }
  This alpha value must be a
number, which is zero or more
   digits followed by a dot (.)
followed by one or more digits.
           For example:

             0.5
             .5
 An alpha value of 1 means
the color will be fully opaque
 (displayed as a solid color).
An alpha value of 0.5 will be
         half opaque.
     You should always include a
    backup for browsers that do not
        support this property.


p
{
     color: rgb(100, 66, 255);
     color: rgba(100, 66, 255, 0.5);
}
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
4. RGBA percentage
     notation
RGBA percentage notation works
  the same the same as RGBA
    numeric notation. The only
difference is that the RGB values
    must be defined using %
              values.
    RGBA percentage notation
      uses 'rgba(' followed by a
   comma-separated list of three
   percentage values, followed by
    an alpha value followed by ')'.

p { color: rgba(10%, 66%, 5%, 0.5); }
     You should always include a
    backup for browsers that do not
        support this property.


p
{
     color: rgb(10%, 66%, 5%); }
     color: rgba(10%, 66%, 5%, 0.5);
}
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
5. HSL notation
HSL notation allows us to define
 colors using hue, saturation
        and lightness.
  HSL notation is written like this:




p { color: hsl(280,100%,50%); }
  The first value is for Hue and
 must be a number between 0 and
                359.


p { color: hsl(280,100%,50%); }
      The second value is for
  Saturation and must be defined
      as a percentage value.


p { color: hsl(280,100%,50%); }
 The third value is Lightness and
    must also be defined as a
         percentage value.


p { color: hsl(280,100%,50%); }
   These three HSL values must
    be separated by commas.
   Whitespace after the commas
            is optional.

p { color: hsl(280,100%,50%); }
     You should always include a
    backup color that is not HSL for
           older browsers.


p
{
     color: rgb(85,0,128);
     color: hsl(280,100%,50%);
}
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
6. HSLA notation
Like RGBA, we can add an alpha
   channel to HSL values. This
   allows us to set our colors to
     specific levels of opacity.
  While the ‘opacity’ property
sets the opacity/transparency
   of entire elements, HSLA
(like RGBA) is used to set the
opacity of color values only.
 First of all, we need to change the
             HSL to HSLA:



p { color: hsla(280,100%,50%); }
   Then, we need to add a new
   value at the end of the three
    comma-separated values.


p { color: hsla(280,100%,50%,0.5); }
From the browsers point of view,
 there is no difference between
   values defined in RGBA or
HSLA. It comes down to personal
  preference as to which values
         you prefer to use.
     You should always include a
    backup color that is not HSL or
      HSLA for older browsers.


p
{
     color: rgb(85,0,128);
     color: hsla(280,100%,50%,0.5);
}
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
7. The ‘currentColor’
      keyword
   CSS1 and CSS2 defined
the initial value of the ‘border-
   color’ property to be “the
value of the ‘color’ property” .
    However, there is no
  corresponding keyword.
    We had no way of specifying a
    border-color to match the color.

p
{
     color: red;
     border-width: 1px;
     border-style: solid;
     border-color: “the value of the
     ‘color’ property”;
}
        CSS3 allows us to the
    currentColor keyword for this:

p
{
     color: red;
     border-width: 1px;
     border-style: solid;
     border-color: currentColor;
}
Browser           Supported
Firefox 3.6, 4    Yes
Safari 4, 5       Yes
Chrome 8, 9, 10   Yes
Opera 11          Yes
IE 6, 7, 8        No
IE 9              Yes
8. The ‘transparent’
     keyword
CSS1 introduced the ‘transparent’
 value for the background-color
             property.
 CSS2 allowed the ‘transparent’
value to be applied to the ‘border-
          color’ property.
   CSS3 allows the ‘transparent’
   keyword to be applied to any
     properties that accepts
         a ‘color’ value.



p { color: transparent; }
Browser          Supported
Firefox 3.6, 4   Yes
Safari 4, 5      Yes
Chrome 9, 10     Yes
Opera 10, 11     Yes
IE 6, 7, 8       No
IE 9             Yes
Russ Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

								
To top