色の操作

使用可能

9.1 色の関数の組み合わせ

Webデザインは、複雑でありながら調和した適応的インターフェースを作成するために、色の関数の深い理解と応用を求められるんだよね。
CSSでrgba()hsla()hsl()rgb()を使って、もっと高度な色の操作を見ていこう。

例 1: 半透明なグラデーションの作成

複数の色関数を組み合わせることで、複雑なグラデーションを作成できるんだよ。

この例では、rgba()hsla()を使って定義された半透明の色を組み合わせた線形グラデーションを使っているよ:

HTML
<div class="gradient"></div>
CSS
.gradient {
  min-height: 200px;
  background: linear-gradient(
    to right,
    rgba(255, 0, 0, 0.8),
    hsla(240, 100%, 50%, 0.7),
    rgba(0, 255, 0, 0.6)
  );
}

例 2: 複数の色をまたぐグラデーション

ここでは、45度の線形グラデーションを使って5つの色を異なる色の関数で表現しながらスムーズに移行しているよ:

HTML
<div class="gradient"></div>
CSS
.gradient {
  min-height: 200px;
  background: linear-gradient(
    45deg,
    hsl(0, 100%, 50%) 0%,
    rgb(255, 255, 0) 25%,
    hsla(240, 100%, 50%, 0.7) 50%,
    rgba(0, 255, 0, 0.6) 75%,
    rgb(0, 255, 255) 100%
  );
}

9.2 複雑なシャドウと半透明のエフェクトを作成する

例 3: rgba()を使用したシャドウ

この例では、奥行きと光の効果を作成するために、半透明の色を使った複雑なシャドウを作成しているよ:

HTML
<div class="shadow"></div>
CSS
.shadow {
  min-height: 155px;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5),
              -10px -10px 20px rgba(255, 255, 255, 0.2);
}

例 4: 半透明の境界線と背景

半透明の境界線と背景は、rgba()hsla()を使って作っていて、多層的でテクスチャリッチなエフェクトが可能だよ:

HTML
<div class="border-background"></div>
CSS
.border-background {
  min-height: 200px;
  border: 2px solid rgba(0, 0, 0, 0.5);
  background-color: hsla(120, 100%, 50%, 0.3);
}

9.3 色の関数を使用したアニメーションとトランジション

例 5: hsl()を使用した背景のアニメーション

ここでは、hsl()を使って、様々な色相を通じて背景色をスムーズに変化させるアニメーションが使われているよ:

HTML
<div class="animated-background"></div>
CSS
@keyframes color-change {
  0% {
    background-color: hsl(0, 100%, 50%);
  }
  50% {
    background-color: hsl(120, 100%, 50%);
  }
  100% {
    background-color: hsl(240, 100%, 50%);
  }
}

.animated-background {
  min-height: 200px;
  animation: color-change 5s infinite;
}

例 6: テキストの色のトランジション

ここでは、rgba()transitionプロパティを使って、カーソルを乗せたときにテキストの色と透明度がスムーズに変化するよ:

HTML
<div class="text-transition">Some text</div>
CSS
.text-transition {
  min-height: 100px;
  color: rgba(255, 0, 0, 1);
  transition: color 2s;
}

.text-transition:hover {
  color: rgba(0, 0, 255, 0.5);
}

9.4 CSS変数の利用

色の関数と一緒にCSS変数を使う例を見てみよう。

例 7: 変数と色の関数

色の関数と一緒にCSS変数を使うことで、色を集中管理しつつ、複雑でありながら簡単に管理できるスタイルを作れるよ:

HTML
<div class="advanced"></div>
CSS
:root {
  --primary-color: rgba(255, 0, 0, 0.8);
  --secondary-color: hsl(240, 100%, 50%);
  --border-color: rgba(0, 0, 0, 0.5);
}

.advanced {
  min-height: 200px;
  background: linear-gradient(
    to right,
    var(--primary-color),
    var(--secondary-color)
  );
  border: 2px solid var(--border-color);
}

例 8: 複数のグラデーションの組み合わせ

この例では、2つの線形グラデーションを重ね合わせることで、複雑な多層の効果を生み出しているよ:

HTML
<div class="multi-gradient"></div>
CSS
.multi-gradient {
  min-height: 200px;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 255, 0, 0.5)),
  linear-gradient(to bottom, hsla(240, 100%, 50%, 0.5), hsla(60, 100%, 50%, 0.5));
}
1
タスク
Frontend SELF JA,  レベル 32レッスン 3
ロック未解除
線形グラデーションの色
線形グラデーションの色
1
タスク
Frontend SELF JA,  レベル 32レッスン 3
ロック未解除
hslの背景アニメーション
hslの背景アニメーション
コメント
  • 人気
  • 新規
  • 古い
コメントを残すには、サインインしている必要があります
このページにはまだコメントがありません