[CSS] 色スタイル、グラデーション

Study / Javascript, Jquery, Css    作成日付 : 2019/12/24 07:37:22   修正日付 : 2020/03/10 23:27:05

こんにちは。明月です。


CSSで色のスタイルは色名で設定することもできるし、RGB表現式で設定もできるし、HEXの値で設定もできます。

<!DOCTYPE html>	
<html>	
  <head>
    <style>
      /*色名設定*/
      .color-1{
        color:blue;
      }
      /*RGB表現式*/
      .color-2{
        /*赤、グリーン、青*/
        color:RGB(255,0,0);
      }
      /*HEX表現式*/
      .color-3{
        color: #008000;
      }
    </style>
  </head>
  <body>
    <div class="color-1">color-1</div>
    <div class="color-2">color-2</div>
    <div class="color-3">color-3</div>
  </body>
</html>
color-1
color-2
color-3

色の参照は下記のURLで参考できます。

link - https://www.w3schools.com/cssref/css_colors.asp


この投稿では基本色設定ではなく、グラデーションに関して調べてみました。

<!DOCTYPE html>	
<html>	
  <head>	
    <style>	
      div.exam{	
        display:inline-block;	
        width:9%;	
        height:100px;	
        border:1px solid #000;	
        float:left;	
      }	
      div.exam:nth-of-type(1){	
        /*線系のグラデーション*/
        background:linear-gradient(180deg,silver,purple);	
      }	
      div.exam:nth-of-type(2){
        /*線系のグラデーション*/
        background:linear-gradient(to top right,red 0%,white 50%,blue 100%);	
      }	
      div.exam:nth-of-type(3){	
        /*丸系のグラデーション*/
        background:radial-gradient(circle,yellow,green);	
      }	
      div.exam:nth-of-type(4){
        /*丸系のグラデーション*/
        background:radial-gradient(50px 50px at 80px 30px,maroon,olive,あ);	
      }	
      div.exam:nth-of-type(5){
        /*繰り返し線系のグラデーション*/
        background:repeating-linear-gradient(navy 20%,teal 80%);	
      }	
      div.exam:nth-of-type(6){
        /*繰り返し線系のグラデーション*/
        background:repeating-linear-gradient(-45deg,white, white 5px,black 5px,black 10px);	
      }	
      div.exam:nth-of-type(7){
        /*繰り返し丸系のグラデーション*/
        background:repeating-radial-gradient(circle closest-side,gray 0px, lime 20px);	
      }	
      /*繰り返し丸系のグラデーション*/
      div.exam:nth-of-type(8){	
        background:repeating-radial-gradient(circle,transparent, white 5px,fuchsia 5px,fuchsia 10px);	
      }	
    </style>	
  </head>	
  <body>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
    <div class="exam"></div>	
  </body>	
</html>

初めのdivタグのlinear-gradientは線形のグラデーションです。パラメータはグラデーションの変換角度で180度で設定すれば水平で上から下の段階でシルバー色から紫色に変わると意味で色の設定です。

二つ目は上右から下左の角度ですが、角度では45度ですね。初めは赤色で、真中は白色、最後は青色に設定されます。

三つ目のradial-gradientは丸系のグラデーションです。パラメータはcircle設定ですが初めは真中から外側に黄色から緑色に設定することです。

四つ目は丸の設定ですが、丸のサイズが横50px、縦50pxです。「at」の後は丸の位置ですね。右から80px、上から30pxの中心であずき色、オリーブ色、アクア色順になります。

五つ目のネイビー色20%、teal色80%、水平(0deg,180deg)角度で繰り返いしてグラデーションになります。

六つ目の角度(-45deg = 315deg)で繰り返いして初め白色から白色まで5px、黒色5pxから黒色10pxまでグラデーションになります。

七つ目のrepeating-radial-gradientは繰り返し丸系のグラデーションです。

ここのキーワードは四つがありますが、closest-side、closest-corner、farthest-side、farthest-cornerがありますね。

キーワード 説明
closest-side グラデーションの終了形状は、その中心に最も近いボックスの側面（円の場合）または中心に最も近い垂直および水平の両方の辺（楕円の場合）に一致します。
closest-corner グラデーションの終了形状は、ボックスの中心から最も近い角に正確に合うようにサイズ設定されます。
farthest-side 最も近い側に似ていますが、終了形状は、ボックスの中心から最も遠い側（または垂直および水平側）に合うサイズになっています。
farthest-corner グラデーションの終了形状は、ボックスの中心から最も遠いコーナーに正確に合うようにサイズが設定されます。

筆者の場合はclosest-sideの設定なので、丸が繰り返して広がるこです。グレー色0pxからライム色20pxほど丸ができます。

最後は透明色から白色5px,フクシア色5pxからフクシア色10pxにグラデーションすることです。

グラデーションは様々ところでよく使う色ですが、たくさん使うとやはりコンテンツの集中度を落とす効果が発生します。

色やポイントを与える時、広告する時には良いと思います。

◀前の投稿[CSS] アニメーション (animation)
次の投稿▶[CSS] ブラウザから開発する方法 (developer mode)
#css,#gradation
「Study / Javascript, Jquery, Css」の他投稿
最新投稿