If you can't read please download the document
Upload
slawomir-zdunek
View
676
Download
2
Embed Size (px)
Citation preview
CSS3
color
Work with color
http://www.w3.org/TR/css3-color
Determining color in CSS
color: #000background-color:#333border-color:#999
content
Color Keywords
Color Keywords
Color Keywords
Color Keywords
Determining color in CSS3
Hexadecimal expressions and keywords
CSS 2.1 allows to determine color as RGB values
CSS3 adds keywords SVG 1.0 to the specification
More information on available keywords:http://www.w3.org/TR/css3-color/#svg-color
New color models in CSS3
RGB (in CSS2)red, green, blue
RGBA (in CSS3)red, green, blue, alpha transparency
HSLhue, saturation, lightness
HSLAhue, saturation, lightness, alpha
CMYK (in Generated Paged Media Module)cyan, magenta, yellow, black
RGB is a mixed color model. Red, green and blue are mixed
together
in order to form other colors. As a mixed model,
100% of all the three colors will give white color.
Syntax RGB
rgb(0,0,0)
rgb(255,255,255)
rgb(69%,9%,12%)
In CSS RGB values can be written as the three different values
separated by a comma ranging from 0 to 255, or as a percentage
ranging from 0 to 100%,
in the following order: red, green and blue.
RGBA Model
A new color model introduced in CSS3. It allows to add alfa
value
which specifies a level of opacity.
It is supported in Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+,
IE9 Beta.
.nav {
color: rgba(0, 0, 0, 60%); /* black at 60% opacity */
}
.nav {
color: rgba(0, 0, 0, 0.6); /* black at 60% opacity */
}
RGBA Model
Value 1 ( 100% ) means that the color is opaque.
Value 0 means that the color is fully transparent.
Styling the link color with RGBA
RGBA model can help us style the link color.
It allows to make the text soak up some of the background color
behind it.
The white color at 70% opacity allows the background to shine
through.
.nav li a {
color: rgba(255, 255, 255, 0.7);
}
RGBA backup
Due to the fact that RGBA is not supported by all browsers it is a
good practice to provide sort of backup for the browers which don't
support this color model. In the code we should put a solid color
first. The browers which support RBGA will override the solid color
whereas the browsers which don't support RGBA will ignore RGBA
rule.
.nav li a { color: #ccc;
color: rgba(255, 255, 255, 0.7);
}
Important !
Remember to specify solid backups for RGBA colors
in a separate rule which appears BEFORE the RGBA rule.
Hue Saturation Lightness
HUE
Hue Saturation Lightness
LIGHTNESS
Hue Saturation Lightness
SATURATION
Hue Saturation Lightness
SYNTAX HSL
hsl(0,10%,95%)
Adding alpha value
Current support
color syntaxrgbs ( )43x*104
hsl ( )43x*104
hsla ( )43x*104
*support added for IE 9
Current support
Thank you for your attention.
Visit my website: www.slawomirzdunek.comFollow me on Twitter: http://twitter.com/#!/slawomirzdunekFind me on Facebook.
KeywordHexDecimalKeywordHexDecimal
darkviolet#9400D3148,0,211hotpink#FF69B4255,105,180
deeppink#FF1493255,20,147indianred#CD5C5C205,92,92
deepskyblue#00BFFF0,191,255indigo#4B008275,0,130
dimgray#696969105,105,105ivory#FFFFF0255,255,240
dimgrey#696969105,105,105khaki#F0E68C240,230,140
dodgerblue#1E90FF30,144,255lavender#E6E6FA230,230,250
firebrick#B22222178,34,34lavenderblush#FFF0F5255,240,245
floralwhite#FFFAF0255,250,240lawngreen#7CFC00124,252,0
forestgreen#228B2234,139,34lemonchiffon#FFFACD255,250,205
fuchsia#FF00FF255,0,255lightblue#ADD8E6173,216,230
gainsboro#DCDCDC220,220,220lightcoral#F08080240,128,128
ghostwhite#F8F8FF248,248,255lightcyan#E0FFFF224,255,255
gold#FFD700255,215,0lightgoldenrodyellow#FAFAD2250,250,210
goldenrod#DAA520218,165,32lightgray#D3D3D3211,211,211
gray#808080128,128,128lightgreen#90EE90144,238,144
green#0080000,128,0lightgrey#D3D3D3211,211,211
greenyellow#ADFF2F173,255,47lightpink#FFB6C1255,182,193
gray#808080128,128,128lightsalmon#FFA07A255,160,122
honeydew#F0FFF0240,255,240lightseagreen#20B2AA32,178,170
???Strona ??? (???)17.06.2011, 10:58:14Strona / KeywordHexDecimalKeywordHexDecimal
lightskyblue#87CEFA135,206,250midnightblue#19197025,25,112
lightslategray#778899119,136,153mintcream#F5FFFA245,255,250
lightslategrey#778899119,136,153mistyrose#FFE4E1255,228,225
lightsteelblue#B0C4DE176,196,222moccasin#FFE4B5255,228,181
lightyellow#FFFFE0255,255,224navajowhite#FFDEAD255,222,173
lime#00FF000,255,0navy#0000800,0,128
limegreen#32CD3250,205,50oldlace#FDF5E6253,245,230
linen#FAF0E6250,240,230olive#808000128,128,0
magenta#FF00FF255,0,255olivedrab#6B8E23107,142,35
maroon#800000128,0,0orange#FFA500255,165,0
mediumaquamarine#66CDAA102,205,170orangered#FF4500255,69,0
mediumblue#0000CD0,0,205orchid#DA70D6218,112,214
mediumorchid#BA55D3186,85,211palegoldenrod#EEE8AA238,232,170
mediumpurple#9370DB147,112,219palegreen#98FB98152,251,152
mediumseagreen#3CB37160,179,113paleturquoise#AFEEEE175,238,238
mediumslateblue#7B68EE123,104,238palevioletred#DB7093219,112,147
mediumspringgreen#00FA9A0,250,154papayawhip#FFEFD5255,239,213
mediumturquoise#48D1CC72,209,204peachpuff#FFDAB9255,218,185
mediumvioletred#C71585199,21,133peru#CD853F205,133,63
???Strona ??? (???)17.06.2011, 10:58:14Strona / KeywordHexDecimalKeywordHexDecimal
pink#FFC0CB255,192,203slategray#708090112,128,144
plum#DDA0DD221,160,221snow#FFFAFA255,250,250
powderblue#B0E0E6176,224,230springgreen#00FF7F0,255,127
purple#800080128,0,128steelblue#4682B470,130,180
red#FF0000255,0,0tan#D2B48C210,180,140
rosybrown#BC8F8F188,143,143teal#0080800,128,128
royalblue#4169E165,105,225thistle#D8BFD8216,191,216
saddlebrown#8B4513139,69,19tomato#FF6347255,99,71
salmon#FA8072250,128,114turquoise#40E0D064,224,208
sandybrown#F4A460244,164,96violet#EE82EE238,130,238
seagreen#2E8B5746,139,87wheat#F5DEB3245,222,179
seashell#FFF5EE255,245,238white#FFFFFF255,255,255
sienna#A0522D160,82,45whitesmoke#F5F5F5245,245,245
silver#C0C0C0192,192,192yellow#FFFF00255,255,0
skyblue#87CEEB135,206,235yellowgreen#9ACD32154,205,50
slateblue#6A5ACD106,90,205
???Strona ??? (???)17.06.2011, 10:58:14Strona /
???Strona ??? (???)17.06.2011, 19:28:05Strona /
KeywordHexDecimalKeywordHexDecimal
aliceblue#F0F8FF240,248,255crimson#DC143C220,20,60
antiquewhite#FAEBD7250,235,215cyan#00FFFF0,255,255
aqua#00FFFF0,255,255darkblue#00008B0,0,139
aquamarine#7FFFD4127,255,212darkcyan#008B8B0,139,139
azure#F0FFFF240,255,255darkgoldenrod#B8860B184,134,11
beige#F5F5DC245,245,220darkgray#A9A9A9169,169,169
bisque#FFE4C4255,228,196darkgreen#0064000,100,0
black#0000000,0,0darkgrey#A9A9A9169,169,169
blanchedalmond#FFEBCD255,235,205darkkhaki#BDB76B189,183,107
blue#0000FF0,0,255darkmagenta#8B008B139,0,139
blueviolet#8A2BE2138,43,226darkolivegreen#556B2F85,107,47
brown#A52A2A165,42,42darkorange#FF8C00255,140,0
burlywood#DEB887222,184,135darkorchid#9932CC153,50,204
cadetblue#5F9EA095,158,160darkred#8B0000139,0,0
chartreuse#7FFF00127,255,0darksalmon#E9967A233,150,122
chocolate#D2691E210,105,30darkseagreen#8FBC8F143,188,143
coral#FF7F50255,127,80darkslateblue#483D8B72,61,139
cornflowerblue#6495ED100,149,237darkslategray#2F4F4F47,79,79
cornsilk#FFF8DC255,248,220darkturquoise#00CED10,206,209
???Strona ??? (???)17.06.2011, 10:58:15Strona /