css tutorials

CSS3 Tags and Examples

CSS 3 Embedded Font Face

@font-face is not strictly speaking ‘CSS3′; it was originally born in CSS 2 and although not appearing in CSS 2.1, CSS 3 is attempting to bring it into the standards.

The above header uses the SketchRockwell font with the following CSS 3 applied to it.

    CSS 3 Font Embed (Example I)
       @font-face {
          font-family: SketchRockwell;
          src: url(‘SketchRockwell.ttf’);
    }

      .my_CSS3_class {
           font-family: SketchRockwell;
           font-size: 3.2em;
}


The CSS3 box-shadow is written box-shadow: Apx Bpx Cpx #XXX;
- Apx = x-axis
- Bpx = y-axis
- Cpx = cast length / feathering
- #XXX = colour as usual

This is a panel set with a 5 by 5 pixel box-shadow, cast by 7px.

   CSS3 Border Shadow

    #my_CSS3_id {
       border: 5px solid #c4c8cc;
       -moz-box-shadow: 5px 5px 7px #888;
       -moz-border-radius-bottomright: 15px;
       -webkit-box-shadow: 5px 5px 7px #888;
       -webkit-border-bottom-right-radius: 15px;

   }



Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now in CSS3 we can apply background image dimensions as well as use multiple background images.

The CSS3 background-size is written background-size: Apx Bpx;
- Apx = x-axis (width)
- Bpx = y-axis (height)

Background-SizeThis panel is using 270 by 500 pixel image downsized to 100 by 200 pixels.

 CSS3 Background Image (Size)

       #my_CSS3_id {
           background:url(image_1.extention) bottom right no-repeat;
          -moz-background-size: 100px 200px;
          -o-background-size: 100px 200px;
         -webkit-background-size: 100px 200px;
     }

An example for those on alternative browsers, not seeing the background-image effect..
Multiple Background Images

Applying multiple background images in CSS3 is quite easy, using a comma with the standard background property.

E.g. background: url(image_1.extention) top right no-repeat, url(image_2.extention) bottom right no-repeat;
This panel uses three seperate images in its background.

   CSS3 Background Image (Multiple)

    #my_CSS3_id {
             background: url(image_1.extention) top left no-repeat,
             url(image_2.extention) bottom left no-repeat,
             url(image_3.extention) bottom right no-repeat;

   }