グラデーション

記述を理解。

IE、operaはグラデーションかからない。
svgを使用する。→ベクター系を扱える便利なもの。
キャンバスタグ。→ビットマップ系。
マイコミジャーナルを見ると良い。

/ * ▼グラデーション▼ * /
background: linear-gradient(#D1F0FF, #33A8EE);
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D1F0FF), to(#33A8EE));
background: -moz-linear-gradient(#D1F0FF, #33A8EE);

※IE用に『PIE.htc』ファイルを今回も使用。
また、OperaとIE9用にsvgファイルを使用します。
・参考サイト
http://journal.mycom.co.jp/articles/2010/11/09/ie9-svggradients-instead-of-css-gradients/index.html

/ * ▼グラデーション▼ * /
border:2px solid #ddd;
background: linear-gradient(#D1F0FF, #33A8EE);
background-image: url("gra.svg");/*Opera*/
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#D1F0FF), to(#33A8EE));
background: -moz-linear-gradient(#D1F0FF, #33A8EE);
-pie-background: linear-gradient(#D1F0FF, #33A8EE);
behavior: url(PIE.htc); /*IE*/

ロールオーバー時に透明度を下げる

透明度を変更する場合は『 opacity: 数値;』

数値の値は『0.0（完全に透明）～1.0（完全に不透明）』の間。

.opacity01:hover{
color:#fff;
/ * ▼透明度▼ * /
opacity: 0.7;
-moz-opacity: 0.7;
}

＝＝＝＝＝

※IE用filterプロパティ

＝＝＝＝＝

ただし、IEでは背景の透明度が下がらないようなので、

ボーダーの色を変更して擬似的に透明度を下げた表現をするようにする。
尚、htcファイルの指定をしていない場合は背景も透明になる。

.opacity01:hover{
color:#fff;
　　 border:2px solid #ddd;
/ * ▼透明度▼ * /
opacity: 0.7;
-moz-opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70)
progid:DXImageTransform.Microsoft.Shadow(Color='#999999',
Direction=135, Strength=2);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=70)"
"progid:DXImageTransform.Microsoft.Shadow(Color='#999999',
Direction=135, Strength=2)";　

}

テキストシャドウ

IE以外は対応。
かんたん。

※テキストシャドウを適応させる場合は
『text-shadow:(水平方向の距離) (垂直方向の距離) (影のぼかし半径) (影の色) ;』
ボックスシャドウと同様に、スペース区切りで値を指定する。

/ * ▼テキストシャドウ▼ * /
text-shadow: 1px 1px 3px #999;

※IE用にfilterプロパティを使用したが、、
htcファイルを指定している場合にIE6でテキストが表示されなくなる。
ターゲットブラウザにIE6がある場合で、
このサンプルを使用する場合はクラスを親要素に指定する必要がある。
尚、今回使用した『PIE.htc』はテキストシャドウ、
『ie-css3.htc』ファイルはグラデーションに対応していないが、
テキストシャドウに対応している。

filter: progid:DXImageTransform.Microsoft.Shadow(Color='#999999', Direction=135,
Strength=2);/*IE5.5～7*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Color='#999999',
Direction=135, Strength=2)";/*IE8*/

ボックスシャドウ

※IE用にWindows版Internet Explorerが独自に追加したプロパティfilterを使用。

filter:progid:DXImageTransform.Microsoft.フィルタ名(必要な値) で指定。

今回は『Shadow()ぼかしのある影をつける』を使用。

指定する値は3つ。

Color=影の色
Strength=影の強さ
Direction=影の方向

※IE用に『PIE.htc』を使用。

【 C S S 】

filter: progid:DXImageTransform.Microsoft.Shadow(Color='#999999', Direction=145,
Strength=3);/*IE5.5～7*/
-ms-filter: "progid:DXImageTransform

角丸

/*角丸にする*/
border-radius: 10px;
-webkit-border-radius:10px;/*Chrome safariで閲覧可能にする*/
-moz-border-radius:10px;/*firefoxで閲覧可能にする*/
behavior: url(PIE.htc); /*IEで閲覧可能にする*/

IEの問題。

colisさんで紹介されている方法２種類でIEから閲覧で可能になる。

http://coliss.com/articles/build-websites/operation/css/css3pie-decorations-for-ie.html

ジェネレーターがついてる。
ソースがでてくる、わかりやすい。
サポートされてない部分がある。

http://coliss.com/articles/build-websites/operation/javascript/js-ie-css3-2.html

JSのcurvycornerを使うときれいな角丸になる。