آموزش کار با رنگ 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

پشتیبانی مرورگرها از رنگ های گرادینت

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

دستور پیشوندی :

  • -webkit-
  • -moz-
  • -o-

webkit برای پشتیبانی گوگل کروم از نسخه ۱۰ تا ۲۵ و مرورگر سافاری از ۵٫۱ تا ۶ و moz برای پشتیبانی موزیلا فایرفاکس از نسخه ۳٫۶ تا ۱۶ و o برای پشتیبانی اُپرا Opera از نسخه ۱۱٫۱ تا ۱۲٫۱

یک مثال برای نحوه استفاده از این پیشوندها :

Free-Learn

مشاهده ابزار آنلاین تولید رنگ گرادینت

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

  • همونطور که اشاره کردم برخی از مرورگرهای اینترنتی ( نسخه / ورژن های قدیمی تر ) از این نوع رنگ پشتیبانی نمیکنند، لذا باید از پیشوندهای webkit , moz , o استفاده نمایید.
  • اگر میخواهید از همه ی پیشوندهای مشخص شده استفاده نکنید، لطفا و حداقل از webkit استفاده نمایید.
  • همیشه قبل از اینکه از این روش استفاده کنید با استفاده از ویژگی background یا background-color حتما یک رنگ برای پس زمینه عنصرتان مشخص نمایید. تا در صورت عدم نمایش گرادینت ، رنگ عادی زمینه نمایش داده شود.

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

برای مشاهده ابزار آنلاین [ تولید رنگ گرادینت ] فری لرن لطفا اینجا کلیک نمایید.

Free-Learn

Advertising
دریافت PDF یا پرینت این مطلب