آموزش تابع linear-gradient در CSS

در سلسله مقالات معرفی توابع کاربردی در CSS به یکی از توابع کاربردی در زمینه رنگ و لعاب رسیدیم . این تابع linear-gradient نام دارد . اگر با مفاهیم رنگ و انواع مختلف آنها آشنایی داشته باشید ، احتمالا با کلمه gradient نیز آشنایی دارید . کلمه linear در لغت به معنی خطی است .

شما در پروژه‌های طراحی سایت عادت کرده‌اید تا همواره از یک رنگ برای پس زمینه باکس‌ها استفاده کنید مثلا رنگ آبی و قرمز و . … همانند دستور زیر :

background-color : #faf4f4;

اما توسط linear-gradient می‌توانید علاوه بر یک رنگ از چندین رنگ مختلف برای نمایش استفاده کنید . مثلا رنگ آبی و قرمز را کنارهم استفاده کنید . دستور کلی این تابع بصورت زیر است :

linear-gradient( direction, color1, color2, color3, color4 ,... );

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

linear-gradient( to right, color1, color2, color3, color4 ,... );

و یا بصورت زیر همراه با درجه پاشش :

linear-gradient( 45deg, color1, color2, color3, color4 ,... );

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

div.linear-c {
 background-image: linear-gradient(to right, red 20%, orange 50%);
 height:70px;
}

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

مشاهده می‌کنید که باکس شما دارای 2 رنگ قرمز و نارنجی است . البته در این بخش یک واحد % نیز به کنار اسم هر رنگ اضافه شده است . اگر شما از واحد % استفاده نکنید ، چون 2 عدد کد رنگ یا اسم رنگ داخل دستور استفاده شده است ، سهم هر رنگ از این پاشش برابر 50% خواهد بود . اما چون خودمان قصد داشتیم تا سهم هررنگ را به دلخواه خودمان تنظیم کنیم ، میزان سهم هررنگ را تعیین کرده‌ایم .

اگر در داخل linear-gradient سه رنگ داشته باشید ، سهم هررنگ به اندازه 1/3 خواهد بود . لذا می‌توانید مقادیر % برای هررنگ را نیز داخل این دستور تعریف کنید .

تعیین جهت رنگ با linear-gradient

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

background-image: linear-gradient(30deg, red, orange);

اکنون به خروجی این دستور دقت کنید :

می‌توانید با تغییر زاویه پاشش رنگ ، جهت gradient را نیز تغییر دهید .  اکنون یک رنگ دیگر نیز در این بخش اضافه می‌کنیم تا خروجی کار را مشاهده کنیم :

background-image: linear-gradient(to top, red, orange, #eee);

اکنون به این مثال بخوبی دقت کنید :

همانطور که مشاهده می‌کنید با تعیین جهت بسمت بالا یا همان پارامتر اول تابع که بصورت to top تنظیم شده است ، پاشش رنگ از سمت پایین و رنگ قرمز به سمت بالا و رنگ مشکی تغییر یافته است دقت کنید که عبارت ” to top ” را بصورت چسبان ننویسید . برای ایجاد یک طیف رنگ محو شونده نیز می‌توانید به شکل زیر عمل کنید :

background-image: linear-gradient(to right, red, transparent);

اکنون خروجی این دستور بصورت زیر است :

در این بخش می‌توانید درصد رنگ قرمز را کم و درصد بخش transparent را بیشتر کنید . اگر مایل هستید تا درصد رنگ قرمز با طیف بهتری رو به محو شدن برود ، می‌توانید از یک رنگ قرمز با رنگ روشن تر و درصد کمتر در وسط دستور استفاده کنید . یعنی یک رنگ قرمز ، بعلاوه یک رنگ قرمز روشن و نهایتا بخش transparent . خلاقیت در مورد ساخت gradient بصورت linear بستگی به شما دارد اما می‌توان توسط برخی ابزارها ، linear های جذاب را ایجاد کرد .

وب سایت ساخت gradient

درمورد ابزارهای آنلاین برای ساخت gradient ، سایت‌های بسیاری وجود دارند اما یکی از بهترین سایت‌ها برای این کار می‌تواند سایت ” cssgradient.io ” باشد . اگر وارد این وب سایت شوید ، با صفحه زیر روبرو هستید :

در این بخش می‌توانید با انتخاب رنگ و تعداد رنگ ، یک gradient ایجاد کرده و نهایتا از کد آن استفاده کنید . کار با این وب سایت بسیار راحت بوده و نیاز به آموزش ندارد . در این سایت برخی gradient های پیشفرض نیز وجود دارند که می‌توانید از آنها استفاده کنید . با ایجاد هر تغییر در پالت رنگ ، پیش‌نمایش gradient شما در بالای صفحه نمایش داده شده و همان لحظه کدی که نیاز دارید در ادیتور کوچک پایین صفحه نمایان خواهد شد .

در این بخش برای ایجاد گردینت از ویژگی background-image استفاده کردیم اما شما می‌توانید دستور گردینت را برای بخش background نیز بصورت زیر ایجاد کنید :

background: linear-gradient(to right, red, transparent);

البته در سمت چپ و پایین باکس رنگ ، دو گزینه بنام Linear و Radial وجود دارد که می‌توانید با تغییر گزینه Linear به Radial از حالت دایره‌ای برای پاشش رنگ در gradient استفاده کنید که در مقاله بعدی در این مورد نکات مهم را خدمتتان آموزش خواهیم داد . پس در مقاله بعدی نیز همراه ما باشید .