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
Leave a Reply