گرادینت شعاعی در CSS

یک گرادینت شعاعی توسط مرکز آن تعریف می شود. برای ساختن یک گرادینت شعاعی باید حداقل دو توقف رنگ نیز تعریف کنیم.

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

به طور پیشفرض، شکل بیضی، اندازه دورترین گوشه و موقعیت در مرکز است.

گرادینت شعاعی-توقف رنگ با فاصله مساوی(پیشفرض)

مثال زیر یک گرادینت شعاعی با توقف های رنگی با فاصله مساوی را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
  height: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>گرادینت شعاعی-توقف رنگ با فاصله مساوی</h1>

<div id="grad1"></div>

</body>
</html>

گرادینت شعاعی-توقف رنگ با فاصله متفاوت

مثال زیر یک گرادینت شعاعی با توقف های رنگی با فاصله متفاوت را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad2 {
  height: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>گرادینت شعاعی-توقف رنگ با فاصله متفاوت</h1>

<div id="grad2"></div>

</body>
</html>

تنظیم شکل در CSS

پارامتر شکل، شکل را مشخص می کند که می تواند مقدار دایره یا بیضی را بگیرد. مقدار پیشفرض، بیضی است.

مثال زیر یک گرادینت شعاعی با شکل دایره را نشان می دهد:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad4 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(red, yellow, green);
}

#grad3 {
  height: 150px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>گرادینت شعاعی-شکل ها</h1>

<h2>بیضی (پیشفرض):</h2>
<div id="grad4"></div>

<h2><strong>دایره:</strong></h2>
<div id="grad3"></div>

</body>
</html>

استفاده از کلمات کلیدی با اندازه های مختلف

پارامتر اندازه، اندازه گرادینت را مشخص می کند که چهار مقدار:

نزدیکترین سمت
دورترین سمت
نزدیکترین گوشه
دورترین گوشه

را می پذیرد.

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
  height: 150px;
  width: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>گرادینت شعاعی-استفاده از کلمات کلیدی با اندازه های مختلف</h1>

<h2>نزدیکترین سمت:</h2>
<div id="grad1"></div>

<h2>دورترین سمت:</h2>
<div id="grad2"></div>

<h2>نزدیکترین گوشه:</h2>
<div id="grad3"></div>

<h2>دورترین گوشه (پیشفرض):</h2>
<div id="grad4"></div>

</body>
</html>

گرادینت شعاعی تکراری در CSS

تابع repeating-radial-gradient() برای تکرار شیب های شعاعی استفاده می شود:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
  height: 150px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>گرادینت شعاعی تکراری</h1>

<div id="grad1"></div>

</body>
</html>

خلاصه درس

در این درس با گرادینت های شعاعی در CSS:

تنظیم شکل
استفاده از کلمات کلیدی با اندازه های مختلف
گرادینت شعاعی تکراری

آشنا شدیم.

تمرین

مشاهده پاسخ

توسعه دهندگان

احسان اسلامی