Exploring CSS3 with the online CSS3 generator

Be sure that you read the CSS3 lecture notes, and view the video tutorials.

This exercise contains the following pages

  1. box-shadow
  2. rounded corners (border-radius)
  3. text-shadow
  4. transition
  5. page design

Box Shadow

Use the CSS3 Generator (link on exercise page) to create box shadows for the red, green and white boxes.

  • For red, make a drop shadow, experimenting with offset, spread, blur and color.
  • For green, make a "glow" with 0 (zero) x y offset.
  • For the white box, try an "inset" box shadow.

Rounded Corners

Use the CSS3 Generator (link on exercise page) to create a tab style navigation bar and a circle shape as demonstrated in the video tutorial. Don't worry about positioning the text in the circle; I've moved the CSS 3 course content earlier, so we haven't learned that yet and we'll do it later.

Text Shadow

Use the CSS3 Generator (link on exercise page) to create text shadows for the "site id" and the three headings (shadow 1, shadow 2, shadow 3).

  • Experiment with x y offset, with blur, with color.
  • Change the font size and font family for the site id, and apply a text shadow.
  • Change the font size and font family for each of the three h3 shadow headings in the page to see how text shadow works differenly in these situations.
  • There are classes applied to each of the h3 tags in the page, so use these to apply different shadows, change fonts, change font sizes.
  • styles are set up to use root ems rem as the unit of measurement to change the sizes of your headings

Transition

Use the CSS3 Generator (link on exercise page) to create transitions on the hover style of the menu. Experiment with ease and choose your preferred ease setting.

Page Design

Use the CSS3 Generator (link on exercise page) to create the styles you see in the page design screen shot. The styles will need box shadow, text shadow, border radius and transition.

See the screen shot and the short video for help with what this will look like when it is complete. It is a little different from the longer video tutorial (small adjustments in the page design).

  • Box shadow is used on the main, and on shortcut menu link hover.
  • Border radius is used on the main, menu hyperlinks and shortcut hyperlinks. Remember that you can isolate which corners of the box get the border radius!
  • Text shadow is used on the site id.
  • Transition is needed for the hover on menu and the shortcut hyperinks.
  • When you need to specify color for box shadow and text shadow, use lightgreen.