CSS Image Techniques

  1. Image Technique:1 - Outside Border

    Description: This technique is very simple and allows the image to have a border outside the image.

    1. image1 padding:5px;
      border:1px solid #ccc;
    2. image1b padding:5px;
      background:#fff;
      border:1px solid #ccc;

  2. Image Technique:2 - Drop Shadow

    Description: This technique allows the image to have a drop shadow. (CSS3 Only).
    The CSS means (X Distance, Y Distance, Blur Amount, RGBA(Red, Green, Blue, Alpha))

    1. image2 -webkit-box-shadow: 3px 3px 1px rgba(255, 255, 255, 1);
      -moz-box-shadow: 3px 3px 1px rgba(255, 255, 255, 1);

  3. Image Technique:3 - Outer Glow

    Description: This technique allows the image to have an outer glow. (CSS3 Only).
    The CSS means (X Distance, Y Distance, Blur Amount, RGBA(Red, Green, Blue, Alpha)

    1. image3 -webkit-box-shadow: 0x 0px 5px rgba(255, 255, 255, 1);
      -moz-box-shadow: 0px 0px 5px rgba(255, 255, 255, 1);

  4. Image Technique:4 - Outer Glow with Border

    Description: This technique allows the image to have an outer glow as well as a border. Similar to technique 1. (CSS3 Only).
    The CSS means (X Distance, Y Distance, Blur Amount, RGBA(Red, Green, Blue, Alpha)

    1. image4 border:1px solid #fff;
      -webkit-box-shadow: 0x 0px 5px rgba(255, 255, 255, 1);
      -moz-box-shadow: 0px 0px 5px rgba(255, 255, 255, 1);

  5. Image Technique:5 - Rollover (Opacity)

    Description: This technique allows an image in an anchor to become semi-transparent when it is rolled over. It can also be applied to an img:hover - but it is unsupported in IE6. Furthermore it will also apply to anything wrapped in the anchor tag

    1. image5 a:hover {
        opacity: 0.8;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
      }

  6. Image Technique:6 - Rollover (Outer Glow With Border)

    Description: This technique allows an image to have an outer glow as well as a border. (CSS3 Only). This techniques is not supported by IE6 as in IE6 you can only use hovers on a elements.

    1. image6 img:hover {
        border:1px solid #fff;
        -webkit-box-shadow: 0x 0px 5px rgba(255, 255, 255, 1);
        -moz-box-shadow: 0px 0px 5px rgba(255, 255, 255, 1);
      }