For this assignment, you are to work with image files that include a gradient that involves levels transparency. Using Photoshop to create such image files will leave you only one choice for the file format to use, PNG-24, because JPEG files have no support for transparency, and the indexed file formats supported by Photoshop (GIF and PNG-8) support only one level of transparency.
You will be using two different transparent gradients for two different elements of your web page.
The assignment also introduces other positioning mechanisms for CSS boxes in addition to the float property you have already worked with. The new positioning mechanisms are specified using the position property, which may take the values, absolute, fixed, relative, or static.
The topic of positioning is covered in the textbook, starting on page 107. There is a web page I prepared on Using Photoshop To Edit Web Images that includes information on creating gradients.
You may update the existing stylesheet for your web site for this assignment. So there are no changes to the XHTML of your web page required.
Your web page should already have one div element at this point, which you added in Assignment 3. Now add a second, empty, div at the beginning of the body of the page. To differentiate between the two divs, give each an id that will uniquely identify it. For the new div, use the value static_background, and for the existing one, use the value content.
The first part of the body of your web page should look like this:
This is terrible! The only purpose of the “static_background” div is to provide an element for controlling the appearance of the web page. It has no meaningful purpose whatsoever, so a purist would be quick to point out that it should not be present in the XHTML file at all, even though we are, properly, going to control its appearance using CSS. But “our client” asked for the visual effect of having a stationary background for the whole page, and I don’t know how to implement it without this content-free div.
Look at your web page; its appearance should not have changed from what it looked like for Assignment 5. Because the new div has no content, the browser will allocate no space in the window. Its CSS box collapses to nothingness.
Make sure everything still validates.
We went over this in class, and the Using Photoshop web page tells how to do it too. The exact width of the image doesn’t matter because it will be tiled horizontally too fill up the div, and the height is actually arbitrary too; I’ll say to use 600 pixels just to be concrete, but feel free to experiment.
Make the gradient a solid color that will complement the background color of your web page at the top of the image, and have it fade to fully transparent towards the bottom. Save the Photoshop file (with a .psd file extension) in your images directory (so I can see it when I look at your assignment), and use the “Save for web and devices” panel to save a copy in the same directory as a PNG-24 file (with the .png file extension). Use a descriptive name for the file, such as “vertical_gradient.” (Note that if you put a space in the file name, Photoshop will automatically replace it with a hyphen because spaces are more bother than they are worth in file and directory names that are used in URLs.)
Add a CSS rule to the stylesheet that selects the static_background div, with the following properties:
At this point, view the web page and verify that the background image appears solid at the top of and across the full width of the browser window, and that it does not move when you scroll the window vertically. (Or horizontally, for that matter.) But it will appear in front of the content on the web page, and you want it to go in front of the body element, but in back of the content elements.
Set the z-index property of the stationary background to -1; this will place it behind the content elements of the page. But it will also put it behind the html and body elements of the page, so set their z-index property to -2 to put them behind the stationary background. But that won’t work because they are not “positioned” elements, so set their position property to relative without specifying a value for top property or left property, a trick that makes them “positioned” without actually changing their position or flow within the page. (We went over this in class on April 20.)
Use Photoshop to create a transparent image 800 pixels wide and 25 pixels tall. Add a gradient that is a solid color on the right and transparent on the left, with the solid color being one that complements the background color of the h1 element.
Use a CSS rule to add this image as the background of the h1. Have it repeat in the vertical direction, and position its right edge at the right edge of the h1.
Verify that the appearance is correct.
CSS3 supports putting rounded corners on boxes using the border-radius property. For boxes that contain text, the radius is normally specifed in ems. (For boxes that contain pictures, the radius is normally specified in pixels.)
Current versions of Chrome and Opera will handle border-radius properly, but for Safari and Firefox, you will have to use the browser-specific property names, -webkit-border-radius and -moz-border-radius, respectively.
The W3C CSS validator will give errors for the -webkit- and -moz- versions of the property names, but browsers that do not recognize them will simply ignore them. Using these browser-specific properties is the one exception to the rule for this course that all code must validate with no XHTML errors or warnings and no CSS errors or warnings. The errors for using -moz- and -webkit- properties, and only these errors, are allowed.
To add a drop shadow, the property name is box-shadow property, and there are four values to specify: the offset in the X direction, the offset in the Y direction, the spread of the shadow (bigger values make the shadow bigger), and the color of the shadow. There are -moz- and -webkit- versions of this property also.
Microsoft has announced that Internet Explorer 9 will support CSS3 properties such as these when it becomes available.
When you are ready for me to look at your assignment, simply send me an email message to let me know. I’ll manually copy your entire web site to my computer (babbage) and check it out. The full pathname to your web site on babbage will be http://babbage.cs.qc.cuny.edu/Grading/cs081/ followed by your account name.
Send your email message to me at: vickeryatbabbage.cs.qc.cuny.edu by midnight of the due date.
The Subject line of your email message must be: “CS-081 Assignment 6.”
Don’t forget to put your name in your email message!