9.1 色の関数の組み合わせ
Webデザインは、複雑でありながら調和した適応的インターフェースを作成するために、色の関数の深い理解と応用を求められるんだよね。
CSSでrgba()、hsla()、hsl()、rgb()を使って、もっと高度な色の操作を見ていこう。
例 1: 半透明なグラデーションの作成
複数の色関数を組み合わせることで、複雑なグラデーションを作成できるんだよ。
この例では、rgba()とhsla()を使って定義された半透明の色を組み合わせた線形グラデーションを使っているよ:
<div class="gradient"></div>
.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つの色を異なる色の関数で表現しながらスムーズに移行しているよ:
<div class="gradient"></div>
.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()を使用したシャドウ
この例では、奥行きと光の効果を作成するために、半透明の色を使った複雑なシャドウを作成しているよ:
<div class="shadow"></div>
.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()を使って作っていて、多層的でテクスチャリッチなエフェクトが可能だよ:
<div class="border-background"></div>
.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()を使って、様々な色相を通じて背景色をスムーズに変化させるアニメーションが使われているよ:
<div class="animated-background"></div>
@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プロパティを使って、カーソルを乗せたときにテキストの色と透明度がスムーズに変化するよ:
<div class="text-transition">Some text</div>
.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変数を使うことで、色を集中管理しつつ、複雑でありながら簡単に管理できるスタイルを作れるよ:
<div class="advanced"></div>
: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つの線形グラデーションを重ね合わせることで、複雑な多層の効果を生み出しているよ:
<div class="multi-gradient"></div>
.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));
}
GO TO FULL VERSION