Getting Started Steps

• Expression Web 3
• Expression Web 4

 

• HTML 5
• Scrolling Text Box
• CSS for Beginners
• CSS3 Rounded Corners

Would You Like some PIE to go with your CSS3?

What is PIE? 

PROGRESSIVE INTERNET EXPLORER

PIE is a simple solution that makes IE 6, 7 & 8 render CSS 3 effects as you specify in your CSS Style Sheet.

 

A Little History....

CSS 3 is a fairly new, Modular version of CSS.  With CSS 3, we can add effects to HTML Elements quite easily.  For instance, we can round the corners of divs without the use of any graphics or image, we can also add linear gradients..  All we need is CSS 3.

We can also add a drop shadow (box shadow) to Elements using CSS 3.  And more.....   which we will cover shortly. 

But, the Problem with CSS 3 has been lack of support in Internet Explorer.  CSS 3 effects will not render in IE at all.  However, it is projected that IE 9 will support some of the CSS 3 specifications. 

That is great news, but falls a bit short.  We know that IE 9 will not find its way into everyone's PC overnight.  This means, many people will continue using IE 7 and 8 for years to come.  Therefore, we need a way to make CSS 3 render in all browsers.

That Way is PIE.

Keep reading.....there's more to it!

CSS 3 Effects and PIE Support:  An Overview

The Following Properties are Supported by PIE

• 1.  border-radius   [Rounded Corners]
• 2.  box-shadow - adds a drop shadow to an element.
• 3.  border-image -  uses an image for a border
• 4.  pie-background-  multiple backgrounds for the same element, as well as Linear Gradients.

Border-Radius and Box-Shadow will be the properties we will focus on here.  Later on, I will add the other tutorials.  But first, we need to look at how PIE works.  And what is PIE?

We Said PIE was.....

PIE stands for Progressive Internet Explorer.

PIE forces Internet Explorer to render CSS3 properties.  It does so by attaching PIE to the CSS3 properties.

For instance, you will be shown how to download PIE files.  One particular file, PIE.htc will need to be added as a property value pair to the element in which we apply CSS3 properties. 

 

Example: To Round all 4 corners of the Container:

 

Download the Files Needed for PIE

This is a very new project.  And it seems to have some bugs in it.  But go to http://css3pie.com/ for help if necessary.