گرادینت شعاعی در CSS
گرادینت شعاعی (radial gradient)، یک طیف دایره ای از مرکز دایره به سمت بیرون می سازد.
background-image: radial-gradient(shape|size|position, color-stop1, color-stop2);برای ایجاد گرادینت شعاعی باید از:
- شکل، اندازه و محل طیف رنگ (اختیاری)
- حداقل از دو توقف رنگ (color-stop) استفاده کنیم. (اجباری)
نکته: به رنگ هایی که در گرادینت استفاده می شود، توقف های رنگی گفته می شود.
گرادینت شعاعی به طور پیش فرض، به شکل بیضی است.
background-image: radial-gradient(red, green, blue);شکل گرادینت شعاعی در CSS
گرادینت شعاعی به دو شکل:
- بیضی با مقدار ellipse (پیش فرض)
- دایره با مقدار circle
می باشد.
در شکل زیر یک گرادینت شعاعی به شکل دایره ساخته ایم:
background-image: radial-gradient(ellipse, red, green, blue);
background-image: radial-gradient(circle, red, green, blue);در گرادینت شعاعی می توان فاصله توقف های رنگی مشخص کرد.
background-image: radial-gradient(#f00 5%, #0f0 15%, #00f 60%);محل و اندازه ی گرادینت شعاعی در CSS
محل قرارگیری گرادینت شعاعی را می توان با دو مقدار x و y مشخص کرد. با این دو مقدار، مختصات مرکز دایره را مشخص می کنیم.
background-image: radial-gradient(circle at x y, red, green, blue);
background-image: radial-gradient(circle at 20% 20%, red, green, blue);
background-image: radial-gradient(circle at 20% 80%, red, green, blue);
background-image: radial-gradient(circle at 80% 20%, red, green, blue);
background-image: radial-gradient(circle at 80% 80%, red, green, blue);نکته: توجه کنید حتما قبل از مقدار x و y باید از کلمه at استفاده کنید.
نکته: محل قرارگیری پیش فرض گرادینت شعاعی، مرکز المان (۵۰٪ ۵۰٪) است.
گرادینت شعاعی چهار اندازه دارد:
- closest-side: گرادینت در حالتی قرار می گیرد که آخرین رنگ آن (انتهای شعاع)، به نزدیکترین ضلع المان بچسبد.
- closest-corner: گرادینت در حالتی قرار می گیرد که آخرین رنگ آن (انتهای شعاع)، به نزدیکترین گوشه المان بچسبد.
- farthest-side: گرادینت در حالتی قرار می گیرد که آخرین رنگ آن (انتهای شعاع)، به دورترین ضلع المان بچسبد.
- farthest-corner: گرادینت در حالتی قرار می گیرد که آخرین رنگ آن (انتهای شعاع)، به دورترین گوشه المان بچسبد.
background-image: radial-gradient(circle closest-side, red, green, blue);
background-image: radial-gradient(circle closest-corner, red, green, blue);
background-image: radial-gradient(circle farthest-side at 20% 20%, red, green, blue);
background-image: radial-gradient(circle farthest-corner at 20% 20%, red, green, blue);نکته: اندازه ی پیش فرض گرادینت شعاعی، farthest-corner است.
گرادینت شعاعی تکراری در CSS
تابع repeating-radial-gradient() برای گرادینت شعاعی تکراری استفاده می شود.
background-image: repeating-radial-gradient(#f00, #0f0 10%, #00f 15%);خلاصه درس
در این درس با گرادینت های شعاعی (radial geradient) در CSS:
- شکل گرادینت شعاعی
- محل و اندازه ی گرادینت شعاعی
- گرادینت شعاعی تکراری
آشنا شدیم.
احسان اسلامی
