این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کار با رنگ Gradient در طراحی وب
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با رنگ Gradient در طراحی وب با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با رنگ Gradient در طراحی وب
رنگ گریدینت یا به انگلیسی Gradient رنگی است که از ترکیب چندین رنگ دیگر بدست می آید، یعنی مثلا با استفاده از این رنگ میتوان یک باکس را همزمان هم آبی و هم قرمز و هم سبز کرد.
عملا میشه گفت با استفاده از این روش میتوان از چندین رنگ درون یک باکس بصورت همزمان و ترکیبی استفاده کرد، یعنی مثلا سمت راست یک باکس رو آبی کنیم و وسطش رو قرمز و سمت چپش رو سبز.
یا حتی میتونیم از تعداد بیشتری از رنگ ها استفاده نماییم، بفرض مثال میتونیم بصورت همزمان از ۸ رنگ در باکس استفاده نماییم ، که همگی اینها توسط حالت Gradient ایجاد می شود.
نمونه هایی از یک رنگ گریدینت :
حالت های مختلف یک رنگ Gradient بصورت زیر می باشد :
- خطی ( linear-gradient )
- شعاعی ( radial-gradient )
- مخروطی ( conic-gradient )
Free-Learn
کار با رنگ Gradient خطی (صاف)
همونطور که از اسمش هم مشخصه در این روش بصورت خطی از رنگ ها میتوان استفاده کرد، شکل کلی نحوه استفاده از این روش :
|
1 |
background-image: linear-gradient(direction, color1, color2, ...); |
توضیح بخش های موجود در پرانتز شکل بالا :
- direction : جهت پاشیدن رنگ را مشخص میکند
- color1 : رنگ اول
- color2 : رنگ دوم
مثال : پاشیدن رنگ از سمت چپ به راست
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,red,blue); height:70px; } </style> |
مثال شماره ۲ : پاشیدن رنگ از سمت راست به چپ
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to left,red,blue); height:70px; } </style> |
مثال شماره ۳ : پاشیدن رنگ از پایین به بالا
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to top,red,blue); height:70px; } </style> |
مثال شماره ۴ : پاشیدن رنگ از بالا به پایین
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to bottom,red,blue); height:70px; } </style> |
مثال شماره ۵ : استفاده از چندین رنگ مختلف بصورت خطی
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,#673AB7,#2196F3,#87C540,#EA4335,#202340,#F4A521); height:70px; } </style> |
Free-Learn
کار با رنگ Gradient خطی استفاده از زوایه
در این روش ما میتونیم بجای اینکه بیایم و جهت پاشیدن رنگ رو بصورت مثلا راست و چپ یا بالا و پایین مشخص کنیم ، این جهت رو بصورت درجه ای در یک زاویه خاصی تنظیم کنیم.
شکل کلی بصورت زیر می باشد :
|
1 |
background-image: linear-gradient(angle, color1, color2 ,...); |
مثال شماره ۱ : در زاویه ۹۰ درجه
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image: linear-gradient(90deg, red, yellow); height:70px; } </style> |
مثال شماره ۲ : در زاویه منفی ۹۰ درجه ( برعکس مثال بالا میشه )
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image: linear-gradient(-90deg, red, yellow); height:70px; } </style> |
مثال شماره ۳ : در زاویه ۱۸۰ درجه
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image: linear-gradient(180deg, red, yellow); height:70px; } </style> |
مثال شماره ۴ : در زاویه ۳۶۰ درجه
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image: linear-gradient(360deg, red, yellow); height:70px; } </style> |
Free-Learn
کار با رنگ Gradient شعاعی (دایره ای)
خب دوستان در ادامه آموزش کار با رنگ Gradient در طراحی وب میخوام شمارو با رنگ Gradient حالت شعاعی یا دایره ای آشنا کنم.
در این روش رنگ بصورت شعاع (دایره ای) پاشیده می شود ،شکل کلی این روش بصورت زیر می باشد :
|
1 |
background-image: radial-gradient(shape size at position, start-color, color1,color2,... , last-color); |
توضیح بخش های موجود در پرانتز شکل بالا :
- shape size at position : نوع و اندازه شکل را مشخص میکند
- strat-color : رنگ شروع
- last-color : رنگ پایانی
مثال شماره ۱ :
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(red, yellow, green); width:180px; height:180px; } </style> |
مثال شماره ۲ :
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(circle, black, blue, red,yellow); width:180px; height:180px; } </style> |
مثال شماره ۳ :
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(circle at top right, yellow, #f06d06); width:180px; height:180px; } </style> |
مثال شماره ۴ :
|
1 2 3 4 5 6 7 8 9 |
<style> div{ background-image: radial-gradient(circle closest-side,yellow,black,#673AB7,#673AB7, #673AB7); width:180px; height:180px; } </style> |
Free-Learn
کار با رنگ Conic-Gradient ( مخروطی )
در این حالت رنگ بصورت مخروطی و در حول یک نقطه مرکزی پاشیده میشود، که البته ما میتونیم به دلخواه نقطه پاشش و موقعیتشو مشخص کنیم.
شکل کلی استفاده از این نوع رنگ بصورت زیر می باشد :
|
1 |
background-image: conic-gradient([Angle][Position] , Color-1,Color-2, ...); |
- Angle : زوایه پاشش رنگ
- Position : موقعیت یا محل پاشش رنگ
- Color-1,Color-2,.. : رنگ های مورد نظر ما برای پاشش
مثال شماره ۱ : مشخص کردن فقط رنگ ها
|
1 2 3 4 5 6 7 |
<style> div{ background-image: conic-gradient(red, yellow, green, blue, black); } </style> |
مثال شماره ۲ : مشخص کردن رنگ + زاویه پاشش رنگ
- مثلا داره میگه رنگ قرمز از زاویه ۰ تا ۹۰ درجه بپاشه بعدش رنگ زرد از ۹۰ تا ۱۸۰ درجه بپاشه و..
|
1 2 3 4 5 6 7 |
<style> div{ background-image: conic-gradient(red 0deg 90deg, yellow 90deg 180deg, green 180deg 270deg, black 270deg 360deg); } </style> |
مثال شماره ۳ : مشخص کردن زوایه پاشش + موقعیت پاشش + رنگ ها
- یعنی داره میگه از زوایه ۹۰ درجه شروع کن بعدش از سمت راست رنگ هارو بپاش
|
1 2 3 4 5 6 7 |
<style> div{ background-image: conic-gradient(from 90deg at right ,red, yellow, green, black); } </style> |
مثال شماره ۴ : مشخص کردن موقعیت پاشش رنگ بصورت درصدی
- مقدار اول بصورت افقی میشه و مقدار دوم بصورت عمودی، یعنی میگه ۲۰درصد بصورت افقی از سمت چپ به راست و ۵۰ درصد بصورت عمودی از سمت بالا به پایین
|
1 2 3 4 5 6 7 |
<style> div{ background-image: conic-gradient(from 90deg at 20% 50% ,red, yellow, green, black); } </style> |
Free-Learn
عدم پشتیبانی نسخه های قدیمی تر مرورگرها
برخی از نسخه های قدیمی تره مرورگرهای اینترنتی از کدهای این نوع رنگ در حالت عادی پشتیبانی نمیکنند، لذا ما باید از یکسری دستورات پیشوندی جهت پشتیبانی این مرورگرها از رنگ های گرادینت استفاده نماییم.
مرورگرهای مدرن الان همشون بدون مشکل ازش پشتیبانی میکنن، این جریان پیشوندها فقط برای نسخه های قدیمی تر این مرورگرهاست، یعنی ممکنه مرورگری از نسخه ای باشه که نتونه در حالت عادی پشتیبانی کنه، بهمین خاطر باید از دستورات پیشوندی استفاده کرد.
دستور پیشوندی :
- -webkit-
- -moz-
- -o-
- -webkit- برای پشتیبانی مرورگر گوگل کروم و مرورگر سافاری
- –moz- برای پشتیبانی مرورگر موزیلا فایرفاکس
- –o- برای پشتیبانی مرورگر اُپرا Opera
یک مثال برای نحوه استفاده از این پیشوندها :
|
1 2 3 |
background: -webkit-linear-gradient(to right, #f5af19, #f12711); background: -moz-linear-gradient(to right, #f5af19, #f12711); background: -o-linear-gradient(to right, #f5af19, #f12711); |
Free-Learn
مشاهده ابزار آنلاین تولید رنگ گرادینت
قبل از مشاهده ابزار آنلاین ساخت و تولید انواع رنگ های گرادینت ، پیشنهاد میکنم به نکاتی در رابطه با آموزش کار با رنگ Gradient در طراحی وب توجه نمایید :
- همونطور که اشاره کردم برخی از مرورگرهای اینترنتی ( نسخه / ورژن های قدیمی تر ) از این نوع رنگ پشتیبانی نمیکنند، لذا باید از پیشوندهای webkit , moz , o استفاده نمایید.
- اگر میخواهید از همه ی پیشوندهای مشخص شده استفاده نکنید، لطفا و حداقل از webkit استفاده نمایید.
- همیشه قبل از اینکه از این روش استفاده کنید با استفاده از ویژگی background یا background-color حتما یک رنگ برای پس زمینه عنصرتان مشخص نمایید. تا در صورت عدم نمایش گرادینت ، رنگ عادی زمینه نمایش داده شود.
برای مشاهده مجموعه / لیستی از چندین رنگ Gradient لطفا اینجا کلیک نمایید.
برای مشاهده ابزار آنلاین [ تولید رنگ گرادینت ] فری لرن لطفا اینجا کلیک نمایید.
