website
Nobody
week_10_colour.pptxColour & background properties
background-color
sets the background’s color
background-image
sets the background image for an element
background-repeat
sets the tiling (and tiling direction) of a background-image
background-position
sets the position of a background image
1
background-attachment
defines whether the background image scrolls with the containing block or remains fixed to the viewport
background
sets the background’s appearance
color
defines the foreground color for text content
background-color
sets the background-color of an element; it's good practice to specify a foreground color (color) at the same time, to ensure that conflicts don’t arise with colors or backgrounds that are defined elsewhere.
1
Add a background property…
{
font-family: “Trebuchet MS”, “Helvetica”, sans-serif;
font-weight: bold;
font-size: 62.5%;
line-height: 125%;
background-color: #e2edff;
color: #fff;
}
2
body
Changing the look of words and letters
2
Here we will style the font for all the text inside the <body> element of the html file.
Add the above code to your stylesheet.css file.
You’ll have to change the “” (double quotation marks) again.
Save the changes and refresh your screen in your browser
Changing the look of individual words and letters –
Fonts belong to families and like all css properties their values can be set or changed.
The font-family declaration goes like this: Your first choice of font goes first, followed by your second, etc and at the end choose the generic font family. Not everyone’s operating systems allow for the same fonts, so you must allow for people not having the font of your choice.
An argument for never choosing an unusual font for your website.
Computer Colour basics
3
Colour adds impact, mood and tone to your web pages. Used unwisely colour can also make your page difficult to access or use.
Many web visitors perceive sites with a positive aesthetic feel more easy to use (Brady and Phillips, 2003).
Find out about colour basics using one of the resources listed on the unti website – css presentation.
Find answers to these questions:
what are primary, secondary and tertiary colours?
what is a colour wheel?
what are values, saturation, contrast?
what are analogus and complementary colours?
3
How colours are made up - some key terms that describe colours
What a colour wheel is & how it can help
you
Different types of colour schemes
What the web safe colour palette is & why
it can be ignored
Usability and accessibility issues
4
Choosing a colour relies on understanding:
Website reference:
http://learnline.cdu.edu.au/units/applicationconcepts/webapplications/module1/csspresentation.html
Scroll to the bottom to your turn – first tab
4
Colour terminology
Primary colours
Secondary colours
Tertiary colours
5
red, yellow, blue
green, orange, purple
combinations of primary and secondary colours
5
Colour terminology …..
Hue (pure colour)
Shade (colour + black)
Tint (colour + white)
Tone (colour + gray)
6
6
A hue is a pure color; it contains no black or white. It is the key part of a color that allows it to be identified as red, green or blue.
A shade is a hue with black added
A tint is a hue with white added
A tone is a hue with gray added
Intensity describes the intensity of a colour – sometimes called saturation or chromaticity
Print colour codes
Subtractive Colour Model
C- Cyan
M- Magenta
Y- Yellow
K- Black
7
Read the Notes page for this slide to find out more.
7
The colour generated here is calculated differently from computer colour.
Two different colour spaces – web/screen; paper/print
Graphics programs prepare images in one of these two colour spaces
Need RGB for web spaces
Some rgb colours cannot be reproduced in print
Paper is white - - it reflects all colours
When colour is added to the page – it subtracts from the light reflected giving the paper colour
Black is present and the other colours do not create black
The substractive CMYK Colour Space
The printing industry does not use the RGB primary colours, but rather their complements: cyan, magenta and yellow. This is because inks “subtract’’ their supplementary colours from the white light which falls on the surface, eg. cyan ink absorbs the red component of white light, and thus, in terms of the additive primaries, cyan is white minus red, ie. blue plus green. Similarly, magenta absorbs the green component and corresponds to red plus blue, while yellow, which absorbs blue, is red plus green. In fact, for practical purposes in the printing industry, a process called “undercolour removal’’ takes places. In this procedure a fourth “colour'', black, is added to the printing process, with a concentration equal to the equal amounts of cyan, magenta and yellow present in the sample. This way one creates a darker black than is possible by mixing the three coloured inks. This colour model is called the CMYK model, where the final ``K'' stands for the black component, whose value is calculated as follows:
Computers use RGB colours
Additive colour model
Red, green & blue are added together to produce an array of colours
Each colour represented by 3 bytes (a byte being 28 =256)
Each byte represents either of the following
Decimal from 0 – 255
Hexadecimal 00 – FF
The concatenating of the 3 bytes is called a hex triplet
Order is Red, Green, Blue
8
8
The additive model uses RGB colours.
Hexdecimal numbers go from 0 – F (0 1 2 3 4 5 6 7 8 9 A B C D E F)
9
http://dev.opera.com/articles/view/8-colour-theory/
Please don’t be disconcerted when you see that Opera’s curriculum pages state that the content is obselete.
You can still confidently use this content.
It’s actually so thorough and reliable that it forms the foundation of the W3C web education community group’s curriculum.
You can choose to go to W3C’s resources or just continue using Opera for the time being.
Ignoring web safe colours
Early computers could only display up to 256 different colours
Today they can handle vast combinations of colour
Web safe colours were limited to these 256 colours
They are a legacy that can be ignored
Even mobile devices can handle large combinations
10
Colour schemes
Monochromatic colour
1 base colour + shades & tints
Analogous colour
colours adjacent on the colour wheel
Complementary
colours on the opposite site of the wheel
Double complement
two sets of complementary colours
11
See this site: http://www.color-wheel-pro.com/color-schemes.html
A good site for helping you set up a web colour scheme on a site –
http://colorschemedesigner.com/
11
Colour schemes contd …
Split complement
colour + two colours adjacent to its complement
Triadic
three colours from points of an equilateral triangle
Alternative complement
another colour from between two points of the triangle
12
Accessibility issues - colour
Some browsers and devices do not support colours.
For colour-blind users, poorly designed colour schemes can make sites unusable or difficult to use.
Don’t mix legacy markup such as bgcolor attribute with modern CSS. This fails for older browsers that don’t support CSS.
13
13
http://en.wikipedia.org/wiki/Web_colors#Converting_RGB_to_hexadecimal
14
http://colorblender.com
Don’t try to work out colour schemes yourself –
if you are not confident try this site out –a site that enables you to decide colour schemes
Experiment!
Good idea - use this site for your mini-site’ colour scheme.
14
Here’s a site that can help you develop a colour scheme for your site.
When in doubt – start with a white background, black text and add one bright colour or tones of one colour (add grey)
Gray scale is also good to begin designing in – leave the colour til last.
