آموزش گرادینت-gradient خطی در CSS | آموزش کامل + نمونه کد

گرادینت های خطی در CSS

برای ساختن یک گرادینت خطی (شیب خطی) باید حداقل دو توقف رنگی تعریف کنیم. توقف های رنگی، رنگ هایی هستند که ما می خواهیم انتقال های یکدست را میان آنها ایجاد کنیم. همچنین می توانیم یک نقطه شروع و یک مسیر (یا یک زاویه) را همراه با افکت گرادینت تنظیم کنیم.

مسیر از بالا به پایین (پیشفرض)

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

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

<h1>گرادینت خطی-از بالا به پایین</h1>
<p>این گرادینت خطی از بالا و از سبز شروع می شود و در پایین به زرد تبدیل می شود:</p>

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

</body>
</html>

مسیر از چپ به راست

مثال زیر یک گرادینت خطی را نشان می دهد که از چپ شروع می شود و از سبز به زرد تبدیل می شود:

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

<h1>گرادینت خطی-از چپ به راست</h1>
<p>این گرادینت خطی از چپ و از سبز شروع می شود و در راست به زرد تبدیل می شود:</p>

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

</body>
</html>

مسیر مورب

ما می توانیم با مشخص کردن موقعیت های شروع افقی و عمودی، یک گرادینت به صورت مورب ایجاد کنیم.

مثال زیر یک گرادینت خطی را نشان می دهد که از بالا سمت چپ شروع می شود و به پایین سمت راست می رود. از سبز شروع شده و به زرد تبدیل می شود:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad3 {
  height: 200px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, green, yellow);
}
</style>
</head>
<body>

<h1>گرادینت خطی-مورب</h1>
<p>این گرادینت خطی از بالا سمت چپ سبز شروع می شود و به زرد (در پایین سمت راست) تبدیل می شود:</p>

<div id="grad3"></div>

</body>
</html>

استفاده از زاویه ها در CSS

اگر بخواهیم کنترل بیشتری بر جهت گرادینت ها داشته باشیم، می توانیم به جای جهت های از پیش تعریف شده ( پایین، بالا، راست، چپ، پایین راست و غیره) یک زاویه تعریف کنیم:

مقدار 0 درجه معادل "رو به بالا" است.
مقدار 90 درجه معادل "رو به راست" است.
مقدار 180 درجه معادل "رو به پایین" است.

background-image: linear-gradient(angle, color-stop1, color-stop2);

مثال زیر نحوه استفاده از زاویه ها در گرادینت های خطی را نشان می دهد:

180درجه

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

#grad2 {
  height: 100px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, green, yellow);
}

#grad3 {
  height: 100px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, green, yellow);
}

#grad4 {
  height: 100px;
  background-color: green; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, green, yellow);
}
</style>
</head>
<body>

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

<div id="grad1" style="text-align:center;">0درجه</div><br>
<div id="grad2" style="text-align:center;">90درجه</div><br>
<div id="grad3" style="text-align:center;">180درجه</div><br>
<div id="grad4" style="text-align:center;">-90درجه</div>

</body>
</html>

استفاده از چندین توقف رنگی در CSS

مثال زیر یک گرادینت خطی (از بالا به پایین) را با توقف های رنگی متعدد نشان می دهد:

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

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>گرادینت های خطی - توقف های رنگی چندگانه</h1>
<p> توقف های رنگ زمانی که هیچ درصدی مشخص نشده باشد، به طور مساوی فاصله می گیرند.</p>

<h2>سه توقف رنگ (با فاصله یکنواخت):</h2>
<div id="grad1"></div>

<h2>هفت توقف رنگ (با فاصله یکنواخت):</h2>
<div id="grad2"></div>

<h2>سه توقف رنگ (بدون فاصله یکنواخت):</h2>
<div id="grad3"></div>

</body>
</html>

مثال زیر یک گرادینت خطی (از چپ به راست) با رنگ رنگین کمان و مقداری متن را نشان می دهد:

پس زمینه رنگین کمانی

<!DOCTYPE html>
<html>
<head>
<style>
#grad4 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad4" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
پس زمینه رنگین کمانی
</div>

</body>
</html>

استفاده از شفافیت در CSS

گرادینت های CSS همچنین از شفافیت پشتیبانی می کنند که می تواند برای ایجاد جلوه های محو شدن استفاده شود.

برای افزودن شفافیت، از تابع rgba() برای تعریف توقف های رنگ استفاده می کنیم. آخرین پارامتر در تابع rgba() می تواند مقداری از 0 تا 1 باشد و شفافیت رنگ را مشخص می کند: 0 شفافیت کامل را نشان می دهد، 1 نشان دهنده رنگ کامل (بدون شفافیت) است.

مثال زیر یک گرادینت خطی را نشان می دهد که از سمت چپ شروع می شود. کاملا شفاف شروع می شود و به رنگ قرمز کامل تبدیل می شود:

<!DOCTYPE html>
<html dir="rtl">
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>گرادینت خطی-شفافیت</h1>
<p>برای افزودن شفافیت، از تابع rgba() برای تعریف توقف های رنگ استفاده می کنیم. آخرین پارامتر در تابع rgba() می تواند مقداری از 0 تا 1 باشد و شفافیت رنگ را مشخص می کند: 0 شفافیت کامل را نشان می دهد، 1 نشان دهنده رنگ کامل (بدون شفافیت) است.</p>

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

</body>
</html>

استفاده از گرادینت خطی تکراری در CSS

repeating-linear-gradient() برای تکرار گرادینت های خطی استفاده می شود:

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

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>تکرار یک گرادینت خطی</h1>

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

<p>یک گرادینت تکراری در 45 درجه که از قرمز شروع می شود و با رنگ سبز به پایان می رسد:
</p>
<div id="grad2"></div>

<p>یک گرادینت تکراری در 190 درجه که از قرمز شروع می شود و با رنگ سبز به پایان می رسد:</p>
<div id="grad3"></div>

<p>یک گرادینت تکراری در 90 درجه که با قرمز شروع و با سبز تمام می شود:</p>
<div id="grad4"></div>

<p>یک گرادینت تکراری در 45 درجه با نوارهای تک رنگ:</p>
<div id="grad5"></div>

</body>
</html>

خلاصه درس

در این درس با گرادینت های خطی در CSS:

استفاده از زاویه ها
استفاده از چندین توقف رنگ
استفاده از شفافیت
استفاده از گرادینت خطی تکراری

آشنا شدیم.

تمرین

مشاهده پاسخ

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

احسان اسلامی

گرادینت خطی در CSS