webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

radial-gradient 放射状のグラデーション

  • 放射状のグラデーションを作ってみます。
  • 「end color」は要素の外に置けるみたいです。

f:id:ohta-felica:20161030102526p:plain

 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-blend-mode test</title>
<style>
.left{
width :50%;
height: 560px;
float: left;
background:radial-gradient(#ffffff 0%, red 100%);
}
.right{
width: 50%;
height: 560px;
float: right;
background: radial-gradient(#ffffff 0%, red 200%);
}
</style>
</head>
<body>
<div class="left">background:radial-gradient(#ffffff 0%, red 100%);</div>
<div class="right">radial-gradient(#ffffff 0%, red 200%);</div>

</body>
</html> 

 

 

CSSradial-gradient() 関数は、原点であるグラデーションの中心から放射状に延びる、カラーのグラデーションを表現する <image> を作ります。この関数の結果は CSS<gradient> データ型のオブジェクトです。

放射状グラデーションは中心位置最終形状の輪郭線と位置、カラーストップで定義されます。放射状グラデーションは中心から最終形状に向かい、潜在的にはそれを超えて延びるもので、最終形状と一致する、連続した一様に拡大する同心の形状でできています。カラーストップは、中心から右方向に水平に延びる仮想的なグラデーションレイの上に配置されます。カラーストップの位置を決めるパーセンテージは、最終形状とこのグラデーションレイの交点を 100% としたときの相対値です。各形状は単色で、色は交差したグラデーションレイの色によって定義されます。

最終形状として選べるのは circleellipse のみです。

CSS グラデーションは CSS<color> ではなく、固有のサイズを持たない画像です。これは、画像本来のサイズや、優先されるサイズを持たないということです(アスペクト比についても同様です)。実際のサイズは、グラデーションの用いられる要素にマッチしたものになるでしょう。

radial-gradient 関数の構文では、グラデーションの繰り返しは行えません。繰り返しを関数で行うなら、CSSrepeating-radial-gradient 関数を使ってください。

構文

Formal grammar: radial-gradient( [[ circle || <length> ] [ at <position> ]? , | [ ellipse || [<length> | <percentage> ]{2}] [ at <position> ]? , | [ [ circle | ellipse ] || <extent-keyword> ] [ at <position> ]? , | at <position> , <color-stop> [ , <color-stop> ]+ ) \------------------------------------------------------------------------------/\--------------------------------/ Definition of the contour, size and position of the ending shape List of color stops where <extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side and <color-stop> = <color> [ <percentage> | <length> ]? Definition of the ending shape radial-gradient( circle, … ) /* Synonym of radial-gradient( circle farthest-corner, …) */ radial-gradient( ellipse, … ) /* Synonym of radial-gradient( ellipse farthest-corner, …) */ radial-gradient( <extent-keyword>, … ) /* It draws a circle */ radial-gradient( circle radius, … ) /* A centered circle of the given length. It can't be a percentage */ radial-gradient( ellipse x-axis y-axis, … ) /* The two semi-major axis are given, horizontal, then vertical */ Definition of the position of the shape radial-gradient (… at <position>, … ) Definition of the color stops radial-gradient (…, <color-stop>) radial-gradient (…, <color-stop>, <color-stop>) 

<position>
background-positiontransform-origin と同じように扱われる位置。デフォルトは center です。
<shape>
グラデーションの形状です。circle (一定の半径の円)または ellipse(軸に沿った楕円)のいずれかを指定します。デフォルト値は ellipse です。
<size>
グラデーションのサイズです。以下に示す サイズに使われる定数 の中のひとつです。
<color-stop>
この値は <color> 値、続いて省略可能な停止位置(0% から 100% までの割合、またはグラデーション軸に沿った <length>)で構成されます。<percentage>0% または <length>0 はグラデーションの中心を表し、値 100% は最終形状と仮想的なグラデーションレイの交点を表します。中間値の <percentage> 値は、グラデーションレイ上の直線上に配置されます。
<extent-keyword>
最終的な形状がとるべき大きさを記述するキーワードです。以下に示す サイズに使われる定数 の中のひとつです。