9.1 Комбінування кольорових функцій
Вебдизайн вимагає глибшого розуміння і застосування кольорових функцій для створення складних, але гармонійних і адаптивних інтерфейсів. Розглянемо більш складні маніпуляції з кольорами в 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 градусів, який плавно переходить через п'ять кольорів, кожен із яких заданий різними кольоровими функціями:
<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">Текст</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: Поєднання декількох градієнтів
У цьому прикладі два лінійні градієнти накладаються один на одного, створюючи складний багатошаровий ефект:
<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));
}
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ