جلسه بیستم: طیف رنگی Gradient در CSS

طیف رنگی Gradient در CSS

خوش اومدین به بیستمین جلسه از دوره آموزش رایگان CSS. ما در جلسات قبلی در مورد رنگ ها صحبت کردیم و با نحوه استفاده از رنگها توی CSS آشنا هستیم. حتی با کم کردن میزان شفافیت رنگها تونستیم حالتهای متفاوتی از رنگ رو بوجود بیاریم. ولی گاهی لازم داریم که رنگ پس زمینه ما از یک رنگ شروع بشه و به صورت یکنواخت و به تدریج به رنگ دیگه ای تبدیل بشه و در حقیقت یک طیف رنگی رو ایجاد کنه. البته میتونیم خودمون رو به دو رنگ محدود نکنیم و این طیف ما حاوی چندین رنگ باشه که به نرمی به همدیگه تبدیل شدند. برای این کار ما از ویژگی بنام Gradient توی CSS استفاده میکنیم. ما میتونیم دو یا چند رنگ رو در حالتهای مختلف بصورت یک طیف رنگی نمایش بدیم. برای آشنایی با ویژگی Gradient توی CSS با من همراه باشین.

انواع طیف رنگی (Gradient) در CSS

بطور کلی ما دو نوع طیف رنگی توی CSS داریم:

• Linear Gradients – یک طیف رنگی بین دو نقطه ایجاد میکنه. این طیف میتونه افقی، عمودی و یا مورب باشه
• Radial Gradients – یک طیف رنگی با محوریت مرکز عنصر رو ایجاد میکنه. طیف رنگی از مرکز عنصر ما شروع و به اطراف پراکنده میشه.

در اینجا به بررسی هر دو نوع میپردازیم.

روش Linear Gradient

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

ساختار کلی این روش به شکل زیر هست:

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

همینطور که در بالا میبینید ما میتونیم از این قابلیت در ویژگی background-image استفاده کنیم. در مقدار این ویژگی ابتدا کلمه کلیدی linear-gradient رو مینویسیم و پرانتز باز و بسته رو جلوی این عبارت قرار میدیم. سپس در داخل پرانتز میتونیم ابتدا جهت طیف رو مشخص کنیم(انتخابی است و مقدار پیشفرض بالا به پایین است) و بعد از اون با قرار دادن حداقل ۲ رنگ (که همه این مقادیر با کاما از هم جدا میشن) طیف رنگی خودمون رو ایجاد کنیم.

نمونه کد زیر رو ببینید:

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

همینطور که میبینید من جهت طیف رو مشخص نکردم و طبیعتا از مقدار پیشفرض یعنی بالا به پایین استفاده میشه. نتیجه کد بالا رو میتونیم در تصویر زیر ببینیم:

کد زیر رو ببینید:

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

در این مثال من جهت طیف رنگی رو مشخص کردم و گفتم که باید به سمت راست باشه (to right) به این ترتیب نقطه پایان طیف در سمت راست مشخص میشه. نتیجه کد بالا رو در تصویر زیر ببینید:

حالا اگه بخوایم که طیف ما بصورت مورب باشه و از یک گوشه شروع بشه و در طرف مقابل تموم بشه کافیه که در بخش اول، بجای left, right, top, bottom از اسم نقطه پایانی طیف استفاده کنم. نمونه زیر رو ببینید:

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

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

خروجی کد بالا را در زیر ببینید:

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

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

به این ترتیب میتونیم جهت طیف رنگی خودمون رو کاملا کنترل کنیم.

استفاده از چند رنگ در طیف رنگی Gradient در CSS

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

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

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

روش Radial Gradient

نحوه کارکردن با این روش هم دقیقا مشابه روش قبل است و این امکان رو داره که با ۲ رنگ یا بیشتر طیف رنگی ای ایجاد کنیم. در اینجا بجای اینکه جهت طیف رو تعیین کنیم میتونیم نوع طیف رو مشخص کنیم که میتونه یکی از دو مورد circle یا ellipse. در صورت تعیین نکردن نوع از مقدار پیشفرض که ellipse استفاده میشه.

نمونه زیر رو ببینید:

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

در کد بالا من از روش radial-gradient استفاده کردم و چون نوعی براش تعریف نکردم از مقدار پیشفرض بیضی استفاده میکنه. این طیف رنگی با سه رنگی که مشخص کردم رسم میشه. نتیجه این کد رو در پایین ببینید:

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

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

همونطور که میبینید من با وارد کردن درصد در جلوی هر رنگ میزان حضور رنگ در طیف رو مشخص کردم.

برای تعیین شکل طیف هم که پیشتر گفتم مقادیر circle و ellipese رو میگیره، میتونیم این مقدار رو بعد از پرانتز باز ایجاد کنیم و با کاما از رنگ ها جدا کنیم. نمونه زیر رو ببیینید:

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

در ویدیوی این جلسه طیف های رنگی متنوعی رو مثال میزنیم و بررسی میکنیم.

همه ویدیوهای دوره آموزش CSS