2014年04月10日

linear-gradient()関数 css3

スポンサード リンク

 CSS3 linear-gradient() 関数は、色の線形グラデーションを生成します。

このサンプルは色が「上から下」 へ と「左から右」へ と色が替わっていく
最も簡単な線形グラデーションです。

赤紫 黄 緑

赤紫 黄 緑

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>css3 linear-gradient()関数</title>
<style type="text/css">
.gradBox{ /* 線形グラデーション描画ボックス */
   text-align: center;line-height: 100px;/*文字中央配置 無くても可*/
   width:500px; 
   height:100px;
        }
div#gradBox1{ /* 上から下へ 垂直線形グラデーション(赤紫 黄 緑)*/
   background :-webkit-linear-gradient(top,fuchsia,yellow,green);/* Chrome,Safari*/
   background :   -moz-linear-gradient(top,fuchsia,yellow,green);/* Firefox */
   background :     -o-linear-gradient(top,fuchsia,yellow,green);/* Opera */
   background:         linear-gradient(to bottom,fuchsia,yellow,green);/* 標準 */
    }
div#gradBox2{ /* 左から右へ 水平線形グラデーション(赤紫 黄 緑)*/
   background : -webkit-linear-gradient(left,fuchsia,yellow,green);
   background :    -moz-linear-gradient(left,fuchsia,yellow,green);
   background :      -o-linear-gradient(left,fuchsia,yellow,green);
   background:          linear-gradient(to right,fuchsia,yellow,green);
    }
 </style>
</head>
<body>
   <div id="gradBox1" class="gradBox">赤紫 黄 緑</div>
     <br />
   <div id="gradBox2" class="gradBox">赤紫 黄 緑</div>
</body>
</html>
対応ブラウザ
vendor-prefix  ブラウザ
-moz- Firefox3.6〜
-webkit- Chrome10〜, Safari5〜
-o- Opera11〜
-ms- For pre-releases of IE10
vendor-prefix
無し
IE10〜,Chrome26〜, Firefox16〜
Safari6.1〜, Opera12.1〜
linear-gradient()関数、 構文
この関数はbackground-imageプロパティと、background プロパティの値としてのみ、設定可能です。
background:linear-gradient(方向|角度 ,開始色 位置,中間色 位置,終了色 位置)
└ カラーストップ
方向キーワード  'topbottom left right'
プレフィックス有り、レガシーな構文
-prefix-linear-gradient
プレフィックス無し、標準構文
linear-gradient
キーワード は開始点を指定。
例えば'top'なら上を基点として下に
'right bottom' なら右下角から開始して左上
角に向かうグラデーションになります。
キーワードの前に'to'を置き、方向を指定
'to left top'ならボックスの中心点を通って、
左上方向へと向かうグラデーションになります。
詳細はIE10 CSS3 グラデーション
  • -prefix-linear-gradient(
    right bottom, red,yellow,green)
  • linear-gradient(
    to left top, red,yellow,green)
 グラデーション線の向きが違います。かなりややこしいのでlinear-gradient -- CSS | MDN
角度の方向
0deg は右に向かうグラデーション線です。
角度は反時計回りに大きくなります。
キーワード top,right,bottom,left
角度 270deg,180deg,90deg,0deg になります。
  ↑
 90deg

← 180deg    0deg  →

270deg
0deg は上に向かうグラデーション線です。
角度は時計回りに大きくなります。
to top,to right,to bottom,to left
角度 0deg,90deg,180deg,270deg になります。
 
 0deg


← 270deg   90deg  →

180deg
  •  -prefix-linear-gradient(
    90deg, cyan,red)
  • linear-gradient(
    90deg, cyan,red)
方向キーワードや角度を省略すると、どちらの構文でも、上から下へのグラデーション線になります。
カラーストップ ( 色 , 位置 )
 開始色と終了色は必須です。そしてこの間にカラーストップを追加してグラデーションの
中間色を指定することができます。
  • -prefix-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  • linear-gradient(to right,red,orange,yellow,green,blue,indigo,violet);
レインボー カラー
規定値では色は均等に配分されますが、位置を指定することによって変更することができます。
新旧構文とも書式は同じです。
位置は省略することができます。(開始色 0% , 終了色 100%)これがデフォルトです。
デフォルト:中間色 #ff0 が50% の位置に
linear-gradient(#0f0,#ff0,#00f);
中間色 #ff0:30% の地点に変更
 linear-gradient(#0f0,#ff0 30%,#00f);
位置の指定の仕方によっては グラデーションさせずに配色することが可能です。
  • -prefix-linear-gradient(
    65deg,aqua 50%,pink 50%);
  • linear-gradient(
    25deg,aqua 50%,pink 50%);
  • -prefix-linear-gradient(0deg,green
    34%,yellow 34%,yellow 68%,red 68%);
  • linear-gradient(90deg,green
    34%,yellow 34%,yellow 68%,red 68%);
タグ:linear-gradient
posted by javaScript at 20:26 | 大阪 ☀ | スタイルシート CSS | このブログの読者になる | 更新情報をチェックする

2014年03月28日

テーブルの行と列、ハイライト表示 javascript

スポンサード リンク

 テーブル要素 オンマウスで セル、行と列の背景色変更

表のセルにマウスポインタが乗った時、そのセル自身とその行と列を
ハイライト表示するJavaScriptです。

画像 スタイルシート 背景設定 テーブル
ドラッグ cssTextプロパティ 背景画像設置 表の作成
ロールオーバー text-align プロパティ 背景 プロパティ 行のハイライト
画像ポップアップ display プロパティ 背景画像入れ替え 表 表示/非表示
ローテーションバーナ marginプロパティ 背景 CSS 見出し行を固定
画像のプリロード borderプロパティ ツールチップ テーブルcss生成

★☆★☆★☆ ナウでヤングなレンタルサーバー!ロリポップ! ☆★☆★☆★
月額105円〜容量最大120GB!大人気のWordpressも簡単インストール★
WordPressが簡単・すぐに使える『レンタルサーバーheteml(ヘテムル)

サンプルソース

<!DOCTYPE html>
 <html lang="ja">
 <head>
 <meta charset="UTF-8">
<title>ハイライト テーブル javascript</title>
<style type="text/css">
#TBL{
  background-color: #fffafa; /* 背景色 */
   border-collapse: collapse; /* 枠線の重なり:結合 */
  border: 2px solid #0000ff; /* ボーダー : 幅,線種,色 */
   }

#TBL thead {
  border-bottom:3px #0000ff double;
    }

#TBL th{
 color: #030303;
 background-color: #dbdbdb;
 padding: 5px 7px;  /* 余白:上下 左右;*/
 border:1px #0000ff solid;
  }

#TBL td{
 color:#800000;
 background-color:inherit; /* inherit 親要素の値を継承*/
 padding:5px 7px;
 border:1px #008000 solid;
  }
 </style>
 <script>
window.onload = hLightTBL;
function hLightTBL() {
 var Tbl =document.getElementById("TBL"); // <table> ID名
 var BgClr = "#d2e9ff"; // マウスが上に来た時の行、列の背景色
 var CellClr="pink";  // マウスが上に来た時のセルの背景色
		
for(var i=0;i<Tbl.rows.length;i++) {// 行 位置取得
 for(var j=0;j<Tbl.rows[i].cells.length;j++) { // 行内 セル位置取得
  Tbl.rows[i].cells[j].onmouseover = function(){ // マウスが重なったら cellTBLを実行
                cellTBL(this,BgClr,CellClr); //「this」現在マウスが重なっているtd要素
                                 }
  Tbl.rows[i].cells[j].onmouseout = function(){
                    cellTBL(this,'','');
                                 }
			     }
			}
	
function cellTBL(tgtCell,BgClr,CellClr) {
 for(var i=0;i<Tbl.rows.length;i++) {
  Tbl.rows[i].cells[tgtCell.cellIndex].style.backgroundColor = BgClr;// 列 背景色
	    }
  tgtCell.style.backgroundColor = CellClr;// セル 背景色
   tgtCell.parentNode.style.backgroundColor = BgClr;// 行 背景色
			}
		}
</script>
</head>
<body>
<table id="TBL">
<thead>
 <tr>
    <th>画像</th>
    <th>スタイルシート</th>
    <th>背景設定</th>
    <th>テーブル</th>
</tr>
</thead>
<tbody>
<tr>
    <td>ドラッグ</td>
      <td>cssTextプロパティ</td>
      <td>背景画像設置</td>
    <td>表の作成</td>
</tr>
  <tr>
      <td>ロールオーバー</td>
      <td>text-align プロパティ</td>
      <td>背景 プロパティ</td>
      <td>行のハイライト</td>
</tr>
   <tr>
      <td>画像ポップアップ</td>
      <td>display プロパティ</td>
      <td>背景画像入れ替え</td>
      <td>表 表示/非表示</td>
 </tr>
   <tr>
      <td>ローテーションバーナ</td>
      <td>marginプロパティ</td>
      <td>背景 CSS</td>
      <td>見出し行を固定</td>
  </tr>
    <tr>
      <td>画像のプリロード</td>
      <td>borderプロパティ</td>
      <td>ツールチップ</td>
      <td>テーブルcss生成</td>
    </tr>
  </tbody>
</table>
</body>
</html>
テーブル 行位置、セル位置、 取得
  var Tbl =document.getElementById("TBL");
Tbl.rowsはID名が "TBL"であるテーブルの rowsコレクションで、for文でループして
テーブル内の行の位置を得ます。
Tbl.rows[i]'i'が 0 なら一行目、1なら二行目、2なら三行目.......... になります。
Tbl.rows[i].cells[j]:rowsのcellsコレクションでテーブルの行内のセルの位置を得ます。
'j'が 0 ならi行目の一列目、1なら二列目、2なら三列目.......... になります。
  Tbl.rows[i].cells[j].cellIndexでマウスが重なった、セルのインデックス番号を取得し
同じインデックス番号を持つ、セルの背景色を変更します。
Table cellIndexプロパティ、セルのインデックス値の取得
cellIndex値
列-0 列-1 列-2 列-3
0 1 2 3
0 1 2 3
0 1 2 3
列ごとに "0" から始まるインデックス値が振られています。
テーブルのセルにアクセスする スクリプト
function Foge(){
 var Tbl = document.getElementById('TBL');
 for (var i=0; i<Tbl.rows.length; i++) { //テーブル内,行位置。
   for (var j=0; j<Tbl.rows[i].cells.length; j++) { //行内,セル位置。
  var Cells=Tbl.rows[i].cells[j]; //i番行のj番列のセル。
   Cells.onclick =function(){Mclk(this);} // onclickで 'Mclk'を実行。
                 }          // thisはクリックしたセル"Cells"を参照。
            }
        }
function Mclk(tgtCell){alert(tgtCell.innerHTML);}
posted by javaScript at 12:02 | 大阪 | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。