IEはCSS3に対応していませんでした。

IE6対応に関するサンプルの続きです。

角を丸めるborder-radius、透明度を操作するopacity、テキストに影を付けるtext-shadow、ボックス要素に影を付けるbox-shadow、グラデーションを表現するgradient。どれもCSS3を使えばとってもカンタンですよね:)。
けどIE6〜IE8は、CSS3に対応していませんでした…。:(
解決策としては以下の通り。

ここではできる限り、IE独自のfilterプロパティを使って対応しています。

以下は目次です。クリックするとその項目へ移動します。

  1. 角丸を表現する

  2. 透明度を表現する

  3. テキストに影を付ける

  4. ボックス要素に影を付ける

  5. グラデーションを表現する

  6. 背景の透明度を変える

  7. 透過PNGに透明度を与える

  8. 要素を回転させる

  9. 要素を反転させる

  10. グレースケールで表示する

  11. 縦書きと縦中横

角丸を表現する

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>border-radius: 1em;</p></div>
<div class="ie"><div class="inner"><p>画像使って表現</p></div></div>
</div>
.css3 {
  margin: 10px; padding: 10px; border: 10px #ccc solid; background: white;
  border-radius: 1em;
}

.ie {
  margin: 10px;
  padding-top: 20px;
  background: url(radius_top.gif) left top no-repeat;
}
.ie .inner {
  padding-bottom: 20px;
  background: url(radius_btm.gif) left bottom no-repeat;
}
.ie .inner p {
  width: 740px;
  padding: 0 10px;
  border-right: 10px #ccc solid;
  border-left: 10px #ccc solid;
  background: white;
}
* html .ie .inner p { width: 780px; }

border-radius: 1em;

画像使って表現

radius

透明度を表現する

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>opacity: 0.5;</p></div>
<div class="filter"><p>filter: alpha(opacity=50);</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; background: white; }
.css3 {
  opacity: 0.5;
}
.filter {
  position: absolute; width: 740px; height: 1.6em;
  filter: alpha(opacity=50);
}
* html .filter { width: 780px; }

opacity: 0.5;

filter: alpha(opacity=50);

opacity

テキストに影を付ける

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>text-shadow: 0 1px 2px rgba(0,0,0,0.5);</p></div>
<div class="filter"><p>filter: dropshadow(Color="#33000000", Positive=1, OffX=1, OffY=1);</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; }
.css3 {
  color: #393939;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.filter p {
  position: absolute; width: 740px; height: 1.6em; color: #393939;
  filter: dropshadow(Color="#33000000", Positive=1, OffX=1, OffY=1);
}
* html .filter p { display: block; }

text-shadow: 0 1px 2px rgba(0,0,0,0.5);

filter: dropshadow(Color="#33000000", Positive=1, OffX=1, OffY=1);

text_shadow

ボックス要素に影を付ける

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>box-shadow: 0 1px 5px rgba(0,0,0,0.5);</p></div>
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.Shadow(Color="gray", Direction="135", Strength="3");</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; background: white; }
.css3 {
  box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.filter {
  position: absolute; width: 740px; height: 1.6em; border-color: white;
  filter: progid:DXImageTransform.Microsoft.Shadow(Color="gray", Direction=135, Strength=3);
}
* html .filter { width: 780px; }

box-shadow: 0 1px 5px rgba(0,0,0,0.5);

filter: progid:DXImageTransform.Microsoft.Shadow(Color="gray", Direction="135", Strength="3");

box_shadow

グラデーションを表現する

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>background: linear-gradient(left 45deg, red, violet);</p></div>
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorstr="red", EndColorstr="violet");</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; background: white; }
.css3 {
  color: #ccc;
  background: linear-gradient(left 45deg, red, violet);
}
.filter {
  position: absolute; width: 740px; height: 1.6em; color: #ccc;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorstr="red", EndColorstr="violet");
}
* html .filter { width: 780px; }

background: linear-gradient(left 45deg, red, violet);

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorstr="red", EndColorstr="violet");

gradient

背景の透明度を変える

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>background: rgba(254,236,2,0.5);</p></div>
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.Gradient(StartColorstr="#80feec02", EndColorstr="#80feec02");</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; }
.css3 {
  background: rgba(254,236,2,0.5);
}
.filter {
  position: absolute; width: 740px; height: 1.6em;
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorstr="#80feec02", EndColorstr="#80feec02");
}
* html .filter { width: 780px; }

background: rgba(254,236,2,0.5);

filter: progid:DXImageTransform.Microsoft.Gradient(StartColorstr="#80feec02", EndColorstr="#80feec02");

bg_opacity

透過PNGに透明度を与える

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents" style="height: 128px">
<div class="css3"><p><img src="lopan.png" alt="パンちゃん" width="128" height="128" /></p></div>
<div class="filter"><p><img src="lopan.png" alt="パンちゃん" width="128" height="128" /></p></div>
</div>
.css3 {
  opacity: 0.5;
}
.filter, .filter p {
  position: absolute;
  width: 128px; height: 128px;
}
.filter {
  top: 0; right: 0;
  filter: alpha(opacity=50);
}
.filter p {
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="lopan.png");
}
* html .filter p { text-indent: -999em; }

パンちゃん

パンちゃん

alpha_image

要素を回転させる

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="css3"><p>transform: rotate(180deg);</p></div>
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; background: white; }
.css3 {
  transform: rotate(180deg);
}
.filter {
  position: absolute; width: 740px; height: 1.6em;
  filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);
}
* html .filter { width: 780px; }

transform: rotate(180deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);

rotate

要素を反転させる

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.BasicImage(Mirror=1);</p></div>
</div>
.css3, .filter { margin: 10px; padding: 10px; border: 10px #ccc solid; background: white; }
#ie-css3 .mirror .contents .css3 {
  transform: scaleX(-1);
}
.filter {
  position: absolute; width: 740px; height: 1.6em;
  filter: progid:DXImageTransform.Microsoft.BasicImage(Mirror=1);
}
* html .filter { width: 780px; }

transform: scaleX(-1);

filter: progid:DXImageTransform.Microsoft.BasicImage(Mirror=1);

mirror

グレースケールで表示する

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents" style="height: 86px">
<div class="filter"><p>filter: progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1);</p></div>
</div>
.filter {
  margin: 10px; padding: 10px; border: 10px #ccc solid;
  position: absolute; width: 740px; height: 1.6em; color: white; background: url(background.jpg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1);
}
* html .filter { width: 780px; }

filter: progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1);

gray_scale

縦書きと縦中横

  • HTML
  • CSS
  • PREVIEW
  • IE6 VIEW
<div class="contents">
<p>縦書きのサンプル<br>縦中横→平成<span class="tcy">24</span>年</p>
</div>
.contents {
  width: 800px;
}
p {
  writing-mode: tb-rl;
  direction: ltr; /* Left To Right */
  unicode-bidi: bidi-override; /* 右から左に表記 */
}
.tcy {
  layout-flow: horizontal;
}

縦書きのサンプル
縦中横→平成24

horizontal

ページの一番上へ