Exploring CSS3 with the online CSS3 generator

Be sure that you read the CSS3 lecture notes, and view the video tutorials. We will not be having a demo on CSS 3. You'll work on this during the week we have small group individual feedback appointments.

Your exercise solutions need to follow the instructions on this page; the videos/screenshots can be your guide, but are not the absolute authority

This exercise contains the following pages

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

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, use an "inset" box shadow.

Border Radius (aka 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.

You'll also round the corners of the image, which is handy to do rather than making circular images. But of course you need a square image for this to work. Set the width of the image however wide you'd like in your style (take note of the class on the image, and the comments in the styles).

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) - Four in total. You must change font size and font family in your three h3 tags. You must also use rgba() translucency for at least one text shadow.

Note: larger sizes show their shadow better, and are more legible. Your choices should be legible, not just an illegible mess! Make it look good.

  • 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. Transition needs very quick timing or else you can't see it. If it looks like nothing is happening, your timing is too slow.