colors and backgrounds
DESCRIPTION
Colors and Backgrounds. CSS The Definitive Guide Chapter 9. Color. As has been stressed in CIS 131 or your initial learning of HTML5 “Planning” is important! It is even more true when working with colors. Things to think about when thinking about colors: - PowerPoint PPT PresentationTRANSCRIPT
Colors and BackgroundsCSS The Definitive Guide
Chapter 9
As has been stressed in CIS 131 or your initial learning of HTML5 “Planning” is important!
It is even more true when working with colors.
Things to think about when thinking about colors:
If you use too many colors will it overwhelm the user?
If you change the default hyperlinks colors, will it confuse the user?
Will color scheme make it difficult for the user to read?
Color
Used properly color can really strengthen the presentation of a document.
Color
When many people first start building their Web pages, they create pages in colors that they like. If you're lucky or have a good eye, you'll end up with colors that look nice together. But it's very easy to set up a color scheme that clashes and is difficult for your readers to view for long periods or at all.
The primary colors are RED, YELLOW, and BLUE. These colors, in traditional color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these colors.
Secondary colors are ORANGE, GREEN, and PURPLE. These colors are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple).
Tertiary colors are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors.
Understanding color theory will help you to understand how color works on Web pages. And one of the first places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.
Complementary colors are those colors that are opposite one another on the color wheel. By using colors that are opposite one another, you create color schemes that have high contrast and so are brighter and more vivid. Some contrasting colors are: red and green or blue and orange.
On display screens, the foreground consists of
the characters and pictures that appear on the
screen.
The background is the uniform canvas behind the characters and pictures.
Lets try the “Test Page”
Foreground Colors vs. Background Colors
Color symbolism by cultureIf you use color on your Web site, then you should be aware of how your audience views those colors. This is especially important if you are designing a site that is intended for an audience of a different culture than your own (or a global audience). The cultural basis for color symbolism can be very powerful, and if you don't understand what you're saying with your colors, you can make big mistakes.
RED• China: Good luck, celebration,
summoning•Cherokees: Success, triumph •India: Purity •South Africa: Color of mourning •Russia: Bolsheviks and Communism •Eastern: Worn by brides •Western: Excitement, danger, love, passion, stop, Christmas (with green
Orange•Ireland: Religious (Protestants) •Western: Halloween (with black), creativity, autumn
Yellow•China: Nourishing •Egypt: Color of mourning •Japan: Courage •India: Merchants •Western: Hope, hazards, coward
There are two ways to directly affect the foreground color of an element: by using the color property and by setting the border colors using one of a number of properties.
Example of coding:<p style=“color: gray;”>
p.warn {color: red; }(using a class of warn to each warning paragraph and making it red.
Foreground color
There are many uses for color, the most basic of which is to replace the HTML 2.2 body attributes text, link, alink and vlink.
HTML that uses body attributes.<body text=“black” link=“#808080” alink=“silver” vlink=“#333333”>
CSS that replaces above html code.Body {color: black;}A:link {color: #808080;}A:active {color: silver;}A:visted {color: #333333;}
Replacing Attributes
Changing the color of a border around an image: by using color or border-color
img.type1 {color: gray; border-style: solid;}
or
Img.type2 {border-color: gray; border-style: solid;}
Borders
Example of coding for form elements:
Select {color: rgb(33%, 33% 33%);}Input {color: gray;}
Affecting Form Elements
The background area of an element consists of all of the space behind the foreground to the outer edge of the borders or the content box and the padding are all part of the element’s background and the borders are drawn on top of the background.
Background
Declaring a color for the background of an elements use background-color.
P {background-color: gray; padding: 10px;}
Adding padding of 10px will let the color extend a little bit from the text.
Background-color
Background-color
Background color can be set for just about any element
Background-color is not inheritedDefault value is transparent
body {color: black; background-color: white;}h1,h2 {color: yellow; background-color: rgb90,51,0);}p {color: #555;}a:link {color: black; background-color: silver;}a:visted {color: gray; background-color: white;}
Try some of your own!
Style Sheet example
Coding for having an image in the background.This coding will also tile the image onto the page.
Body {background-image; url(bg23.gif);}
Background Images…
Please look at page 261 thru 266
Background positioning:Background-repeat: repeat-yWill put the image vertically along the y axis
Background-repeat: repeat-xWill put the image along the x axis
Repeats with Direction
Don’t want to repeat the background image at all. Use the value no-repeat
Background-repeat: no-repeat;
1) Open up your web site and find a small image where you could place an image vertically or horizontally.2) Now place a bigger image somewhere in your pages using no-repeat.
Repeats with direction
It is possible to change the image’s position in the background such as centering an image or placing it on the bottom or top or right etc.
Go to your web site again and add the code to place an image in the center. (see page 264-267 for reference)
Background positioning
Using the property background-attachment, you can declare the origin image to be fixed with respect to the viewing area and therefore immune to the effects of scrolling.
background-attachment: fixed;
In a web browser the viewing area can change as the user resizes the browser’s window. This causes the background’s origin image to shift position as the window changes sizes. Look at examples on page 276 – 277.
Background-attachment
When a background image has been fixed, it is positioned with respect to the viewing area, not the element that contains it.
Please apply a background color to at least one paragraph somewhere on your site that makes sense.
Please apply a background image to an inline element in a paragraph of your choice.
Please incorporate an image of your choice on a page of your web site to the page background. (this must be a different/or an additional image from what was previously done in class)
Please provide comment codes that include today’s date and what you have included.
Tonight's lab April 16, 2013