جلسه ۴۵ – linear gradient در CSS

منظور از Linear Gradient چیست؟ چگونه گردینت خطی ایجاد کنیم؟ منظور از گردینت چیست؟ چگونه به تصاویرمان گردینت خطی اعمال کنیم؟ در این مقاله قصد داریم تا در رابطه گردینت خطی یا Linear Gradient صحبت کنیم.

برای استفاده از این رنگ ها، برخلاف رنگ های solid، از خاصیت background-color استفاده نمی کنیم. بلکه خاصیت مورد استفاده ما تو این فصل، خاصیت background-image هست.

در یک دیدگاه کلی، خاصیت های مورد استفاده توسط رنگ های solid و gradient به شرح زیره:

• background-color: برای رنگ های solid
• background-image: برای رنگ های gradient
• background: مشترک بین هر دو نوع رنگ

حالا خاصیت background-image چطور قراره این نوع از رنگ ها رو، به پس زمینه ما اختصاص بده؟

مقدار ()linear-gradient

اولین مقداری که ما به خاصیت background-image می تونیم اختصاص بدیم، تابع ()linear-gradient هست. این تابع در ساده ترین حالت خودش، می‌تونه ۲ رنگ رو قبول کنه.

به مثال زیر توجه کنین:

<div id="parent">

</div>

#parent{
   background-image: linear-gradient(red,yellow);
   height:200px;
   width:200px;
}

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

میبینیم که تابع linear-gradient، از رنگ اول شروع کرد، به سمت پایین عنصر اومد و تو رنگ دوم، پیش زمینه رو تموم کرد.

حالا سوال پیش میاد، اگه نخوایم رنگ از چپ بره به راست، یا از پایین بره به بالا، چیکار باید کنیم؟

جهت دهی در تابع ()linear-gradient

ما به دو شکل، می تونیم جهت رنگ رو در این تابع تغییر بدیم.

جهت دهی استاندارد

برای این منظور، کافیه به اول مقادیر دریافتی توسط ()linear-gradient، جهت مورد نظرمون رو اضافه کنیم. به مثال زیر توجه کنین:

#parent{
   background-image: linear-gradient(to right,red,yellow);
   height:200px;
   width:200px;
}

با اضافه کردن ورودی to right به تابع ()linear-gradient، این مفهومو می رسونیم: از سمت چپ شروع کن و به سمت راست حرکت کن.

نتیجه به صورت زیر قابل مشاهده هست:

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

#parent{
   background-image: linear-gradient(to left bottom,red,yellow);
   height:200px;
   width:200px;
}

تو این مثال، از ورودی to left bottom استفاده کردیم. نتیجه به فرم زیر خواهد بود:

تو اینجا باید دو نکته مهم رو به خاطر بسپاریم:

• همیشه برای جهت دهی ترکیبی، اول right و left رو بنویسید و بعد top یا bottom.
• هر جهتی که  به تابع ()linear-gradient بدید، باعث میشه که رنگ از سمت “مخالف جهت شما” شروع به رشد کنه و به سمت جهتی بره که شما وارد کردین.

جهت دهی زاویه ای

این نوع از جهت دهی، دست ما رو خیلی باز تر می‌کنه.

تو جهت دهی استاندارد، نهایت جهتی که می‌تونستیم بدیم با استفاده از جهت های ترکیبی بود که زاویه ۴۵ درجه می‌ساختن.

اما توسط جهت دهی زاویه ای، می‌تونیم هر زاویه ای که نیاز داشته باشیم رو وارد کنیم.

به دیاگرام زیر توجه کنین:

تو دیاگرام فوق، با سه مفهوم سر و کار داریم:

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

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

توسط دیاگرامی که دیدیم، می تونیم متوجه بشیم که تمام جهت های ترکیبی، تو بخش جهت دهی استاندارد، از زاویه ۴۵ درجه بهره می برن.

حالا به مثال زیر توجه کنین:

#parent{
   background-image: linear-gradient(60deg,red,yellow);
   height:200px;
   width:200px;
}

طبق کد فوق، باید خط زاویه ساز، با خط مبدا زاویه ۶۰ درجه بسازه.

به اصطلاحی، رنگ دوم باید ۶۰ درجه ساعتگرد بچرخه، نتیجه رو به فرم زیر مشاهده می کنیم:

حالا فرض کنین که می خوایم مقدار fade شدن ها و مخلوط شدنشون رو کاهش یا افزایش بدیم، چطور این کار رو باید انجام بدیم؟

درصد رنگ ها در ()linear-gradient

درصد رنگ ها به ما کمک می کنه که محل تلاقی رنگ ها رو کنترل کنیم. توسط درصد دادن به رنگ ها، می‌تونیم به طور کلی gradient بین رنگ ها رو بیشتر و یا کمتر کنیم.

به کد زیر توجه کنین:

#parent{
    background-image: linear-gradient(to right,green 0%,green 10%,blue 90%, blue 100%);
    height:200px;
    width:200px;
}

این کد، رنگ رو از سمت چپ به سمت راست رشد می‌ده.

از ابتدا تا ده درصد عرض div، رنگ سبز رو می‌بره، و از ۹۰ درصد تا انتهای div، رنگ آبی رو هدایت می‌کنه.

باقی مونده عرض div، یعنی از ۱۰ تا ۹۰ درصد، دچار مخلوط شدن رنگ ها می‌شه.

برای درک بهتر، به عکس زیر توجه کنین:

همینطور کد فوق رو به صورت زیر هم می‌شه نوشت:

#parent{
   background-image: linear-gradient(to right,green 10%,blue 90%);
   height:200px;
   width:200px;
}

که مجددا نتیجه قبل رو بهمون می‌ده:

اگه در جایی از مباحث احساس ابهام کردین، حتما سوالتون رو تو قسمت نظرات بپرسین، ما هواتونو داریم 🙂

استفاده از چندین رنگ در ()linear-gradient

با استفاده از مقدار ()linear-gradient، می‌تونیم از بیشتر از ۲ رنگ هم استفاده کنیم.

به مثال زیر دقت کنین:

#parent{
   background-image: linear-gradient(to right,green 10%,blue 50%, yellow 90%);
   height:200px;
   width:200px;
}

و نتیجه کد:

خب، این مقاله اول از این فصل بود، در مقاله ی بعد،‌ مفهوم radial gradient رو باهم دیگه یاد می‌گیریم! 🙂

پایان ترم

سوال:

به شکل زیر دقت کنین:

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

<div class="parent">
   <div class="first"></div>
   <div class="second"></div>
</div>

*{
    box-sizing: border-box;
}

div.parent{
   width:30%;
   height:200px;
   display: flex;
}

div.parent div{
   height:100%;
   border:1px solid black;
}

div.first{
   width:20%;
}

div.second{
   width:80%;
}

چطور می‌تونیم تنها با استفاده از یک دستور، مستطیل first رو به رنگ lightgreen و مستطیل second رو به رنگ lightblue در بیاریم؟

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

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

نتیجه گیری

در این مقاله آموزش کامل css3 ، متوجه شدیم که چطور می‌تونیم رنگ ها رو از حالت solid در CSS دربیاریم و از حالت gradient استفاده کنیم.

در این راستا، کافی بود که از خاصیت background-image یا background استفاده کنیم.

همچنین، یاد گرفتیم که می‌تونیم رنگ های gradient رو، توسط اعداد و کلمات کلیدی، در جهت های مختلف گسترش بدیم.

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

مدیر محتوا: علی اسمعیلی‌