css3 cores e transparencia
Post on 26-Jun-2015
1.233 Views
Preview:
DESCRIPTION
TRANSCRIPT
CSS3COLORS
Before we talk about CSS3colors, we need to review
CSS2.1 colors.
CSS2.1Colors
CSS2.1 allowed colors to bedefined using six different types
of values.
KeywordsSix-digit hexadecimal notationThree-digit hexadecimal notationRGB numeric notationRGB percentage notationSystem colors
123456
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-digithexadecimal
notation
Six-digit hexadecimal notation(#rrggbb):
p { color: #AE03FF; }
3. Three-digithexadecimal
notation
Three-digit hexadecimalnotation allows authors to
replace double ‘rr’, ‘gg’ or ‘bb’values with single values (#rgb):
p { color: #663399; }p { color: #639; }p { color: #aaff55; }p { color: #af5; }
The six-digit RGB notation(#rrggbb) can only by converted
into three-digit form (#rgb) if eachthe rr, gg, and bb values each
use duplicate digits. Many six-digit values cannot be converted.
p { color: #953d3d; }p { color: #34d209; } Cannot convert
Cannot convert
4. RGB numericnotation
RGB numeric notationuses 'rgb(' followed by a comma-
separated list of three integervalues, followed by ‘)’.
p { color: rgb(109, 22, 255); }
RGB numeric notation allowsvalues between 0 (black) and 255
(white). No unit identifier isrequired.
5. RGB percentagenotation
RGB percentage notation uses'rgb(' followed by a comma-
separated list of three percentagevalues, followed by ')'.
p { color: rgb(0%,10%,100%); }
RGB percentage notationallows values between 0%
(black) and 100% (white). Allvalues must include % symbol.
6. System colors
CSS2.1 allowed System colorsto be used to specify colors thatmatched the operating system's
graphic style.
p { color: ButtonFace; }
Note:System Colors have beendeprecated in favor of the
CSS3 UI “appearance’property for specifying the
complete look of userinterface related elements.
CSS3 Colors
With CSS3, we can now applycolours using eight new
methods:
Extended color keywords
Opacity
RGBA numeric notation
RGBA percentage notation
HSL notation
HSLA notation
The ‘currentColor’ keyword
The ‘transparent’ keyword
12345678
1. Extended ColorKeywords
While CSS2.1 allowed us to use17 basic color keywords, CSS3allows 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 includegray, grey, darkgrey and
darkgray.
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8, 9
SupportedYes
Yes
Yes
Yes
Yes
2. Opacity
Opacity allows us to dictate theopacity/transparency of
elements.
Opacity values range from 0 (or0.0), which is fully transparent to1 (or 1.0) which is 100% opaque.
p { opacity: 0.3; }
The opacity value must be anumber, which is zero or more
digits followed by a dot (.)followed by one or more digits.
For example:
0.5.5
Be aware that this property willset the opacity for the elementand all of it’s child elements.
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
3. RGBA numericnotation
With CSS3 we can add an alphachannel to RGB values. Thisallows us to set our colors to
specific levels of opacity.
While the ‘opacity’ propertysets the opacity/transparency ofentire elements, RGBA is used
to set the opacity of colorvalues only.
RGBA numeric notationuses 'rgba(' followed by a
comma-separated list of threeinteger values, followed by analpha value followed by a ‘)’.
p { color: rgba(100, 66, 255, 1); }
The three integer values must bebetween 0 (black) and 255(white). No unit identifier is
required. For example:
2550
This alpha value must be anumber, 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 meansthe color will be fully opaque(displayed as a solid color).An alpha value of 0.5 will be
half opaque.
You should always include abackup for browsers that do not
support this property.
p{
color: rgb(100, 66, 255); color: rgba(100, 66, 255, 0.5);
}
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
4. RGBA percentagenotation
RGBA percentage notation uses 'rgba(' followed by a
comma-separated list of threepercentage values, followed byan alpha value followed by a ‘)’.
p { color: rgba(10%, 6%, 20%, 1); }
The three percentage valuesmust be between 0% (black) and
100% (white). All values mustinclude % symbol. For example:
100%0%
This alpha value must be anumber, which is zero or more
digits followed by a dot (.)followed by one or more digits.
For example:
0.5.5
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
5. HSL notation
HSL notation allows us to definecolors using hue, saturation
and lightness.
HSL notation is written like this:
p { color: hsl(280,100%,50%); }
The first value is for Hue andmust be a integer value between
0 and 359.
p { color: hsl(280,100%,50%); }
The second value is forSaturation and must be defined
as a percentage value.
p { color: hsl(280,100%,50%); }
The third value is Lightnessand must also be defined as a
percentage value.
p { color: hsl(280,100%,50%); }
These three HSL values mustbe separated by commas.
Whitespace after the commasis optional.
p { color: hsl(280,100%,50%); }
You should always include abackup color that is not HSL for
older browsers.
p {
color: rgb(85,0,128);color: hsl(280,100%,50%);
}
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
6. HSLA notation
Like RGBA, we can add an alphachannel to HSL values. Thisallows us to set our colors to
specific levels of opacity.
First of all, we need to change theHSL to HSLA:
p { color: hsla(280,100%,50%); }
Then, we need to add a newvalue at the end of the threecomma-separated values.
p { color: hsla(280,100%,50%,0.5); }
The opacity value must be anumber, which is zero or more
digits followed by a dot (.)followed by one or more digits.
For example:
0.5.5
You should always include abackup color that is not HSL or
HSLA for older browsers.
p {
color: rgb(85,0,128);color: hsla(280,100%,50%,0.5);
}
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
Why use HSLor HSLA?
From the browsers point of view,there is no difference between
values defined in RGBAor HSLA.
Some designers find it easierto choose and adjust colors
using HSLA.
7. The ‘currentColor’keyword
CSS1 and CSS2 definedthe initial value of the ‘border-
color’ property to be “thevalue of the ‘color’ property” .
However, there is nocorresponding keyword.
We had no way of specifying aborder-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 thecurrentColor keyword for this:
p{
color: red; border-width: 1px; border-style: solid;border-color: currentColor;
}
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 8, 9, 10
Opera 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
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 acceptsa ‘color’ value.
p { color: transparent; }
BrowserFirefox 3.6, 4
Safari 4, 5
Chrome 9, 10
Opera 10, 11
IE 6, 7, 8
IE 9
SupportedYes
Yes
Yes
Yes
No
Yes
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley
top related