CSS3 Examples

Web Design Resource

A Beginner's Guide to Building Web Sites. Print and PDF versions available from User Friendly Resources.

Some examples of CSS3 in action for reference. At the time of writing a number of the examples require a Mozilla or Web Kit based browser and it is important to note the CSS3 specification is not final and prone to change. Where possible I have included the W3C rules and a link to the specification.

The examples include:

Rounded corners
Drop shadows
Gradients (web kit only)
Opacity
Rotate transform (with transition for web kit)
Text shadow
Scale transform (with transition for web kit)

The markup:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CSS Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link type="text/css" rel="stylesheet" media="all" href="css3.css" />
  </head>
  <body >
    <h1 class="textshadow">CSS3 test</h1>
    <div class="roundcorners box">
      <h2>Rounded Corners</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box shadow">
      <h2>Drop Shadow</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box gradient">
      <h2>Gradient background</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box opacity">
      <h2>Opacity</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box rotated shadow">
      <h2>Rotated box</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box">
      <h2 class="textshadow">Text Shadow</h2>
      <p>This is some text in the box</p>
    </div>

    <div class="roundcorners box shadow resize gradient">
      <h2 class="textshadow">Transforming size</h2>
      <p>This is some text in the box</p>
    </div>

  </body>
</html>

The CSS:

/** Page Styles **/
body {
  margin: 0;
  padding: 50px;
  font-family: arial, helvetica, sans-serif;
  background-color: #fff;
}

h1 {
  font-weight: normal;
  font-size: 20px;
  color :#0086ed;  
}

h2 {
  font-weight: normal;
  font-size: 16px;
  color :#767542;  
  margin: 0;
  padding: 0 0 8px 0;
}

p {
  font-size: 13px; 
  margin: 0;
  padding: 0 0 5px 0;
}

/** Basic Box **/
div.box {
  width: 250px;
  margin: 0 0 20px 20px;
  padding: 10px;
  background-color: #f3f3ed;
  border-style: solid;
  border-color: #d2d2bf;
  border-width: 2px;
  float: left;
}

/** Rounded Corners **/
/* http://www.w3.org/TR/2005/WD-css3-background-20050216/#the-border-radius */
.roundcorners {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

/** Shadow **/
/* http://www.w3.org/TR/css3-background/#the-box-shadow */
.shadow {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
  -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
  -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.20);
}

/** Gradient Background - Webkit browsers only **/
.gradient {
  background: -webkit-gradient(linear, left top, left bottom, from(rgb(245,245,241)), to(rgb(217,216,201)));
}

/** Opacity **/
  .opacity {
  opacity: 0.5;
}

.opacity:hover {
  opacity: 1;
  -webkit-transition-property: opacity;
  -webkit-transition-duration: 1s;
}

/** Rotated **/
.rotated {
  transform: rotate(025deg);
  -webkit-transform:rotate(-25deg);
  -moz-transform:rotate(-25deg);
}

.rotated:hover {
  transform: rotate(0deg);
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -webkit-transition-property: rotate;
  -webkit-transition-duration: 1s;
}

/** Text Shadow **/
.textshadow {
  text-shadow: 2px 2px 3px rgba(0,0,0,0.30);
}

/** Resize **/
.resize:hover {
  transform: translate(10px, 10px) scale(1.5, 1.5);
  -moz-transform: translate(10px, 10px) scale(1.5, 1.5);
  -webkit-transform: translate(10px, 10px) scale(1.5, 1.5);
  -webkit-transition-property: transform;
  -webkit-transition-duration: 1s;
}

Attachment	Size
CSS3-Examples.tar.gz	1.22 KB