Web Design (15) CSS Opacity, Link Colours & Background Images

Opacity (1) Making an element slightly see-through. The value for opacity is a number between: 0 (completely transparent) and 1 (completely opaque). So a value of 0.5 gives the element an opacity of 50%

Opacity (2) An Exercise Experiment with different levels of opacity, using these examples: h1 {color: green; background: white; opacity: 0.25;} h1 {color: green; background: white; opacity: 0.5;} h1 {color: green; background: white; opacity: 1;} Notice that the opacity affects both the foreground and the background colors.

Link colors (1) Have you noticed that a link is one color when you first visit it and then another color when you go back to that page? By default, browsers display linked text as blue and links that have been visited as purple. You can change these colors with a few style rules

Link colors (2) Try this out: a:link {color: maroon;} a:visited {color: gray;} Here the unvisited link will be maroon in color; becoming gray once visited.

Link colors (3) a:hover a:hover causes the link color to change as the mouse pointer hovers over it. Try these 2 examples out with the previous exercise: a:hover {color: red;} a:hover {color: maroon; background-color: #ffd9d9;} (In the 2 nd example the background changes)

Link colors (4) If you wish to turn off the underlines that appear with your links, use the following: a {text-decoration: none} Try this out!

Link colors (5) Lastly, note that for these link color selectors to work, they must appear in the following order (or they may override other states) So: a {text-decoration: none} /*turns underlines off for all links*/ a:link {color: maroon;} a:visited {color: gray;} a:hover {color: maroon; background-color: #ffd9d9;}

Background Images (1) Background images can be given to the body as a whole or to a division within the body. Method: Place a simple image (e.g. a star) in the images folder. Then in the css file: body {background-image: url(images/star.png);} The image will be automatically repeated in the space available

Background Images (2) You can also restrict the image to tiling only horizontally: body {background-image: url(images/star.png); background-repeat: repeat-x;} only veritcally: body {background-image: url(images/star.png); background-repeat: repeat-y;} or only appearing once: body {background-image: url(images/star.png); background-repeat: no repeat;}

Background Images (3) And the position of the original (first) image can be set as follows: background-position: left-bottom; background-position: right centre; background-position: 200px 50px; background-position: 15% 100%; (both measured from top left, horizontal and then vertical)

Background Images (4) Some useful coding shorthand. Instead of: body {background-color: white; background-image: url(images/star.png); background-repeat: no- repeat; background position: right-top:} this shorter version: body { background: white url(images/star.png) no-repeat right top; }

Background Images (5) Multiple backgrounds are now also possible! So, the shorthand coding: body { background: url(image1.png) left top no-repeat, url(image2.png) center center no-repeat, url(image1.png) right bottom no-repeat; } would produce 3 images diagonally across your page!

Background Images (6) What about a rainbow effect?! Try these: body {background-image: linear-gradient (to bottom, yellow, green); } body {background-image: linear-gradient (90deg, yellow, orange 25%, blue); } body {background-image: radial-gradient (center contain yellow green); }