Posted By

maetmar on 04/17/11


Tagged


Versions (?)

CSS3 Features for IE6-8


 / Published in: JavaScript
 

URL: http://css3pie.com/

  1. Step 1: Download it
  2.  
  3. Download the PIE distribution and unzip it somewhere.
  4.  
  5. Step 2: Upload it
  6.  
  7. Inside the unzipped directory, you will find a file named PIE.htc. This is the behavior file for IE, and is what does all the magic. Upload this file to the server where you're going to serve pages using CSS3. It doesn't matter where exactly, as long as you know where it is.
  8.  
  9. Step 3: Write some CSS3
  10.  
  11. Assuming you already have a HTML document, let's say you want to give one of its elements rounded corners. Create a CSS rule for that element and give it a border-radius style like so:
  12.  
  13. #myAwesomeElement {
  14. border: 1px solid #999;
  15. -webkit-border-radius: 10px;
  16. -moz-border-radius: 10px;
  17. border-radius: 10px;
  18. }
  19. (Note the -webkit- and -moz- prefixed versions; these are necessary to make the rounded corners work in WebKit and Mozilla-based browsers.)
  20.  
  21. Step 4: Apply PIE
  22.  
  23. In that same CSS rule, add the following style line:
  24.  
  25. behavior: url(path/to/PIE.htc);
  26. Of course you will need to adjust the path to match where you uploaded PIE.htc in step 2. Note: this path is relative to the HTML file being viewed, not the CSS file it is called from.

Report this snippet  

You need to login to post a comment.