9.1 Rəng funksiyalarının birləşdirilməsi
Veb-dizayn daha mürəkkəb, lakin harmonik və adaptiv interfeyslər yaratmaq üçün rəng funksiyalarının daha dərindən anlaşılmasını və tətbiqini tələb edir. Gəlin CSS-də rənglər üzərində daha mürəkkəb manipulyasiyalara nəzər salaq, rgba(), hsla(), hsl() və rgb() funksiyalarından istifadə edərək.
Nümunə 1: Yarımşəffaf gradient yaratmaq
Mürəkkəb gradientlər yaratmaq üçün bir neçə rəng funksiyasını birləşdirmək olar.
Bu nümunədə, yarımşəffaf rəngləri birləşdirən xətti gradient istifadə olunur, bunlar rgba() və hsla() ilə təyin edilmişdir:
<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)
);
}
Nümunə 2: Bir neçə rəngdən keçidlə gradient
Burada 45 dərəcə bir açı ilə xətti gradient istifadə edilir, bu gradient beş rəngdən keçərək hamar bir keçid yaradır və hər rəng fərqli rəng funksiyaları ilə təyin edilmişdir:
<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 Mürəkkəb kölgələrin və yarımşəffaf effektlərin yaradılması
Nümunə 3: rgba() istifadə edərək kölgələr
Bu nümunədə, həcm və işıq effekti yaratmaq üçün yarımşəffaf rənglərdən istifadə edən mürəkkəb bir kölgə yaradılır:
<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);
}
Nümunə 4: Yarımşəffaf sərhədlər və fonlar
Yarımşəffaf sərhədlər və fonlar rgba() və hsla() istifadə edərək yaradılır, bu da çox qatlı və toxumal bir effekt yaratmağa imkan verir:
<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 Animasiya və keçidlər rəng funksiyalarından istifadə ilə
Nümunə 5: hsl() istifadə edərək fon animasiyası
Bu nümunədə, hsl() istifadə edərək müxtəlif rəng çalarları ilə fon rəngini tədricən dəyişən animasiya göstərilir:
<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;
}
Nümunə 6: Mətn rənginin keçidi
Burada mətn rəngi və şəffaflığı rgba() və transition xüsusiyyəti ilə tədricən dəyişir, siçan mətn üzərinə gətirilərkən:
<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 dəyişənlərindən istifadə
CSS dəyişənlərindən rəng funksiyaları ilə istifadənin nümunələrinə baxacağıq.
Nümunə 7: Dəyişənlər və rəng funksiyaları
CSS dəyişənlərindən rəng funksiyaları ilə istifadə rənglərin idarə edilməsini mərkəzləşdirməyə və mürəkkəb, amma idarə olunması rahat tərzlər yaratmağa imkan verir:
<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);
}
Nümunə 8: Müxtəlif gradientlərin birləşməsi
Bu nümunədə iki xətti gradient bir-birinin üzərinə yerləşdirilir və mürəkkəb çoxqatlı effekt yaranır:
<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