Chapter 13
11
COLORS & BACKGROUNDS CHAPTER 13
-
Upload
dolan-blanchard -
Category
Documents
-
view
18 -
download
0
description
Chapter 13. Colors & backgrounds. Specifying colors. Three common places where you specify color Text color .box { color: blue ; } Background color .box { background-color: darkgray ; } Borders color .box { border: 1px solid red ; } Context: - PowerPoint PPT Presentation
Transcript of Chapter 13
C O LO R S & B AC K G R O U N D S
CHAPTER 13
SPECIFYING COLORS
Three common places where you specify color1. Text color
.box { color: blue; }
2. Background color.box { background-color: darkgray; }
3. Borders color.box { border: 1px solid red; }
Context:<div class=“box> Here is some content that will be in a box with blue text, darkgray background and a red border </div>
SPECIFYING COLORS
Five ways to specify color1. Color name
color: purple;2. Hexadecimal 3 digit (#RGB)
color: #F08;3. Hexadecimal 6 digit (#RRGGBB)
color: #F3008d4. rgb function
color: rgb(255, 0, 128);5. rgba function
color: rgb(255, 0, 128, 0.4);
HEXADECIMALHEX DECIMA
L
F 15
E 14
D 13
C 12
B 11
A 10
9 9
8 8
7 7
6 6
5 5
4 4
3 3
2 2
1 1
0 0
color: #000 Min color (black)
color: #FFF Max color (white)
color: #0F0 Max green
color: #00F Max blue
color: #FF0 Max yellow
color: #CCC Light gray
color: #003 Dark blue
color: #CCF Light blue
COLOR DEPTH
• 16 values of red X• 16 values of green X• 16 values of blue X---------------------------------------• 4096 different colors
HEXADECIMALHEX DECIMA
L
F0 240
E0 224
D0 208
C0 192
B0 176
A0 160
90 144
80 128
70 112
60 96
50 80
40 64
33 48
20 32
10 16
00 0
color: #000000 Min color
color: #FFFFFF Max color
color: #00FF00 Max green
color: #0000FF Max blue
color: #FFFF00 Max yellow
color: #C0C0C0 Light gray
color: #000030 Dark blue
color: #C0C0F0 Light blue
COLOR DEPTH
• 256 values of red X• 256 values of green X• 256 values of blue X---------------------------------------• 16,777,216 different colors
BEST WAY TO SPECIFY COLOR*
*Dr. B’s opinion• Use rgb with percentages:
rgb(0%, 50%, 25%)
Why?• Intuitive and minimal memorization needed• Don’t need to remember hexadecimal scale• Don’t need to remember 0 – 255 scale
Q: Why do you still need to study the other methods?
TRANSPARENCY 101
Opacity
• 1.0 indicates 100% opaque, i.e., cannot see through it at all.• 0.0 indicates that it is
completely transparent, i.e., invisible.
rgba
• The a stands for alpha, which specifies transparency.• Impacts only the thing
that is being colored• Values have the same
meaning as opacity.
