radial-gradient funksiyası

radial-gradient funksiyası radial qradient təyin edir. Bu funksiya fon şəkli təyin edən xassələrə şamil edilir: background, background-image və ya sərhəd şəkli: border-image, background-image-source.

Sintaksis

cssselektor {
  background: radial-gradient([forma tip mövqe], rəng1 ölçü1, rəng2 ölçü2...);
}

Dəyərlər

Tip üçün dəyərlər

Qeyd

Tip və forma bir-biri ilə dəyişdirilə bilər, lakin mövqe ilk parametrin sonunda olmalıdır. Qradient tipi və onun ölçüsü bir-biri ilə işləmir (məntiqlidir, çünki onlar toqquşur). Ölçü qalib gəlir.

Nümunə . Ən sadə variant

Gəlin sadəcə başlanğıc və son rəngi təyin edək:

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

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

Результат:

Nümunə . Mövqe əlavə edək

Gəlin mərkəzin mövqeyini təyin edək: 30px - soldan boşluq, 100px - yuxarıdan boşluq:

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

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

Результат:

Nümunə . Faizlə mövqe

Gəlin mərkəzin mövqeyini faizlərlə təyin edək: 30% - soldan boşluq, 50% - yuxarıdan boşluq:

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

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

Результат:

Nümunə . Açar sözlə mövqe

top, bottom, left, right, center açar sözlərindən istifadə etmək olar. Müxtəlif kombinasiyalarda. Məsələn, qradienti solda mərkəzə quraq:

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

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

Результат:

Nümunə . Qradientin ölçüsü

Bu halda qradient belə işləyəcək: 0px-dan 20px-dək təmiz qırmızı rəng, 20px-dan 60px-dək - qırmızıdan maviyə qradient, 60px-dan sonra - təmiz mavi:

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

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

Результат:

Nümunə . Ardıcıl bir neçə rəng

Bu halda qradient belə işləyəcək: 0px-dan 20px-dək təmiz qırmızı rəng, 20px-dan 40px-dək təmiz mavi rəng, 40px-dan 60px-dək - mavidən yaşıla qradient, 60px-dan sonra - təmiz yaşıl:

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

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

Результат:

Nümunə . Ölçü + mövqe

Gəlin eyni zamanda müxtəlif rənglər üçün ölçüləri və qradientin mərkəzinin mövqeyini təyin edək:

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

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

Результат:

Nümunə . Qradientin forması

Qradientin forması ilk parametrlə təyin olunur və 2 dəyər qəbul edə bilər: circle (dairəvi qradient) və ya ellipse (elliptik qradient, standart olaraq). Bəs niyə bu vaxta qədər biz elliptik qradientlər görmədik, baxmayaraq ki, o standart olaraq təyin olunub? Çünki bu vaxta qədər blokların forması kvadrat idi. Əgər biz formanı düzbucaqlıya dəyişsək, onda elliptik qradienti görərik:

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

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

Результат:

Nümunə . Dairəvi qradient

Gəlin düzbucaqlı blokda dairəvi qradient edək. Bunun üçün ilk parametrdə circle açar sözü ilə qradientin formasını təyin edək:

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

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

Результат:

Nümunə . Mövqe əlavə edək

Gəlin əvvəlki koda həm də qradientin mövqeyini əlavə edək:

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

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

Результат:

Nümunə . Tip farthest-corner + circle

Qradientin forması uzaq küncə olan məsafə haqqında məlumat əsasında hesablanır:

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

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

Результат:

Nümunə . Tip farthest-corner + ellipse

Qradientin forması uzaq küncə olan məsafə haqqında məlumat əsasında hesablanır:

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

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

Результат:

Nümunə . Tip farthest-side + circle

Qradient uzaq tərəfə qədər yayılır:

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

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

Результат:

Nümunə . Tip farthest-side + ellipse

Qradient uzaq tərəfə qədər yayılır:

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

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

Результат:

Nümunə . Tip closest-corner + circle

Qradientin forması ən yaxın küncə olan məsafə haqqında məlumat əsasında hesablanır:

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

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

Результат:

Nümunə . Tip closest-corner + ellipse

Qradientin forması ən yaxın küncə olan məsafə haqqında məlumat əsasında hesablanır:

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

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

Результат:

Nümunə . Tip closest-side + circle

Qradientin forması ona ən yaxın olan blok tərəfi ilə üst-üstə düşür:

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

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

Результат:

Nümunə . Tip closest-side + ellipse

Qradientin forması ona ən yaxın olan blok tərəfi ilə üst-üstə düşür:

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

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

Результат:

Həmçinin baxın