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

استفاده از گردینت خطی در صفحات وب

آشنایی با ویژگی Linear Gradient
آشنایی با ویژگی Linear Gradient

منظور از 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 هست. این تابع در ساده ترین حالت خودش، می‌تونه ۲ رنگ رو قبول کنه.

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

استفاده از linear-gradient در CSS

<div id="parent">

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

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

background-image: linear-gradient(red,yellow)

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

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

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

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

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

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

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

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

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

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

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

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

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

background-image: linear-gradient(to left bottom,red,yellow)تو اینجا باید دو نکته مهم رو به خاطر بسپاریم:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

background-image: linear-gradient(60deg,red,yellow)

حالا فرض کنین که می خوایم مقدار 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، یعنی از ۱۰ تا ۹۰ درصد، دچار مخلوط شدن رنگ ها می‌شه.

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

مفهوم و کاربرد درصد ها در linear-gradient

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

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

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

background-image: linear-gradient(to right,green 10%,blue 90%)

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

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

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

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

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

و نتیجه کد:

background-image: linear-gradient(to right,green 10%,blue 50%, yellow 90%)

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

پایان ترم

[box type=”info” class=”question-from-users” width=””]

سوال:

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

کوییز مقاله ۴۵

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

<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 داشته باشن.

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

[/box]

نتیجه گیری

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

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

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

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

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

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

12 نظر

12 پاسخ

  1. Document

    *{
    box-sizing: border-box;
    }

    div.parent{
    width:30%;
    height:200px;
    display: flex;
    background-image: linear-gradient(to right,lightgreen 0%,lightgreen 20%,lightblue 0%, lightblue 100%);
    }

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

    div.first{
    width:20%;
    }

    div.second{
    width:80%;
    }

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

  2. سلام وقت بخیر ببخشید در قسمت اخر چرا رنگ ۹۰ درصد زرد از ابی۵۰ درصد کمتر بود و اینکه رنگی که ترکیب میشود : مثلا ابی و قرمز انوقت چگونه ترکیب میشود با چه کدی؟

    1. سلام وقت بخیر
      ۹۰ درصد به معنی این نیست که باید بیشتر از همه باشه، ۰ تا ۱۰۰ تا خونه در نظر بگیر و وقتی میگیم ۹۰ یعنی حدود خونه ۹۰ این رنگ باشه و به معنای ۰ تا ۹۰ نیست.
      متاسفانه سوال دومت بی ربط به مقاله بود حذف شد.
      موفق باشی.

  3. background-image: linear-gradient(to right,lightgreen 0,lightgreen 20%,lightblue 20%,lightblue 100%);
    این رو به کلاس پرنت یعنی پدر میدیم

  4. div.parent{
    width:30%;
    height:200px;
    display: flex;
    background-image:linear-gradient(to left , lightblue 80% , lightgreen 20%);
    }

  5. div.parent{
    width:30%;
    height:200px;
    display: flex;
    background-image: linear-gradient(to right,lightgreen 0%,lightgreen 20%,lightblue 0%, lightblue 100%);
    }

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=