آموزش کار با رنگ Gradient در طراحی وب

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

آموزش کار با رنگ Gradient در طراحی وب

Free-Learn

کار با رنگ Gradient در طراحی وب

رنگ گریدینت یا به انگلیسی Gradient رنگی است که از ترکیب چندین رنگ دیگر بدست می آید، یعنی مثلا با استفاده از این رنگ میتوان یک باکس را همزمان هم آبی و هم قرمز و هم سبز کرد (بفرض مثال) .

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

یا حتی میتونیم از تعداد بیشتری از رنگ ها استفاده نماییم، بفرض مثال میتونیم بصورت همزمان از ۸ رنگ در باکس استفاده نماییم ، که همگی اینها توسط حالت Gradient ایجاد می شود.

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

background-image: radial-gradient(circle, #9822ab, #da1a82, #f4505b, #f38743, #e1b84a);
background-image: radial-gradient(circle, #11f267, #82e449, #afd63a, #cdc73c, #e1b84a);
background-image: radial-gradient(circle, #ff1f00, #ca4202, #9a4914, #6f4727, #463f39);

 

رنگ Gradient دو (۲) حالت دارد :

  • خطی (صاف)
  • شعاعی (دایره ای)

Free-Learn

کار با رنگ Gradient خطی (صاف)

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

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

  • direction : جهت پاشیدن رنگ را مشخص میکند
  • color1 : رنگ اول
  • color2 : رنگ دوم

مثال : پاشیدن رنگ از سمت چپ به راست

امتحان کنید

مثال شماره ۲ : پاشیدن رنگ از سمت راست به چپ

امتحان کنید

مثال شماره ۳ : پاشیدن رنگ از پایین به بالا

امتحان کنید

مثال شماره ۴ : پاشیدن رنگ از بالا به پایین

امتحان کنید

مثال شماره ۵ : استفاده بیش از ۴ رنگ بصورت خطی

امتحان کنید

Free-Learn

کار با رنگ Gradient خطی استفاده از زوایه

در این روش ما میتونیم بجای اینکه بیایم و جهت پاشیدن رنگ رو بصورت مثلا راست و چپ یا بالا و پایین مشخص کنیم ، این جهت رو بصورت درجه ای در یک زاویه خاصی تنظیم کنیم.

شکل کلی بصورت زیر می باشد :

مثال شماره ۱ : در زاویه ۹۰ درجه

امتحان کنید

مثال شماره ۲ : در زاویه ۹۰- درجه (برعکس مثال بالا میشه)

امتحان کنید

مثال شماره ۳ : در زاویه ۱۸۰ درجه

امتحان کنید

مثال شماره ۴ : در زاویه ۳۶۰ درجه

امتحان کنید

Free-Learn

کار با رنگ Gradient شعاعی (دایره ای)

در این روش رنگ بصورت شعاع (دایره ای) پاشیده می شود ،شکل کلی این روش بصورت زیر می باشد :

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

  • shape size at position : نوع و اندازه شکل را مشخص میکند
  • strat-color : رنگ شروع
  • last-color : رنگ پایانی

مثال شماره ۱ :

امتحان کنید

مثال شماره ۲ :

امتحان کنید

مثال شماره ۳ :

امتحان کنید

مثال شماره ۴ :

امتحان کنید

Free-Learn

نکات قابل توجه در رابطه با آموزش کار با رنگ Gradient در طراحی وب :

  • ممکن است بعضی از مرورگرها از این نوع رنگ پشتیبانی نکنند، لذا همیشه قبل از اینکه از این روش استفاده کنید با استفاده از ویژگی background یا background-color حتما یک رنگ برای پس زمینه عنصرتان مشخص نمایید.

برای مشاهده مجموعه ای از چندین رنگ Gradient لطفا اینجا کلیک نمایید.