CSS3 has become popular with the latest web browser releases and is increasingly being incorporated into web site designs, however, these features do not work in the older versions of Internet Explorer (IE). While we all would love for everyone to upgrade to at least IE9, many people are stuck with IE7 or 8 due to not being able to upgrade to Windows Vista or 7 at this time. CSS3Pie is a library created to help solve the issue of displaying CSS3 properties in IE6-8.

CSS3 Pie has become a popular library for the display of CSS3 properties. The properties available for use in IE are border-radius, box-shadow, border-image, css3 backgrounds, gradients, and several other properties specific to the CSS3Pie library. We have used several of these properties in creating a Drupal theme from a Photoshop comp.

Border Radius

Let's start by taking a look at the border-radius property.

Examples:

border-radius: 10px; 
border-radius: 0 10px 0 10px;

The first example will apply a 10px rounded corner to each corner of the element. The second example will apply only to the upper right and lower left corners. When including four parameters to the property, the ordering is defined as follows:

border-radius: top-left top-right bottom-right bottom-left;

The image below shows the border-radius property in action.

Box Shadow

Box-shadow is another useful property of CSS3.

Example:

-webkit-box-shadow:#555 5px 5px 20px; 
-moz-box-shadow:#555 5px 5px 20px; 
box-shadow:#555 5px 5px 20px;

The webkit and moz box-shadow properties are necessary for rendering on firefox, chrome, and safari. The first item is the color of the shadow, represented in hexadecimal notation, and the other three represent the size of the shadow.

The above image displays the use of the box-shadow property surrounding the slideshow element.

Gradients

Gradients are a very popular CSS3 property. An example is:

background:#8b8b8d; 
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#828183), to(#8b8b8d)); 
background:-webkit-linear-gradient(#828183, #8b8b8d); 
background:-moz-linear-gradient(#828183, #8b8b8d); 
background:-ms-linear-gradient(#828183, #8b8b8d); 
background:-o-linear-gradient(#828183, #8b8b8d); 
background:linear-gradient(#828183, #8b8b8d); 
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#828183, endColorstr=#8b8b8d); 
-ms-filter:'progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#828183,endColorStr=#8b8b8d)'; 
-pie-background:linear-gradient(#828183, #8b8b8d);

It can take quite a lot of CSS code to have gradients render properly across all browsers. Not all browsers support gradients via CSS and each browser implements it differently. Each background line of code above applies gradients to a different browser. The pie-background property is used to apply more complex gradients to IE, such as those including radial gradients or color stops.

In the image above, a small gradient is used at the top of the grey box.

Implementing CSS3 Properties Using CSS3 Pie

Up until now, we have shown you how to use a few of the CSS3 properties we have used in our projects. Now, we will take a look at how to apply CSS3Pie to these elements.

#node-43 div.panel-col-top div.inside, div.nav-header { 
  position:relative; 
  behavior:url("sites/all/themes/ilyb/css/PIE.htc"); 
}

The above code is an example implementation of how to include CSS3Pie into your projects. Each element with a CSS3 property is listed, then the additional properties are applied. The behavior property is used to load the CSS3Pie library. Make sure to set the path to the htc file from the web root. The position relative property is used to make sure the bahaviors are applied properly in IE7.

Tags