1. attr()
attr(html要素の属性名), 通常はcssコンテンツで使用します。
html:
<p><a href="http://..c" name="attr"> </a></p>
<p><a href="http://..e" name=" "> </a></p>
css:
a:after{content:'('attr(href) '/' attr(name) ')'}
http://..c / attr)
http://..e /
2. calc()
長さの値を動的に計算するために使用 calc (数式)
- 演算子の前後にはスペースが必要である。
- 長さに関係なく、calcで計算できる。
- calc() '+','-','*','/'
- calc() 標準的な数学的優先順位のルールを使う
//
width: calc(70% - 60px)
height: calc(70% / 2 * 12 + 66px)
linear-gradient()
始点と方向が必要な線形グラデーションイメージを作成したり、角度の始点となる色などを定義するために使用します。
//
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction: グラデーション方向の角度を指定する
color-stop1グラデーションの開始色と終了色を指定する。
例
background: linear-gradient(red,yellow,blue,green);
グラデーションの角度をトップダウンに設定しない場合、結果は次のようになります。
例
background: linear-gradient(12deg,red,yellow,blue,green);
勾配角度を設定した結果は次のようになります。
例
background: linear-gradient(to left top,red,yellow,blue,green);
結果は次のようになり、勾配角はある方向から別の方向へ向かうことができます。
radial-gradient()
使い方は linear-gradient() と似ていますが、放射状のグラデーションでイメージを作成することと、 グラデーションが中心点で定義されること、 そして2つの終端色を設定しなければならないことが異なります。
background: radial-gradient(shape size at position, start-color, ..., last-color);
shape: 円の種類を決定する
- ellispe( : 楕円の放射状グラデーションを指定する
- circle円の放射状のグラデーションを指定する。
size: 放射状グラデーションのサイズを指定する
- farthest-corner((デフォルト): 円の中心から中心から最も遠い角度までの放射状グラデーションの半径を指定する。
- closest-side放射状グラデーションの半径は、円の中心から最も近い辺までの長さで指定する。
- closest-corner放射状グラデーションの半径は、円の中心から最も近い角までの角度で指定する。
- farthest-side放射状グラデーションの半径は、円の中心から中心から最も遠い端までとする。
position: グラデーションの位置を定義する
- center((デフォルト): 放射状グラデーションの中心の垂直座標を設定する。
- top放射状グラデーションの中心の垂直座標を上部に設定する。
- bottom放射状グラデーションの中心の垂直座標を底辺に設定する。
start-color, ..., last-colorグラデーションの開始色と終了色を定義する
例
background: radial-gradient(red, green, blue, yellow);
その結果、中心から外側に向かって勾配が広がり、次のようになります。
例
各色の割合は個別に設定できます。
例
background: radial-gradient(circle, red, green, blue, yellow);
結果は以下のようになり、放射状のグラデーションは round に設定され、デフォルトは ellipse です。
repeating-linear-gradient()
繰り返し線形グラデーションイメージの作成
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);
angle: グラデーションの角度を定義する
side-or-corner: 線形グラデーションの開始位置を指定する
- キーワード1：水平位置
- キーワード：垂直位置
color-stop1, color-stop2,...
- グラデーションの開始色と停止色を指定する（色の値と停止位置からなる）。
例
結果は以下の通りで、デフォルトは上から下へ、色の割合も設定されています。
例
角度を設定した結果は次のようになります。
