radial-gradient funksiýasy

radial-gradient funksiýasy radial gradient kesgitleýär. Bu funksiýa fon suratyny kesgitläýän häsiýetlere: background, background-image ýa-da çäginiň suratyna: border-image, background-image-source.

Sintaksis

cssselektor {
  background: radial-gradient([görnüş tip ýerleşiş], reňk1 ölçegi1, reňk2 ölçegi2...);
}

Görnüşleri

Tip üçin görnüşler

Bellik

Tip bilen görnüşi ýerlerini çalşyp bolýar, ýöne ýerleşiş biriniň parametriniň soňunda bolmaly. Gradientiň tipi we onuň ölçegi biri-biri bilen işlemeýär (mantykly, sebäbi olar ýaraglaşýar). Ösýän ölçegdir.

Mysal . Iň ýönekeý wariant

Geliň diňe başlangyç we gutaryş reňkini kesgitläýäris:

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

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

Результат:

Mysal . Ýerleşiş goşalyň

Merkeziň ýerleşişini kesgitläýäris: 30px - çep tarapdan, 100px - ýokardan:

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

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

Результат:

Mysal . Prosentde ýerleşiş

Merkeziň ýerleşişini prosentde kesgitläýäris: 30% - çep tarapdan, 50% - ýokardan:

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

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

Результат:

Mysal . Açar söz bilen ýerleşiş

Açar sözler top, bottom, left, right, center dürli bilelikde ulanylyp bilner. Mysal üçin, gradienti sagda merkezde goýýarys:

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

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

Результат:

Mysal . Gradientiň ölçegi

Bu ýagdaýda gradient şeýle işleýär: 0px-dan 20px çenli arassa gyzyl reňk, 20px-dan 60px çenli - gradient gyzyl reňkden gök reňke, 60px-dan soň - arassa gök reňk:

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

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

Результат:

Mysal . Birnäçe reňk bir hatarda

Bu ýagdaýda gradient şeýle işleýär: 0px-dan 20px çenli arassa gyzyl reňk, 20px-dan 40px çenli arassa gök reňk, 40px-dan 60px çenli - gradient gök reňkden ýaşyl reňke, 60px-dan soň - arassa ýaşyl reňk:

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

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

Результат:

Mysal . Ölçeg + ýerleşiş

Durmuşda dürli reňkler üçin ölçegleri we gradientiň merkeziniň ýerleşişini kesgitläýäris:

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

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

Результат:

Mysal . Gradientiň görnüşi

Gradientiň görnüşi birinji parametr bilen kesgitlenýär we 2 görnüşi kabul edip bilýär: circle (tegelek gradient) ýa-da ellipse (elliptik gradient, deslapky ýagdaýda). Näme üçin biz elliptik gradientleri görmänok, eger-de ol deslapky ýagdaýda kesgitlenýän bolsa? Sebäbi, şu wagt çäp bloklary kwadrat görnüşli boldu. Eger biz görnüşini düzbucakly eden bolsak, onda elliptik gradienti göreris:

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

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

Результат:

Mysal . Tegelek gradient

Geliň düzbucakly blokda tegelek gradient döredeliň. Bunun üçin birinji parametr bilen gradientiň görnüşini açar söz circle bilen kesgitläýäris:

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

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

Результат:

Mysal . Ýerleşiş goşalyň

Geliň öňki koda gradientiň ýerleşişini-de goşalyň:

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

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

Результат:

Mysal . farthest-corner tipi + circle

Gradientiň görnüşi blok bilen iň uzak burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:

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

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

Результат:

Mysal . farthest-corner tipi + ellipse

Gradientiň görnüşi blok bilen iň uzak burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:

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

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

Результат:

Mysal . farthest-side tipi + circle

Gradient uzak tarapa çenli ýaýraýar:

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

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

Результат:

Mysal . farthest-side tipi + ellipse

Gradient uzak tarapa çenli ýaýraýar:

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

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

Результат:

Mysal . closest-corner tipi + circle

Gradientiň görnüşi blok bilen iň ýakyn burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:

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

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

Результат:

Mysal . closest-corner tipi + ellipse

Gradientiň görnüşi blok bilen iň ýakyn burç bilen bolan aralyk baradaky maglumat esasynda hasaplanylýar:

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

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

Результат:

Mysal . closest-side tipi + circle

Gradientiň görnüşi blok bilen iň ýakyn tarapyna gabat gelýär:

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

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

Результат:

Mysal . closest-side tipi + ellipse

Gradientiň görnüşi blok bilen iň ýakyn tarapyna gabat gelýär:

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

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

Результат:

Hem-de serediň