border-radius, box-shadow, linear-gradient in IE

By Tom Butler

CSS3 In IE Demo page

This is a demo page for my CSS3 in Internet Explorer HTC file. It enables support for several CSS3 styles in Internet Explorer (Tested 7+);

The -css3-background property

rgba

-css3-background: rgba(0,255,0,0.5);

linear-gradient

-css3-background: linear-gradient(90deg,black,white)
-css3-background: linear-gradient(45deg,#00ff00,#ff0000)

text-shadow

Text Shadow Example 1 - Single Shadow

text-shadow: 5px 5px 4px #888;

Text Shadow Example 2 - Multiple shadows

text-shadow: 0 0 4px white, 0 -5px 4px #FFFF33, 2px -10px 6px #FFDD33, -2px -15px 11px #FF8800, 2px -25px 18px #FF2200;

border-radius

Same for all 4 corners

border-radius: 20px; background-color: #B8C4F2

Different radius for each corner

border-radius: 20px 0px 5px 10px; background-color: #B8C4F2

box-shadow

Shadow offset 10px

box-shadow: 10px 10px 10px #888; background-color: #B8C4F2

coloured shadow, no offset

box-shadow: 0px 0px 10px #ff0000; background-color: #B8C4F2

Mixing them up

box-shadow: 10px 10px 10px #888; border-radius: 20px; -css3-background: linear-gradient(45deg,#00ff00,#ff0000)

Unfortunately due to the way that the shadow has to be rendered, shadow + rbga background does not work as it does in Gecko or Webkit (you can see the shadow through the background). In Gecko and Webkit, the blocked parts of the shadow are invisible. Unfortunately, I don't believe it's possible to fix this.

box-shadow: 10px 10px 10px #888; -css3-background: rgba(0,255,0,0.5);

Change aware

Changes made by javascript (including jquery and existing scripts) will work as expected. The effects are redrawn. However, this is slow. It will not work well in a timeout.

onclick="this.style.width='400px'";
me

Tom Butler

27 year old Web Developer, Ph.D student and part time University Lecturer based in Milton Keynes, UK. Interests: Programming, best practices, PC Gaming, live music, gradually improving at Flying Trapeze.