این آموزش در تاریخ ۱۳۹۹/۰۴/۱۹ آپدیت شده است.
ابزار آنلاین – تولید رنگ گرادینت یا Gradient
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با معرفی ابزار آنلاین – تولید رنگ گرادینت یا Gradient فری لرن با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ابزار آنلاین – تولید رنگ گرادینت یا Gradient
رنگ های گرادینت یا Gradient به رنگ هایی که از ترکیب چندین رنگ دیگه بدست اومده باشه، گفته میشه و این نوع رنگ ها از جذاب ترین رنگ ها می باشد چرا که بصورت ترکیبی از چندین رنگ دیگه بدست میایند.
نمونه هایی از رنگ های گرادینت :
نمونه شماره ۱
نمونه شماره ۲
نمونه شماره ۳
نمونه شماره ۴
Free-Learn
آموزش استفاده از ابزار
در تصویر زیر میتوانید یک نمای کلی از ابزار را مشاهده نمایید.
شما به راحتی با استفاده از این ابزار میتوانید بصورت آنلاین انواع رنگ های گرادینت را تولید و سپس کدهای مورد نظر رنگ با یک کلیک در حافظه کپی و سپس در محل مورد نظرتون پیست (Paste) نمایید.
مشاهده لیست کامل رنگ ها
برای مشاهده لیست کامل رنگ ها میتوانید همانند تصویر بالا در جایگاه شماره ۱ بروی کلیک نمایید و یا میتوانید از کلید Shift نیز استفاده نمایید. یعنی با فشردن کلید Shift لیست رنگ ها نمایش داده میشود.
تنظیم جهت پاشیدن رنگ
برای تنظیم جهت پاشیدن رنگ، یعنی اینکه مثلا رنگ از سمت راست یا چپ و یا بالا و پایین بصورت خطی پاشیده شود ، میتوانید از استفاده نمایید.
ارسال رنگ مورد علاقه شما برای فری لرن و قرار گرفتن رنگ با نام خودتان در لیست رنگ ها
شما میتوانید با کلیک بروی کدهای هگزادسیمال رنگ گرادینت مورد علاقه تان برای فری لرن ارسال نمایید تا همان رنگ با نام خودتان در لیست رنگ ها قرار داده شود. لطفا و باید حداقل ۲ رنگ HEX ارسال نمایید. ( نمونه )
دریافت کد
با کلیک بروی به راحتی میتوانید کد رنگ تولید شده را دریافت و همچنین با کلیک بروی دکمه (کدهارو کپی کن) آنها را کپی و سپس در محل مورد نظرتان قرار/پیست (Paste) نمایید ، همچنین با زدن دکمه Enter از روی صفحه کلید نیز میتوانید کدهارو دریافت نمایید.
دانلود رنگ تولید شده
با کلیک بروی میتوانید فایل تصویر ( عکس با پسوند jpg ) از رنگ تولید شده را دانلود نمایید.
جابه جا شدن بین رنگ ها
برای جابه جایی بین رنگ ها، به راحتی کافیست از دکمه های جهت نما بروی صفحه کلید ( راست و چپ ) استفاده نمایید.
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); |