Friday, February 15, 2013
Render CSS3 in Internet Explorer using CSS3 Pie
Today i'm going to introduce an awesome frame work of CSS3 which is know as CSS3 Pie, which is developed by Sencha.Inc. This frame work is really very useful for Web Developers, Who want to run CSS3 Properties in Internet Explorer. Properties like : Shadow Effect, Rounded Corners, Gradients etc.
In this post i'll review CSS3 Pie and show you some examples of using it.
In this post i'll review CSS3 Pie and show you some examples of using it.
The official site for the Frame work is www.css3pie.com. When you will land on the home page, you can try the demo. I'll recommend you to use the demo in IE, then you will understand the effect of using the Frame work.
Now let's begin to use the frame work. Simply Download the frame work from www.css3pie.com/download. Download PIE1.0.0, you can also download PIE2.0 beta 1. But still it's in Beta mode so i'll prefer you to use it after the official launch of PIE2.0.
After downloading the frame work, Extract the files form the .zip. You should have 3 to 5 files inside the Directory / Folder. Now look at the file PIE.htc simply copy it and paste it inside your website directory or copy all files inside the directory and paste it inside you website directory. After pasting it don't forget to call it correctly inside the css style sheet.
Ok, now i'll show you how to create rounded corners which will work in Internet explorer. We will include PIE.htc file.
HTML Code : For making simple Box with DIV.
<div class="mydiv">
</div>
After adding this simple HTML Markup. Let us design the DIV.
CSS Code : For making Rounded corners to work in IE.
.mydiv {
behavior: url(PIE.htc);
border-radius: 15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
width:500px;
height:500px;
background-color:#D6D6D6;
}
Use this code and run you website in Internet Explorer. After running it, you will have rounded corners to a div.
We are calling PIE.htc with a property Behavior.
Next we are simply making our border rounded with border-radius property.
Then we are using -webkit- and -moz- for making it work on IE and Firefox, It's isn't much necessary to add those property, But it will be better if you will add it. Most of time i use those properties.
I'm adding width and height for making the box big in size. Then i'm adding background color to it.
Alright, we are done over here i showed you guys an example of creating rounded corners which are working perfectly in IE. You can use the same technique for adding box shadow and gradient. Just try to do some more experiments, and don't forget to see their documentation page which is really very helpful to learn how to use CSS3Pie. CSS3Pie is still not well developed if you find any bug or any problem don't forget to report them to the CSS3Pie team.
What you think about this post, Don't forget to share it through comments!
Also like our new Facebook Page : Like us on FB
Also Follow us on twitter : Follow us on Twitter
Subscribe our news and feeds!.
After downloading the frame work, Extract the files form the .zip. You should have 3 to 5 files inside the Directory / Folder. Now look at the file PIE.htc simply copy it and paste it inside your website directory or copy all files inside the directory and paste it inside you website directory. After pasting it don't forget to call it correctly inside the css style sheet.
Ok, now i'll show you how to create rounded corners which will work in Internet explorer. We will include PIE.htc file.
HTML Code : For making simple Box with DIV.
<div class="mydiv">
</div>
After adding this simple HTML Markup. Let us design the DIV.
CSS Code : For making Rounded corners to work in IE.
.mydiv {
behavior: url(PIE.htc);
border-radius: 15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
width:500px;
height:500px;
background-color:#D6D6D6;
}
Use this code and run you website in Internet Explorer. After running it, you will have rounded corners to a div.
We are calling PIE.htc with a property Behavior.
Next we are simply making our border rounded with border-radius property.
Then we are using -webkit- and -moz- for making it work on IE and Firefox, It's isn't much necessary to add those property, But it will be better if you will add it. Most of time i use those properties.
I'm adding width and height for making the box big in size. Then i'm adding background color to it.
Alright, we are done over here i showed you guys an example of creating rounded corners which are working perfectly in IE. You can use the same technique for adding box shadow and gradient. Just try to do some more experiments, and don't forget to see their documentation page which is really very helpful to learn how to use CSS3Pie. CSS3Pie is still not well developed if you find any bug or any problem don't forget to report them to the CSS3Pie team.
What you think about this post, Don't forget to share it through comments!
Also like our new Facebook Page : Like us on FB
Also Follow us on twitter : Follow us on Twitter
Subscribe our news and feeds!.
Subscribe to:
Post Comments (Atom)
the Best post ever i read on the web
ReplyDeletegreat post man thanks a lot :)
ReplyDeleteYour welcome! :D
Deletelovely! - jordan
ReplyDeleteYour Blog really helpful i loved all the posts, but only one query, why you only HTML, CSS tutorials, why not you show PHP or JAVA Script tutorials ?
ReplyDeleteI'm not making PHP tutorials, because for that i'll require a server to host PHP scripts, and for web servers i'll need to buy it. I'm saving money for it, soon PHP tutorials will also be available :D
DeleteThanks for your response!