Tag Archives: ie

CSS3 Pie (Make CSS3 work in IE)

No matter how irritating it is to have to worry about making your designs work in Internet Explorer, if you want to be a decent web designer, you need to account for IE. Over half of web users still use some version of it, and unless you know the web audience targeted won’t be using IE, you should try to make sure your website looks at least nice and acceptable in IE. It does not need to look exactly the same, however.

A great little plug-in to bridge the IE gap and bring a few of the important CSS3 properties to that browser is called CSS3 Pie. It makes the following properties work in IE browsers:

  • border-radius
  • gradient (linear only)
  • box-shadow
  • multiple background images

CSS3 Pie is a simple download with one file that you add to the home directory of your website. It can actually be added in a subdirectory, but if you don’t put it in your home directory, the url in the snippet will need to be changed.

Once you have added this file to the root directory, all you need to do to make the CSS work is the following snippet of code after your other CSS3 code:
behavior: url(PIE.htc);
position: relative; /* This fixes a z-index problem, but may not be necessary */

The path of your url may need to be different. It is important that the path is correct relative to your HTML pages, and not your CSS page. I have had a little bit of trouble getting CSS3PIE to work correctly for all the sup pages when using Word Press. Putting PIE in root directory and using a path of (/PIE.htc) is working best for me with WordPress.

Explanation

CSS3 Pie is an easy to use utility, but you may have issues getting it to work. My experience has been good as long as I use relative positioning.

Sometimes if you don’t add the line making the selector have relative positioning, the objects you are applying the CSS3 property will disappear. There may be times when using relative positioning won’t work for you. If that is the case, please read the troubleshooting page for more explanation on common issues with CSS3Pie.

Always test your work on an Internet Explorer browser, versions 6, 7 or 8, to make sure that things are working the way you want.

CSS3Pie does not work with IE9, but those CSS3 properties already work in IE9.

Be sure to check out the Known Issues page, if you are having any trouble. There is also a User Forum for additional help. Overall, the entire web-site is full of great info and help, so make sure to explore if you want to learn more.

Engraved Text with CSS

An engraved text effect (where text appears lower than the surface) can be done with the CSS3 property text-shadow.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

See the Pen Engraved Text by Lisa (@lisa_c) on CodePen.

Explanation

The parameters of text-shadow are listed below in the order they must appear in your CSS.

Horizontal Offset

For this effect, leaving the horizontal offset at 0 allows the shadow to come from one direction only (vertically) which provides a cleaner look and better effect.

Vertical Offset

When using the darker text on a medium background, it usually works best to use a lighter shadow coming from below. This makes the text look like it is lower than the surface. When using lighter colors, a darker shadow coming from above, gives the same effect. Making the shadow come from above is achieved by using a -1 in the Vertical offset.
text-shadow: 0px -1px 0px rgba(0,0,0,.5);

Blur Radius

You don’t want any blur on the shadow for this effect, so the value is 0.

Color

The last value is the color of the shadow. I am using RGBA colors, which is a combination of the R, G, and B values (you can get these from the Photoshop Color Picker) and the Alpha Transparency. All browsers that support text-shadow also support RGBA values.

You don’t need to use RGBA values; you could try a medium-dark grey color in this example instead. However, using transparency for the shadow, will allow some of the original color to shine through and generally provides a nicer effect. This is especially useful when you are using this effect on colors.

Two Part Shadows

You can sometimes get even better results by using two text-shadows on the text – one dark shadow and one light shadow. You can specify two different shadows on your elements by separating them with a comma. I have found that two shadows are not usually necessary when using greys, but they can be useful with colors.

The third example in color has just one shadow:
text-shadow: 0px 1px 0px rgba(255,255,255,.5);

In the fourth example, I used two shadows, and different opacities, with better results.
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);

Browser Support

This works in all modern browsers. It does not work in IE9 and below.

There is a filter property than can be used on Internet Explorer, that sometimes works, but sometimes produces ugly results. You can experiment and try to find some values that work.

If you would like to read more about using IE shadows to try to make it work, try these articles: Drop Shadow on all Browsers and RGBA Generator of IE

To support IE browsers, you must choose from the following:

  1. Make sure the text looks fine without the Inset effect. This means making sure there is enough contrast between the text color and background color.
  2. Create an image of your inset text headers, and apply them as background-images in style sheet specific to IE only. If you do this, you may decide to skip the CSS solution altogether. However, CSS solutions mean less images to download, so there is a savings for using CSS when you can.
  3. Try using the filter commands for IE, but make sure to text and see if things still look OK.

What text will look like in IE. Make sure things are still legible.