CSS3 PIE

CSS3 for IE with PIE

PIE stands for “Progressive Internet Explorer”, and is capable to add support for the most useful, cool CSS3 features, to the old and grumpy internet explorer (6, 7 and 8), and make your life easier.

Look and this page ( http://www.antimath.info/demos/csspie/ ) in internet explorer, … border-radius, box-shadow, background gradient, …good bye images and useless markup, hello PIE.

.element {
   width: 250px;
   height: 150px;
   line-height: 150px;
   font-style: italic;
   text-align: center;

    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: #444 0 0 10px;
    -moz-box-shadow: #444 0 0 10px;
    box-shadow: #444 0 0 10px;

    background: #CCC; /*non-CSS3 browsers will use this*/
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#BEE224) to(#E9F648)); /*old webkit*/
    background: -webkit-linear-gradient(#BEE224, #E9F648); /*new webkit*/
    background: -moz-linear-gradient(#BEE224, #E9F648); /*gecko*/
    background: -ms-linear-gradient(#BEE224, #E9F648); /*IE10 preview*/
    background: -o-linear-gradient(#BEE224, #E9F648); /*opera 11.10+*/
    background: linear-gradient(#BEE224, #E9F648); /*future CSS3 browsers*/
    -pie-background: linear-gradient(#BEE224, #E9F648); /*PIE*/

    behavior: url(pathTo/PIE.htc);
}

CSS3 PIE supports:

  • border-radius
  • box-shadow
  • border-image
  • multiple background images
  • linear-gradient as background image

See more on css3pie.com