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
どうでしょうか、機会があったら使ってください。