Exercise 11: Styling Images with CSS

Exercise 11 |  PDF

  1. Select 5 images and save them for use in an HTML document.
  2. Using CSS techniques change the style of these images to fit 5 of the 10 scenarios below.  You will be using CSS, none of the images should be physically altered in any way.
  • A new image style for the National Geographic Web Site
  • Style for the cover image for a Children’s Birthday Site
  • Style for the Biography photos on an insurance site
  • A title image with legible text written over it
  • Style for images on a professional photographer’s site.
  • An image with a captions
  • Style for Food photography images on the Martha Stewart Site
  • A style for images on your soon to be created portfolio
  • A style that changes when you mouseover it
  • A style for a newspaper site

Resources:

Using CSS for Image Borders
http://css-tricks.com/using-css-for-image-borders/

Adding Watermarks to Images
http://www.tutorial5.com/content/view/129/52/

CSS Image Transparency and Opacity
http://www.w3schools.com/css/css_image_transparency.asp

Cool CSS Image Border Style
http://notions.okuda.ca/2007/02/06/cool-css-image-border-style/

Highlight Image on Mouseover
http://www.cssdrive.com/index.php/examples/exampleitem/highlight_image_border/

Image Captions on the Web
http://www.cs.tut.fi/~jkorpela/www/captions.html

Tags: , ,

This entry was posted on Wednesday, October 28th, 2009 at 9:21 am and is filed under Exercises, Week 5. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

  1. Pamela says:
    October 28, 2009 at 7:26 pm

    #anchor1 {
    width : 100px;
    height : 20px;
    background-image : url(foo.png);
    }

    #anchor1:hover {
    background-image : url(bar.png);
    }

  2. Bill Cox says:
    November 4, 2009 at 12:42 am

    I’ve added exercises 10 & 11 to my web site onpilgrimage.net

    hope this is the correct way to do this…

    Bill Cox

  3. Jarett Bieker says:
    November 4, 2009 at 6:02 pm

    My Exercise 11 is located at the following location:

    http://lonesurvivor.freehostia.com/exercises/ex10/ex10.html

  4. Jarett Bieker says:
    November 4, 2009 at 6:04 pm

    My Exercise 11 is located at the following location:

    http://lonesurvivor.freehostia.com/exercises/ex11/photostyles.html

  1. There are no trackbacks for this post yet.

Leave a Reply