radial-gradient funktsiyasi

radial-gradient funktsiyasi radial gradientni belgilaydi. Ushbu funktsiya fon rasmini belgilovchi xususiyatlarga qo‘llaniladi: background, background-image yoki chegaraning rasmini: border-image, background-image-source.

Sintaksis

cssselektor {
  background: radial-gradient([shakl turi joylashuv], rang1 hajm1, rang2 hajm2...);
}

Qiymatlar

Tur uchun qiymatlar

Eslatma

Tur va shaklni o‘rinlarini almashtirish mumkin, lekin joylashuv birinchi parametr oxirida bo‘lishi kerak. Gradient turi va uning hajmi bir-biri bilan ishlamaydi (mantiqan, ular ziddiyatli). Hajm ustun keladi.

Misol . Eng oddiy variant

Keling, shunchaki boshlang‘ich va tugash rangini belgilaymiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Joylashuv qo‘shamiz

Keling, markazning o‘rnini belgilaymiz: 30px - chapdan chetlatish, 100px - yuqoridan chetlatish:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Foizlarda joylashuv

Keling, markazning o‘rnini foizlarda belgilaymiz: 30% - chapdan chetlatish, 50% - yuqoridan chetlatish:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Kalit so‘z bilan joylashuv

top, bottom, left, right, center kalit so‘zlaridan turli kombinatsiyalarda foydalanish mumkin. Masalan, gradientni o‘ngda markazga qo‘yamiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Gradient hajmi

Bunda gradient shunday ishlaydi: 0px dan 20px gacha toza qizil rang, 20px dan 60px gacha - gradient qizildan ko‘k rangga, 60px dan keyin - toza ko‘k rang:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Ketma-ket bir nechta rang

Bunda gradient shunday ishlaydi: 0px dan 20px gacha toza qizil rang, 20px dan 40px gacha toza ko‘k rang, 40px dan 60px gacha - ko‘kdan yashil rangga gradient, 60px dan keyin - toza yashil rang:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Hajm + joylashuv

Keling, bir vaqtning o‘zida turli ranglar uchun hajmlarni va gradient markazining joylashuvini belgilaymiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Misol . Gradient shakli

Gradient shakli birinchi parametr bilan belgilanadi va 2 qiymatni qabul qilishi mumkin: circle (doiraviy gradient) yoki ellipse (ellips gradient, standart). Nima uchun bundan oldin biz ellips gradientlarni ko‘rmaganmiz, garchi u standart sifatida belgilanmaganmi? Chunki bundan oldin bloklarning shakli kvadrat edi. Agar biz shaklni to‘rtburchakka o‘zgartirsak, ellips gradientni ko‘ramiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Dumaloq gradient

Keling, to‘rtburchak blokda dumaloq gradient qilaylik. Buning uchun birinchi parametr sifatida gradient shaklini circle kalit so‘zi yordamida belgilaymiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Joylashuv qo‘shamiz

Keling, oldingi kodga gradient joylashuvini ham qo‘shamiz:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur farthest-corner + circle

Gradient shakli blokning eng uzoq burchagiga masofa haqidagi ma’lumot asosida hisoblanadi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur farthest-corner + ellipse

Gradient shakli blokning eng uzoq burchagiga masofa haqidagi ma’lumot asosida hisoblanadi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur farthest-side + circle

Gradient blokning eng uzoq tomonigacha tarqaladi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur farthest-side + ellipse

Gradient blokning eng uzoq tomonigacha tarqaladi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur closest-corner + circle

Gradient shakli eng yaqin burchakka masofa haqidagi ma’lumot asosida hisoblanadi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur closest-corner + ellipse

Gradient shakli eng yaqin burchakka masofa haqidagi ma’lumot asosida hisoblanadi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur closest-side + circle

Gradient shakli unga eng yaqin blok tomoniga mos keladi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Misol . Tur closest-side + ellipse

Gradient shakli unga eng yaqin blok tomoniga mos keladi:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Shuningdek qarang