گرادینت شعاعی در CSS
یک گرادینت شعاعی توسط مرکز آن تعریف می شود. برای ساختن یک گرادینت شعاعی باید حداقل دو توقف رنگ نیز تعریف کنیم.
background-image: radial-gradient(shape size at position, start-color, ..., last-color);به طور پیشفرض، شکل بیضی، اندازه دورترین گوشه و موقعیت در مرکز است.
گرادینت شعاعی-توقف رنگ با فاصله مساوی(پیشفرض)
مثال زیر یک گرادینت شعاعی با توقف های رنگی با فاصله مساوی را نشان می دهد:
background-image: radial-gradient(red, yellow, green);گرادینت شعاعی-توقف رنگ با فاصله متفاوت
مثال زیر یک گرادینت شعاعی با توقف های رنگی با فاصله متفاوت را نشان می دهد:
background-image: radial-gradient(red 5%, yellow 15%, green 60%);تنظیم شکل در CSS
پارامتر شکل، شکل را مشخص می کند که می تواند مقدار دایره یا بیضی را بگیرد. مقدار پیشفرض، بیضی است.
مثال زیر یک گرادینت شعاعی با شکل دایره را نشان می دهد:
background-image: radial-gradient(red, yellow, green);استفاده از کلمات کلیدی با اندازه های مختلف
پارامتر اندازه، اندازه گرادینت را مشخص می کند که چهار مقدار:
- نزدیکترین سمت
- دورترین سمت
- نزدیکترین گوشه
- دورترین گوشه
را می پذیرد.
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);گرادینت شعاعی تکراری در CSS
تابع repeating-radial-gradient() برای تکرار شیب های شعاعی استفاده می شود:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);خلاصه درس
در این درس با گرادینت های شعاعی (radial geradient) در CSS:
- تنظیم شکل
- استفاده از کلمات کلیدی با اندازه های مختلف
- گرادینت شعاعی تکراری
آشنا شدیم.
تمرین
مشاهده پاسخ
توسعه دهندگان
احسان اسلامی
