DGM2740 Principles of Web Languages

This course was built by Dr. Paul Cheney for the Digital Media Department at UVU

Unit04 Advanced CSS

Objectives

Overview

In this unit you will be expanding your capabilities to spice up a site appropriately using advanced CSS techniques. I will introduce you to a few techniques and then you can explore additional ones on your own. In this series I demonstrate a site that has all the the required elements for the assignment and then I show you how to implement each one individually. Unlike previous tutorials, I don't show you how I built the example site but rather I show each item in isolation. It's up to you to implement these in your own work as appropriate.

Box Shadows Explained

Box Shadows can have multiple variations from an outer glow to a cast shadow from a spotlight to a soft shadow, to an inset shadow.

Box Shadow Illustrated
  1. A positive value for the horizontal offset creates a shadow to the right, a negative length to the left.
  2. A positive value for the vertical offset pushes the shadow down, a negative one up.
  3. The larger the value, the more the shadow’s edge is blurred. Negative values not allowed!
  4. Positive values cause the shadow shape to expand in all directions. Negative values contract.
  5. This is the color of the shadow. Sometimes an rgba value is used to provide more control.
  6. In addition to these values you can append the word "inset" at the end and cause the Shadow to be inside the box rather than outside. box-shadow: 0 0 4px rgba(0,0,0,.7) inset;

Learning Activities

All videos listed below are available on Udemy

Fonts for Web and Print

Assignments

Reflection Questions

Answer the following Questions based on reading the lime book and submit to Canvas.

Example

View the Advanced CSS example

View a sliding background example (does not work on old IE)