Development Tool: CSS3 PIE for Internet Explorer
Gone are the days of using images for rounded corners. With CSS3 PIE internet explorer can now use CSS3 awesomeness.
What is it?
Quite simply CSS3 PIE is a file that you include in your CSS definitions to enable CSS3 styling (rounded corners, shadows, etc.) Internet Explorer is one of the last browsers that doesn’t support it natively, either by browser specific hack or proper CSS3.
Creating Rounded Corners
Here is a quick demo to show how simple it is to implement the htc file.
HTML
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .sampleBox{ /* Initial Layout */ display:block; background:#014A8D; color:#fff; width:200px; height:200px; border:1px solid #000; /*Rounded Corners for Firefox*/ -moz-border-radius:10px; /*Rounded Corners for Safari / Chrome*/ -webkit-border-radius:10px; /*Standard CSS3*/ border-radius:10px; /*THE MAGIC...includes htc file for IE*/ behavior: url(PIE.htc); } .sampleBox:hover{ -moz-box-shadow: 5px 5px 5px #666; /* FF3.5 */ -webkit-box-shadow: 5px 5px 5px #666; /* Saf3.0 , Chrome */ box-shadow: 5px 5px 5px #666; /* Opera 10.5, IE 9.0 */ /* Don't need to include PIE here because it's inherited.*/ } |
There is a bit of a delay as the script is run, so it’s not completely seamless. Beggers can’t be choosers though. Also one thing I noticed while working with it, your element needs to be a block element. So if you’re have problems just throw up a display:block to fix any problems. Otherwise a great tool.
For more examples visit CSS3 PIE’s demo page
Be sure to check out the main site as well.