Radial gradientlar

CSS radial-gradient() funksiyasi

CSS radial-gradient() funksiyasi radial gradient yaratadi.

Radial gradient — yoki ellips yoki doira bo‘lib, markaziy nuqtadan tashqariga tarqaladigan rang o‘tishiga ega.

Radial gradient kamida ikkita rang to‘xtashini talab qiladi. Rang to‘xtashlari — silliq o‘tishlarni amalga oshirishni xohlagan ranglaringiz.

Sintaksis

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

Standart holatda, shape ellipse, size farthest-corner, va position center (markaz) bo‘ladi.

Radial gradient — teng taqsimlangan rang to‘xtashlari (bu standart)

Quyidagi misol teng taqsimlangan rang to‘xtashli radial gradientni ko‘rsatadi:

Misol

#grad {
background-image: radial-gradient(red, yellow, green);
}

O‘zingiz sinab ko‘ring »

Radial gradient — turli oraliqli rang to‘xtashlari

Quyidagi misol har xil taqsimlangan rang to‘xtashli radial gradientni ko‘rsatadi:

Misol

#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

O‘zingiz sinab ko‘ring »

Radial gradient — shaklni belgilash

shape parametri gradient shaklini belgilaydi. U quyidagi qiymatlardan birini qabul qilishi mumkin:

ellipse (bu standart)
circle

Quyidagi misol doira shaklidagi radial gradientni ko‘rsatadi:

Misol

#grad {
background-image: radial-gradient(circle, red, yellow, green);
}

O‘zingiz sinab ko‘ring »

Radial gradient — size parametri

size parametri gradient tugash shakli o‘lchamini belgilaydi. U quyidagi qiymatlardan birini qabul qilishi mumkin:

closest-side
farthest-side
closest-corner
farthest-corner (bu standart)

Misol

Turli size kalit so‘zlari bilan radial gradient:

#grad1 {
background-image: radial-gradient(closest-side at 70% 60%, red, yellow, black);
}

#grad2 {
background-image: radial-gradient(farthest-side at 70% 60%, red, yellow, black);
}

O‘zingiz sinab ko‘ring »

CSS repeating-radial-gradient() funksiyasi

CSS repeating-radial-gradient() funksiyasi radial gradientlarni takrorlash uchun ishlatiladi:

Misol

Takrorlanuvchi radial gradient:

#grad {
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

O‘zingiz sinab ko‘ring »

W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!

Ro'yxatdan o'tish Kirish