*

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

公開日: : 最終更新日:2016/04/12 CSS ,

linear-gradient()関数を利用すると、指定した色から色へ滑らかに変化する線形グラデーションを表現できます。この関数は、画像を扱えるプロパティとして指定する。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

linear-gradient()関数の引数

方向

グラデーションの方向は、ボックスの中心点を通る「グラデーションライン」の向きで決まる。このグラデーションラインの方向(終了点の方向)を角度かキーワードで指定します。

角度を使うときは、上方向を0度として、右方向が90度、下方向が180度のように時計回りで指定します。角度のです。

キーワードの場合は、「to キーワード」という書き方で、「top」「bottom」「left」「right」またはこれらの単語を組み合わせて指定する。

例えば、「to top」は下から上、「to right」は左から右へのグラデーションとなります。ただ「to top right」という形でキーワードを組み合わせたときは、必ずしも45度にはなりません。

グラデーションラインはボックスの対角線と直交する形で左上から右下へ設定されて、グラデーションの方向が決定されます。なので、ボックスサイズによりグラデーションの角度が変わります。

方向を省略すると、「to bottom」上から下を指定されたものとして扱います。

グラデーションの開始店と終了点は、ボックスの角を通る直線がグラデーションラインと直交する位置です。

カラーストップ
 色と値と位置を、半角スペースで区切って書きます。位置を指定したいとき「10px」「10%」とように実数値+単位か、「%値」で指定します。終了点は「100%」です。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

cateCSSPage

HTMLファイルとは別にCSSファイルを別個つくりリンクさせる。

本題に入る前になぜ、HTMLファイルとCSSファイルを分けるのか。 CSSファイルを外部に作る

記事を読む

cateCSSPage

CSSの書き方を覚える。

CSSの書き方 CSSはどの「要素」の「もの」を「どんな風」に するかを指定するものであり、半角

記事を読む

CSS

子要素を透視図法で表示したり、要素の裏面の表示方法を指定する

視点の距離を指定することで子要素で透視図法で表示するときに利用するのがperspectiveプロパテ

記事を読む

CSS

トランジション効果を付けてみる

トランジション、遷移と言ったりします。トランジションとは、あるスタイルを別のスタイルへスムーズに変化

記事を読む

cateCSSPage

要素の配置方法を設定するプロパティposition

コンテンツボックスは、画面の左上だったり、親要素の左上が 基準の位置です。postitionプロパ

記事を読む

cateCSSPage

CSSって何?

HTMLでマークアップした文章を、そのままブラウザで 黒い文字、背景白でタグの初期設定のまま表示さ

記事を読む

cateCSSPage

水平方向・垂直方向の形が異なる角丸を設定する。

今回書き留めておくのが、タイトルの通りです。 前回は水平方向と垂直方向の角丸が同じ場合を 紹介し

記事を読む

CSS

IE限定?グリッドレイアウトを使う

グリッドレイアウトとは、表示領域を縦横に分割して作成されたマス目の中に、コンテンツを配置していくレイ

記事を読む

CSS

3次元上で子要素の描画方法を指定する

3次元の変形効果においうて、親要素と子要素をどのような関係で表示するかを指定するときに、使用するのが

記事を読む

CSS

トランジションの速度のパターンを設定する

transtion-timing-functionプロパティを使うと、変化する速度のパターンをしてい

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑