Playing with CSS3

Submitted by gary.turner on Wed, 2009-05-20 20:28

CSS3 offers some serious opportunities for mis-use with the transform and transition properties. Likewise, there are serious opportunities for really visually cool renderings.

As far as I can tell, only Firefox3.1+ (v3.5b) (Gecko 1.9.1b4) and Safari4b support the transforms, and only Safari4b supports transitions. Both browsers use proprietary prefixes for the draft properties; -moz- and -webkit-. In the sample page below, I added prefixes for Opera and IE and the un-prefixed property in order to cover all bases.

Have fun with this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml"
      xml:lang="en">
<head>
  <meta name="generator"
        content=
        "HTML Tidy for Linux (vers 7 December 2008), see <a href="http://www.w3.org" rel="nofollow">www.w3.org</a>" />
  <meta http-equiv="Content-Type"
        content="text/html; charset=utf-8" />
  <meta name="creation date"
        content="20 May, 2009" />
  <meta name="author"
        content="Gary Turner" />
 
  <title>Playing with CSS3</title>
 
  <style type="text/css">
/*<![CDATA[*/
 
  html,
  body {
    margin: 0;
    padding: 0;
    font: 100% sans-serif;
    }
 
  ul {
    list-style: none;
    margin: 1em 0 0;
    text-align: center;
    }
 
  li {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    border: 1px solid black;
    display: -moz-inline-box;
    display: inline-block;
    margin-left: -1px;
    vertical-align: middle;
    word-spacing: 0;
    }
 
  * html li {
    display: inline;
    }
 
  *+html li {
    display: inline;
    }
 
  a {
    display: block;
    padding: .6em;
    background-color: blue;
    color: #fff;
    text-decoration: none;
    -moz-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    -ms-transition-duration: 2s;
    transition-duration: 2s;
    }
 
  a:hover {
    background: #fff;
    color: #009;
  }
 
#google {
    width:500px;
    height:500px;
    -moz-transform:
        translate(250px, 125px)
        rotate(30deg)
        skew(20deg);
    -webkit-transform:
        translate(250px, 125px)
        rotate(30deg)
        skew(20deg);
    -o-transform:
        translate(250px, 125px)
        rotate(30deg)
        skew(20deg);
    -ms-transform:
        translate(250px, 125px)
        rotate(30deg)
        skew(20deg);
    transform:
        translate(250px, 125px)
        rotate(30deg)
        skew(20deg);
    }
 
#wiki {
    width:500px;
    height:500px;
    -moz-transform:
        translate(50px, 80px)
        rotate(-50deg)
        skew(-20deg); 
    -webkit-transform:
        translate(50px, 80px)
        rotate(-50deg)
        skew(-20deg); 
    -o-transform:
        translate(50px, 80px)
        rotate(-50deg)
        skew(-20deg); 
    -ms-transform:
        translate(50px, 80px)
        rotate(-50deg)
        skew(-20deg); 
    transform:
        translate(50px, 80px)
        rotate(-50deg)
        skew(-20deg); 
        }
 
  /*]]>*/
  </style>
</head>
 
<body>
  <h1>Showing off with CSS3</h1>
 
  <ul id="navbar">
    <li><a href="#">Link One</a></li>
 
    <li><a href="#">Link Two
    <br />
 
    on two lines</a></li>
 
    <li><a href="#">Link Three running on a bit</a></li>
 
    <li><a href="#">Link Four</a></li>
 
    <li><a href="#">Link Five</a></li>
  </ul>
 
  <p><object id="google" type="text/html"
 
          data="http://google.com"></object><br />
 
  <object id="wiki" type="text/html" 
          data="http://wikipedia.org"></object></p>
</body>
</html>

cheers,

gary

Oi!!! I wanted to see the

I'm sure I have no idea what

what happened?

User login

Navigation