css3pie module is a simple wrapper around the css3pie library from http://css3pie.com.

How to install?

7.x-2.x
Install and activate css3pie, libraries and ctools modules. Download the PIE Library from http://css3pie.com and extract it to sites/all/libraries/PIE
6.x-1.x
Install and activate css3pie and libraries modules. Download the PIE Library from http://css3pie.com and extract it to sites/all/libraries/PIE

Important!

Please don't hijack and use this project issues for CSS questions. This is not the right place for CSS support. Instead use the official CSS3 PIE forum or drupal.org forum!

Why?

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

CSS3 promises to do away with all that! But as we all know, due to Internet Explorer’s lack of support for any of these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for the foreseeable future.

What?

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties. Consider, if you will, the following CSS in your theme:

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

This results is a box with nicely rounded corners in any of today’s modern browsers, except of course in IE 6, 7, or 8, which all display a square box. However, add the following single rule to the CSS:

#myElement {
    ...
    behavior: url(PIE.htc);
}

Now the exact same rounded corners appear in IE!

What is the purpose of this module?

Instead of implementing the PIE library in your theme and put the additional CSS code in your themes css you can use this module. You can use either the UI, theme .info file support or hook_css3pie() to add the needed selectors. The module will create an extra CSS file and add it to Drupal css array in a preprocess. The CSS will be recreated every time you save the settings or recreated if needed when caches get flushed (only 7.x version).

7.x-2.x

7.x-2.x branch is where the active development is happening. All the new functionality will be made in to this branch.

6.x-1.x

6.x-1.x branch is only minimally maintained. Only vital functionality that we see as needed and bug or security fixes will be committed to this branch.

Project Information

Downloads