teaching machines

CS 318 Lab 9 – Box Model, Part 2

February 22, 2017 by Chris Johnson. Filed under cs318, lectures, spring 2017.

Dear students,

Today, we will continue to explore the box model. But let’s add some colorful flavor through gradients. Gradients have some nice properties:

• They eliminate the flatness of solid background colors.
• They automatically scale to fill the background of an element.
• Unlike images, they are generated by the browser. They require no expensive downloads.

Let’s see an example:

#flag {
  background-image: linear-gradient(to bottom, black, red, yellow);
}

Here’s your TODO list for next time:

• Read CSS Position: A Comprehensive Look. Complete all 25 steps of Codecademy’s CSS Positioning module. (Be sure to regularly check your result in fullscreen to see the layout in a normally-sized window. Also, not all the directions seem to produce a sane layout—specifically those regarding the navigation bar. But the interactive exercise still has value.) On a quarter sheet, write down 2 questions or observations inspired by your reading and interacting. Also, provide your own definitions for each of the four possible values of position.

See you then!

Sincerely,

Debate

Create a “debate” between two individuals that looks like this:

Here’s your checklist:

• Set the box-sizing property of all elements to border-box.
• Use divs to create an alternating sequence of blurbs filled with the debaters’ statements. Random text is fine.
• Assign each div to class blurb. Assign the left debater’s blurbs also to class left. Assign the right debater’s blurbs also to class right.
• Have each blurb consume only 90% of the page’s width.
• Color the two sides differently.
• Add a drop shadow to each blurb.
• Push the right blurbs to the right margin by setting its margin-left property to auto.
• Change the blurb font using Google Fonts.
• Add a 1-pixel solid border to all blurbs.
• Set the blurb’s min-height to 202 pixels (200 for the content and 2 for the border) and min-width to 400 pixels. This will keep the blurbs from getting too small when the window is resized. Test this out to see its effect.
• Find two face images, one facing right and the other facing left.
• Set the background image of the left blurbs to a picture of the right-facing speaker. Likewise for the right blurbs, using the left-facing speaker.
• Fix the image’s height by setting the blurb’s background-size to 200 pixels in height. Let the width be automatically calculated.
• Adjust the blurb’s padding- properties to push the text off of the speaker’s image.
• Set the blurbs’ border-radius property to give them inner rounded edges. Consult MDN to see how to apply this rounding only to certain corners.
• Eliminate the body’s margin so that the blurbs are pushed right up to the browser’s window.
• Set the blurb’s margins so that they are separated from one another.
• Add an overall heading with a gradient that flows between the left and right colors.
• Give the heading two words of content, the left word in a contrasted shade or tint of the right color, and the right word in a contrasted shade or tint of the left color. The website ColorHexa is a helpful resource for generating shades and tints.
• Fade out the bottom of the heading by using an inset box shadow. See MDN’s documentation on the box-shadow property.
• Adjust the padding and margin of the heading to pin it to the browser window and keep the text from feeling cramped.

Hometown

Create a webpage that welcomes visitors to a city. Pick your own content and colors, but match the layout and general style of this example:

Pay particular attention to the spacing.

Also, use the semantic elements that we discussed a few weeks ago: header, nav, main, and footer. Recall that these elements are used by screen readers to understand the structure of a page.

Also also, since we’re not doing any layering or other layout tricks with the image, it should be a plain old img element, not a background image for some div.

Also x3, the shadow on the example image is in the original. You can emulate it if you want with box-shadow.