5.1 Xətti gradiyentlər
Gradiyentlər web-dizaynda güclü alətdir, şəkillər istifadə etmədən rənglər arasında yumşaq keçidlər yaratmağa imkan verir. CSS iki əsas növ gradiyent təklif edir: xətti (linear-gradient) və radial (radial-gradient). Bu gradiyentlər elementlərin fonu, düymələr yaratmaq və digər vizual effektlər üçün istifadə olunur.
Xətti gradiyentlər (linear-gradient)
Xətti gradiyent iki və ya daha artıq rəng arasında müəyyən bir xətt (ox) boyunca yumşaq keçid yaradır. Bu xətt üfüqi, şaquli və ya hər hansı bir bucaq altında ola bilər.
Syntax
background: linear-gradient( direction, color-stop1, color-stop2, ...);
Qiymətlər
direction: gradiyentin istiqaməti. Dərəcələrlə qeyd edilə bilər (məsələn,90deg), açar sözlərlə istifadə edilə bilər (məsələn,to right,to bottom left)color-stop: gradiyentdə rəng və onun mövqeyini təyin edən rəng dayanacağı
İstifadə nümunələri
Üfüqi gradiyent:
.linear-gradient-horizontal {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow);
}
<body>
<div class="linear-gradient-horizontal">Üfüqi gradiyent</div>
</body>
Şaquli gradiyent:
.linear-gradient-vertical {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
}
<body>
<div class="linear-gradient-vertical">Şaquli gradiyent</div>
</body>
Diaqonal gradiyent:
.linear-gradient-diagonal {
width: 200px;
height: 200px;
background: linear-gradient(45deg, purple, pink);
}
<body>
<div class="linear-gradient-diagonal">Diaqonal gradiyent</div>
</body>
Çoxrəngli gradiyent:
.linear-gradient-multi {
width: 200px;
height: 200px;
background: linear-gradient(to right, red, yellow, green, blue);
}
<body>
<div class="linear-gradient-multi">Çoxrəngli gradiyent</div>
</body>
Kodun izahı:
to right: gradiyent soldan sağa gedirto bottom: gradiyent yuxarıdan aşağıya gedir45deg: gradiyent 45 dərəcə bucaq altında gedirred,yellow,green,blue: çoxrəngli gradiyent yaratmaq üçün bir neçə rəng dayanacağı
5.2 Radial qradiyentlər
radial-gradient rənglər arasında mərkəzdən başlayaraq dairənin və ya elipsin kənarlarına qədər keçid yaradır. Radial qradiyentlər, məsələn, üçölçülü (3D) təsvirin təqlidi kimi maraqlı vizual effektlər yarada bilər.
Sintaksis:
background: radial-gradient( direction, color-stop1, color-stop2, ...);
Dəyərlər:
shape: qradiyentin forması,circle(dairə) və yaellipse(elips) ola bilər (əvvəlcədən təyin olunmuş dəyərdir)size: qradiyentin ölçüsü,closest-side,closest-corner,farthest-side,farthest-cornerola bilərposition: qradiyentin mərkəzinin mövqeyi, faiz, piksel və ya açar sözlərdən (məsələn,center,top,left) istifadə edərək təyin edilə bilərcolor-stop: rəng dayanacağı, qradiyentdə rəngi və onun mövqeyini müəyyən edir
İstifadə nümunələri
Dairəvi qradiyent:
.radial-gradient-circle {
width: 200px;
height: 200px;
background: radial-gradient(circle, red, yellow);
}
<body>
<div class="radial-gradient-circle">Dairəvi qradiyent</div>
</body>
Eliptik qradiyent:
.radial-gradient-ellipse {
width: 200px;
height: 200px;
background: radial-gradient(ellipse, blue, green);
}
<body>
<div class="radial-gradient-ellipse">Eliptik qradiyent</div>
</body>
Mərkəzdən qradiyent:
.radial-gradient-at-center {
width: 200px;
height: 200px;
background: radial-gradient(circle at center, purple, pink);
}
<body>
<div class="radial-gradient-at-center">Mərkəzdən qradiyent</div>
</body>
Küncdən qradiyent:
.radial-gradient-at-corner {
width: 200px;
height: 200px;
background: radial-gradient(circle at top left, red, blue, green);
}
<body>
<div class="radial-gradient-at-corner">Küncdən qradiyent</div>
</body>
Kodun izahı:
circle: dairəvi qradiyent yaradırellipse: eliptik qradiyent yaradırat center: qradiyent mərkəzdən başlayırat top left: qradiyent sol yuxarı küncdən başlayırred,blue,green: çoxrəngli qradiyent yaratmaq üçün bir neçə rəng dayanacağı
5.3 Gradientlərin əlavə sazlamaları
Təkrarlanan gradientlər
1. Xətti təkrarlanan gradientlər (repeating-linear-gradient)
Təkrarlanan xətti gradientlər xətti gradient ilə təkrarlanan naxış yaradır.
background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
2. Radial təkrarlanan gradientlər (repeating-radial-gradient)
background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
3. Şəffaf rəng dayanmaları
Rəng dayanmaları daha mürəkkəb vizual effektlər yaratmaq üçün şəffaflığı daxil edə bilər.
background: linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5));
4. Bir neçə gradientdən birlikdə istifadə
Çətin fonlar yaratmaq üçün bir neçə gradientdən istifadə etmək olar.
background: linear-gradient(to right, red, yellow), radial-gradient(circle, blue, green);
GO TO FULL VERSION