study-note

4. リッチなCSS

目次

• 影のプロパティ
• 角丸のプロパティ
• グラデーション

影のプロパティ

1. box-shadowプロパティ

  div{
    box-shadow: 10px 10px 10px gray;
  }

• 要素の周囲の影
• 値：(横方向のずれ具合 縦方向のずれ具合 ぼかし具合 [影の大きさの増分] 色)
• inset：内側の影
• 複数の影：値を,で区切る

1. text-shadowプロパティ

  div{
    text-shadow: 3px 3px 2px gray;
  }

• 文字の周囲の影
• 値：(横方向のずれ具合 縦方向のずれ具合 ぼかし具合 [影の大きさの増分] 色)
• 複数の影：値を,で区切る

角丸のプロパティ

border-radiusプロパティ

div{
  border-radius: 10px;
}

• 境界の角を丸める
• 値：丸みの半径（borderの太さの中間から数える）
  • 値が4つ：上下左右の半径
• 正円：border-radius: 50%;
• 楕円：widthを指定

グラデーション

backgroundプロパティ

1. linear-gradient()：直線的なグラデーションの値

  div{
    background: linear-gradient(white, gray);
  }

• (white 50%, gray 80%)：開始点（中心）から終了点までの相対的な距離
• (45deg, white, gray)：回転角度（指定の値+180）

1. radial-gradient()：放射状のグラデーションの値

  div{
    background: radial-gradient(white, gray);
  }

• (white 50%, gray 80%)：開始点から終了点までの相対的な距離
• (at top, white, gray)：開始点の位置（%, pxでも指定可能）
• (circle at top, white, gray)：円形の状態を保つ

1. conic-gradient()：扇形（円錐）のグラデーションの値

  div{
    background: conic-gradient(white, gray);
  }

• (white 0%, gray 25% 50%, white 50% 75%, gray 76% 100%)：開始点から終了点までの相対的な距離

→5. コンテンツを変形するCSS