Upload
kathlyn-skinner
View
239
Download
2
Tags:
Embed Size (px)
Citation preview
Lesson Overview Understand basic color theory Learn how to specify color in CSS Understand how to use foreground
and background colors Manage link colors with Pseudo-
classes Add and tile background images Intro to External Style Sheets
The Psychology of Colors Color can have an
impact on a viewer Color has long been
the subject of study for advertisers, print designers and artists
How do we feel about the use of one color over another?
Consider the following…
Blue Blue is the most sedate of all colors Blue is used to represent ice and
minty freshness Blue symbolizes
heaven and divinity Blue is the color
of choice for business suitsand logos
Red Red is the most arrogant, attention
grabbing, energetic color Red is often associated with love and
passion Advertisers use red to
catch our attention: Red tag specials Fast sports cars Lipstick on
beautiful women
Yellow
Yellow is a warm, bright and vibrant color
Yellow is the color of the sun, and gold
Yellow representsgoodness and joy
Also represents caution Yellow roses are the symbol of
friendship
Orange
Orange is the marriage of red and yellow
Orange is considered happy and lively Orange is used in autumnal landscapes
and fire’s flame Orange captures our attention:
ex. Signs on roads and highways
Green is the color of the natural world, represents freshness and growing things
Green represents life and hope
Its cool quality sooths, calms, and has healing powers
Green
Violet/Purple Purple is the most exotic color Purple is represents royalty, and
wealth Purple is a deep, mysterious hue,
mystical and meditative
White
White represents perfect balance and perfection
White symbolizes purity, truth and goodness
Good guys wear white White also suggests
cleanliness
Black Black is the
absence of white light
Black is the antithesis of white, bad guys wear black
Black represents funerals, death and mourning Black can bring feelings of despair and loneliness Black is mysterious, evil, and intriguing
The Practical Side of Color Knowing that colors affect us emotionally
can aid us in choosing how and where to place color on our pages
Use the symbolic meanings of colors to add a subtle, deeper meaning for your Web pages
Use bright colors to grab attention Use calm colors to encourage the viewer
to stay around and relax
The Color Wheel
The color wheel is based on the three primary colors ( Red, Yellow and Blue ) placed evenly around a circle
The secondary colors (Green, Orange and Violet) are mixtures of the two primaries they sit between
The tertiary colors fall between each primary and secondary. Between yellow and orange, for example, is yellow orange, between blue and violet is blue violet and so on
More Color Terminology Complimentary colors are
opposite each other on the color wheel
Saturated colors contain no black, no white and none of their complimentary color
Compound colors contain a mixture of the three primaries, for example: the browns, khakis and earth colors
Tints are made by adding white to a color
Shades are made by adding black
This illustration shows the compound mixtures between red and green, as are tints and shades of the color wheel
Color in terms of HSV In HSV, any color is decomposed
along three axes Hue: a pure rainbow color from the
color wheel Saturation: the proportion of this pure
color vs. colorless gray Value (also called luminance): the
overall brightness of the color
Web Site Color Schemes Choosing an aesthetically pleasing set of
colors for a Web site may be challenging for non-designers
Using what we know about the color wheel, you can use different color combinations or schemes that are harmonious and pleasing to the eye
These schemes are used in other disciplines but also have their place in web design
Color Scheme Tools There are several online tools
that can help you with choosing a color scheme for a Web site
One is Color Scheme Designer: http://colorschemedesigner.com/ This tool helps you view different
schemes and then choose the one you like and transform the information into usable Web format
Monochromatic Scheme Monochromatic color schemes use
a single color as the basis of the scheme Differing values of the chosen color can be
used to create the feel of different colors Monochromatic color schemes are usually
seen as harmonious and peaceful Using a single color creates unity and can
help to create or tie things together
A Monochromatic Web Site
http://newark1.com/chocolate/index.htm
Analogous Scheme Analogous color combinations use
colors that are adjacent on the color wheel
A selection of blues and purples, or reds and oranges creates an analogous color scheme
Two or more colors can be used in an analogous color scheme however, one color is often used as a dominant color while others are used as accents
Complementary Scheme Complementary colors are
opposite from each other on the color wheel These contrasting colors are pleasing to the eye This scheme usually combines a warm color
and a cool together Probably should not be used in a foreground
and background relationship Can be discordant if the colors are not true
opposites on the color wheel.
Triadic Color Scheme
The three colors in a triadic color scheme are evenly spaced on the color wheel
This scheme combines primary or secondary colors together
Using highly saturated colors can make your site look amateurish
A more subdued value of one or more color can help to create greater subtlety, harmony and readability for your site
Tetradic Color Scheme The tetradic scheme combines
four colors evenly spaced on the color wheel
Can be seen as combining two sets of complementary color schemes
May appear too busy if all colors are given equal footing on a Web site
Consider choosing one dominant color and use others as accents
Displaying Color on the Web Web color is grouped by its
Red, Green, and Blue elements (RGB) Newer monitors use 24 bit color:
sometimes called true color 8 bits for Red, 8 bits for Green
and 8 bits for Blue Can display millions of colors using this
combination
Bit Depth1 - bit 2 colors
2 - bits 4 colors
3 -bits 8 colors
4 – bits 16 colors
5 – bits 32 colors
6 – bits 64 colors
7 – bits 128 colors
8 – bits 256 colors
16 – bits 65,536 colors
24 – bits 16, 777, 216 colors
(Usually referred to as “millions of colors”)
Color Name or Number A color can have a name
These are names recognized by the browser User-friendly way of giving a color attribute
value Ex: “forestgreen”, “aquamarine”, “indianred”
A color can have a number Uses a hexadecimal value to represent the
RGB color The # symbol designates this as a
hexadecimal number to the browser Ex: aqua = “#00FFFF”, darkviolet=“#9400D3”
Web-Safe Colors Choosing only web-safe colors is no longer
critical because most monitors can now handle millions of colors
A color is web-safe if all pairs of digits are the same
Examples: #00CCFF – is web-safe #9400D3- is not web-safe #FFF – shorthand notation for #FFFFFF #FF – even shorter notation for #FFFFFF
Foreground Text Color The color property is used to set the
foreground text color Values include: color name or hexadeimal
number Setting the text color in the body selector
will set the default text foreground color for the entire page or site body { color: black;} body { color: #000000;}
Background Color The background-color property is used to
set the background color on any element Values include: color name or hexadecimal
number Again, adding the background-color
property to the body selector will color the background of the entire page body { background-color: white;} body { background-color: #FFFFFF;}
Anchor Pseudo-Classes in CSS
An anchor pseudo-class defines styles for anchor state changes
You can determine a pseudo-class style because it contains the : character
Links exist in multiple states: a:link – the unvisited state a:visited – the link has been visited a:active – the link is active a:hover – the mouse is hovering over the link
Anchor Pseudo Classes Using CSS you can change the color and
appearance of a link in these states Ex. a: link { color: blue;}
a: active { color: red; } a: visited { color: green; } a: hover { color: yellow; }
Descendent selectors may include a pseudo-class Ex. ol a:link { color: blue;}
Watch Backgrounds and Link Colors Poor choice of background colors and
background images can make your text or links unreadable
Make sure you have enough contrast between background and foreground
Often, increasing font size can make a world of difference
Subtle background patterns and colors are best
Creating a Web Color Palette
A color scheme may provide you with only three or four colors to work with
Shades and tints of the main colors from a scheme that can be used to create a more complex color palette as needed for a Web site
Hexadecimal values of colors are needed to translate the color palette to CSS code
The Color Scheme tool can aid us in putting together a more complete palette
What Colors are Needed ???
The two most important colors for a palette are the text color and the background color These two colors must have enough contrast to
make the text readable Heading colors may be an accent color Link, visited link, hover link, and active link
colors must be readable on background and differ from text colors
Key graphics may echo accent or dominant color
Additional Tool Features The Color Scheme tool can
generate an HTML file with embedded CSS that shows the color palette as hexadecimal values
A light background with dark text Web page can be viewed
A dark background with light text Web page can be viewed
<style type="text/css">
/* Palette color codes *//* Feel free to copy&paste color codes to your application */
.primary-1 { background-color: #7109AA }
.primary-2 { background-color: #5F2580 }
.primary-3 { background-color: #48036F }
.primary-4 { background-color: #9F3ED5 }
.primary-5 { background-color: #AD66D5 }
.secondary-a-1 { background-color: #CD0074 }
.secondary-a-2 { background-color: #992667 }
.secondary-a-3 { background-color: #85004B }
.secondary-a-4 { background-color: #E6399B }
.secondary-a-5 { background-color: #E667AF }
.secondary-b-1 { background-color: #9FEE00 }
.secondary-b-2 { background-color: #86B32D }
.secondary-b-3 { background-color: #679B00 }
.secondary-b-4 { background-color: #B9F73E }
.secondary-b-5 { background-color: #C9F76F }
.complement-1 { background-color: #FFFF00 }
.complement-2 { background-color: #BFBF30 }
.complement-3 { background-color: #A6A600 }
.complement-4 { background-color: #FFFF40 }
.complement-5 { background-color: #FFFF73 }
Color Palette
CSS Code
Background-Image The HTML background attribute of the <body>
tag has been deprecated in favor of the background-image CSS property
A background image can be applied to the entire body of the page or any element
Use the body selector in a style sheet to set the background-image for a page
Examples: body {background-image: url (path/filename); } body { background-image: url (Images/chart.jpg) ;}
Background-Repeat in CSS A background image will automatically
try to cover the entire browser window If it is a small image, it will repeat or
tile to cover the window This repeating is called tiling
The background-repeat property can help you to control the tiling of an image
background-repeat values include: background-repeat: repeat-x;
will tile an image in the horizontal direction background-repeat: repeat-y;
will tile an image in a vertical direction background-repeat: no-repeat;
will not tile an image, it will only appear once background-repeat: repeat; will tile the
image in both directions, this is the default
Background-Repeat Values
To Tile or Not Tile ??? If your background image is smaller than the
dimensions of the browser window, it will tile by default
Creating a small seamless image to tile is not easy
Advantage: A small tiled image will load very fast!
Disadvantage: While the texture may look perfect with the page heading or navigation bar, it may make text in the body area unreadable
A better solution might be to incorporate the same texture right into the graphics where it is needed, or use a non-tiling background
Non-Tiling Backgrounds
Expanding the background image in both dimensions creates a background which is not subject to tiling
This technique, used by many professionally designed pages, gives the most creative control over layout
A non-tiling image must be large (at least 1200 pixels wide; its necessary height should be determined by the contents of the page)
To keep file sizes down, only GIFs with few colors or JPEGs with high compression levels should be used
The loss of quality in highly compressed JPEGs is less noticeable if the image has low level of contrast, or is artificially faded or blurred.
Background Image Background Image WarningsWarnings
Background images can make the page Background images can make the page hard to readhard to read
Use a background image like a light Use a background image like a light watermark and it will be more readablewatermark and it will be more readable
Once the image is cached, subsequent Once the image is cached, subsequent pages can be displayed without incurring pages can be displayed without incurring a loading time penaltya loading time penalty
Always provide a background-color in Always provide a background-color in case the background-image is not case the background-image is not availableavailable
Background Attachment The background-attachment property can
be used to determine if the image scrolls with the document or stays fixed as content scrolls Values include: scoll, fixed
This property is not supported by IE6 and earlier browsers
Examples: body { background-attachment: fixed;} body { background-attachment: scroll;}
External Style Sheets External style sheets keep style
rules as a separate file Allows use of many style rules with
a single file Modifications to style sheet file will
change all the associated pages Uses the .css file extension
Example External Style Sheet
body { background-image: url(Images/back.jpg); font-family: Verdana, Arial, sans-serif; font-size: medium; color: navy;
}
h1, h2, h3 { color: blue; line-height: 125%;
}
a:link { color: brown;}a:visited { color: red; }a:hover { color: orange;}a:active { color: yellow; }.bigger { font-size: large; }
.imageleft { float: left; padding-right: 10px;}
MyStyles.css
Attaching an External Sheet Like an HTML page, a style sheet is
just an ASCII text file Usually this file is placed in your
site folder Attach the style sheet by using the
<link> tag in your page header
<link> tag Example:
<link rel=“stylesheet” href=“mystyles.css” type=“text/css” />
This creates a persistent style that is applied to your page regardless of the user’s local selections
The name of the styles heet linked in this case is: mystyles.css
More on External CSS Later
We will concentrate more on creating and using external style sheets in Chapters 14, 15, and 16
Microsoft’s Expression Web environment makes creating and managing external CSS a breeze
Read Project instructions carefully to see when to use external CSS and when to use embedded CSS
Lesson Summary Color schemes are based on combinations of
colors related to their placement on the color wheel
RGB color is specified with color names and hexadecimal numbers
Link Pseudo-classes can be used to set link colors for different link states
Background images can be repeated or not repeated, fixed or scrolled
A color palette for a Web site maps colors to elements on a Web page