9.1 Combining Color Functions
Web design requires a deeper understanding and application of color functions to create complex yet harmonious and
adaptive interfaces. Let's explore more advanced color manipulations in CSS using functions like
rgba(), hsla(), hsl(), and rgb().
Example 1: Creating a Semi-transparent Gradient
You can combine several color functions to create complex gradients.
In this example, a linear gradient is used that combines semi-transparent colors defined with rgba() and 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)
);
}
Example 2: Gradient Transition Through Multiple Colors
Here, a linear gradient at a 45-degree angle is used, which smoothly transitions through five colors, each specified by different color functions:
<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 Creating Complex Shadows and Semi-transparent Effects
Example 3: Shadows Using rgba()
In this example, a complex shadow is created using semi-transparent colors to produce volume and light effects:
<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);
}
Example 4: Semi-transparent Borders and Backgrounds
Semi-transparent borders and backgrounds can be created using rgba() and hsla(), allowing for layered and textured effects:
<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 Animation and Transitions Using Color Functions
Example 5: Background Animation Using hsl()
This example uses animation to smoothly change the background color through different hues using 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;
}
Example 6: Text Color Transition
Here, the text smoothly changes color and transparency when hovered over using rgba() and the transition property:
<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 Using CSS Variables
Let's look at examples of using CSS variables with color functions.
Example 7: Variables and Color Functions
Using CSS variables with color functions allows centralized color management and creates complex yet easily manageable styles:
<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);
}
Example 8: Combining Multiple Gradients
In this example, two linear gradients are layered on top of each other to create a complex layered effect:
<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