背景にグラデーションをかける


bodyのbackgroundをグラデーションにしてみましょう。

背景をグラデーションに

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: linear-gradient(#56a1f4, #000); 
}

値のlinear-gradientは直線的なグラデーションという意味になります。

位置表示がないときは上から下へ向かってグラデーションになり、これがデフォルトです。
この場合は#56a1f4色から#000色に、上から下へ向かってグラデーションになります。

上#56a1f4から下#000へ

右から左へグラデーションをかける

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: linear-gradient(to left, #56a1f4, #000); 
}

これは、leftへ向かって、つまり右から左へ向かってグラデーションがかかります。

右#56a1f4から左#000へ

右下から左上へグラデーションをかける

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: linear-gradient(to top left, #56a1f4, #f00, #000); 
}

これは、top leftへ向かって、つまり右下から左上へ向かって#56a1f4 #f00 #000 3色のグラデーションがかかります。

右下#56a1f4から#f00そして左上#000へ

円形グラデーションをかける

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: radial-gradient(white, blue); 
}

今度はlinear-gradientではなく、radial-gradient円形のグラデーションです。

中心whiteから外へ向かってblueのグラデーションがかかります。

中心whiteから外へ向かってblue

円径、位置を指定する

スタイルシートのソースは、こういう書き方になります。

cssソース

/*====参考====*/
body {
    background: radial-gradient(50px at 80% 20%, white, blue);
}

円の径と円の表示位置を指定してみました。
50pxは円の径、80%は左からの位置、20%は上からの位置、円の色whiteから外へ向かってblueのグラデーションになります。

50pxwhite円、左から80%、上から20%、外へ向かってblue

どうでしょうか、機会があったら使ってください。

次は画像をタイル状に配置する

  1. 背景に色を付ける
  2. 背景にグラデーションをかける
  3. 画像をタイル状に配置する
  4. 画像を1枚表示する
  5. 画像で横ラインを引く
  6. 画像で縦ラインを引く
  7. 複数の画像を配置する
  8. 画像にグラデーションをかける