–– workshop home ––

Workshops

CSS Puzzle Box Exercises

Exercise: shadows

Non-graphic approach

  1. Download shadow.html
  2. Add styles to create a drop shadow effect on the right and bottom edges of the graphic
  3. Change values to make the shadow wider and narrower
  4. Change the color value

Here are some initial values you can try:

	border-bottom: 2px solid #003;
	border-left: 1px solid #009;
	border-right: 2px solid #003;
	border-top: 1px solid #009;
	float: right;
	margin-left: 1em;

Graphic approach

  1. Remove the styling from the previous exercise.
  2. Use the file shadowalpha.png for this exercise
  3. Add the necessary styling to create the shadow effect
  4. play around with positioning and size of the shadow

HTML code:

<div class="imageshadow">
	  <img src="file.ext" alt="descriptive text" />
</div>

CSS

.imageshadow {
  float:right;
  background: url(shadowAlpha.png) no-repeat bottom right; /*adjust path*/
  margin: 10px 0 0 10px;
}	
.imageshadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #bbb;
  margin: -6px 6px 6px -6px; /* these values correspond to the size of the shadow */
  padding: 4px;
}

Note the benefits of the one compared to the other approach.

Exercise: Floats

Use the file float.html. Add margins or padding as needed to make the text less crowded. Try adding in a heading.

Now download floats.html. Again add margins or padding to improve the look of the page.

Try adjusting various values to see the effect. Add and remove text, and in general fool around with this until you have a good feel for how the floated blocks behave.

Exercise: Indicators

Use the file indicators.html.

Use the exclamation.png image instead of the character entity to indicate an off-site link.

Exercise: Drop Caps

Use the file dropcap.html.

Experiment with the font-size, padding, and margin values. Try commenting out the clear on the paragraph style. Be sure to resize the viewport to see the effects of word wrap.

Put a border around the first-letter and change the background color and font. This will set it off even more.

Modify the CSS so that the drop cap effect happens only to the first paragraph under each h3 tag. Hint: the plus sign is the first-child selector.

Now add styling so that the rest of the paragraphs also have a first-letter style, but one that is less pronounced. Just make the letter slightly larger and perhaps a shade lighter.

Exercise: Image Caption

Use the caption.html file, because it already has a picture in it. The caption we want to add is "Wertach Bridge Tower in Augsburg, Germany - built in 1403". Create the styles necessary.

pseudo-code

<div class="name">
	<img etc>
	<div class="imgcaption">
	caption text goes here
	</div>
</div>

Remember that you will need to know the size of the image and will need to set a width parameter.