Web Design 35S‎ > ‎CSS‎ > ‎

Gradients

(You don't need a sketch for this assignment.)
  1. When doing this assignment, you should use an up to date version of Chrome, Firefox, or Explorer (our version of Explorer is not up to date).
  2. You are going to use CSS to create a gradient. A gradient is a slow change of in color going from one extreme to the other. You'll see what this means in a few minutes.
  3. You'll need a stylesheet.css and an index.html page, both created in a folder that could be called gradients.
  4. In your index.html page, make sure in the head you link it to the stylesheet just like you did in the previous assignments.
  5. In the body of your index.html page, create a paragraph <p> of about 100 words on
    • sheep,
    • Cheez Whiz,
    • or Ketchup.
  6. In your stylesheet.css, you are going to define the style for your paragraph.
    • What you are going to do would work for anything that can have a background, such as divs, tables, or table cells.
  7. In your stylesheet, set the paragraph background like this: p{background-image:linear-gradient(left, red 0%, green 100%);}
    • What that means is that at the zero point at the extreme left edge, your background will start out red and by the extreme right edge the background color should be green.
  8. Write a short paragraph in your index file, save it, and load the file up into Chrome.
  9. It doesn't work, does it?
  10. That's because though the command is in CSS, the most up to date browsers haven't agreed how to set it up.
    • If you're using an up to date version of Chrome or Safari which are built on a system known as Webkit, you need to add in one little command. p{background-image:-webkit-linear-gradient(left, red 0%, green 100%);}
      • You need a specific command for Webkit based browsers.
    • For browsers like Firefox, SeaMonkey, and a few others that are built on a system developed by Mozilla you need a slightly different command such as p{background-image:-moz-linear-gradient(left, red 0%, green 100%);}
    • If you use Opera, instead of -webkit- or -moz- in front of linear-gradient, add in -o-.
    • For the latest Microsoft Internet Explorer (which is version 10 or later and we don't have it here) you'd add in -ms-.
  11. If you have successfully setup a gradient, play with the percentages. Change 0% to 25% and 100% to 75% and see what happens.
  12. Make sure you've got a big paragraph, at least 250 words.
    • Use the Lorem Ipsum or Bacon Ipsum generators in the left sidebar if you like.
  13. Change the command left to right
    • and then to top
    • and later to bottom,
    • and finally to top left.
    • Notice how your gradient changes?
  14. The assignment is to create a gradient on a webpage that works in Chrome.
    • You may use any colors you like, but it should not use both red and green.
    • It should cover the entire screen when I go to look at it.
    • If you can do it: 5 marks.
ĉ
Gradients marking guide.docx
(15k)
James Dykstra,
Dec 11, 2012, 8:22 AM
v.1
Comments