1 / 11

Chapter 13

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:

dolan-blanchard
Download Presentation

Chapter 13

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 13 Colors & backgrounds

  2. 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: <div class=“box> Here is some content that will be in a box with blue text, darkgray background and a red border </div>

  3. Specifying colors Five ways to specify color • Color namecolor: purple; • Hexadecimal 3 digit (#RGB)color: #F08; • Hexadecimal 6 digit (#RRGGBB)color: #F3008d • rgb functioncolor: rgb(255, 0, 128); • rgbafunctioncolor: rgb(255, 0, 128, 0.4);

  4. HeXADECIMAL color: #000 Min color (black) color: #FFF Max color (white) color: #0F0 Max green color: #00F Max blue color: #FF0Max yellow color: #CCCLight gray color: #003Dark blue color: #CCFLight blue

  5. Color depth • 16 values of red X • 16 values of green X • 16 values of blue X --------------------------------------- • 4096 different colors

  6. HeXADECIMAL color: #000000 Min color color: #FFFFFF Max color color: #00FF00 Max green color: #0000FF Max blue color: #FFFF00Max yellow color: #C0C0C0Light gray color: #000030Dark blue color: #C0C0F0Light blue

  7. Color depth • 256 values of red X • 256 values of green X • 256 values of blue X --------------------------------------- • 16,777,216 different colors

  8. 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?

  9. Transparency 101 Opacity rgba The a stands for alpha, which specifies transparency. Impacts only the thing that is being colored Values have the same meaning as 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.

More Related