The Developer 5,478 اشتراک گذاری ارسال شده در 2 بهمن، ۱۳۹۱ رنگ آمیزی گرادیان (Gradient) در حقیقت روشی است برای رنگ آمیزی عناصر با شیب رنگی مختلف که این روزها در صفحات وب نیز برای افزایش کیفیت و برجسته سازی قسمت‌هایی از عناصر تشکیل دهنده صفحات وب در طراحی سایت از آن‌ها استفاده می‌شود. در نسخه های قبلی CSS برای ساخت رنگ آمیزی گرادیان نیاز به استفاده از تکنیک‌های پیچیده ای وجود داشت اما یکی از امکانات جدید CSS3 برای رنگ آمیزی عناصر صفحات وب، امکان ساخت و رنگ آمیزی عناصر به شیوه های مختلف و شیب رنگی با استفاده از الگو مختلف است. در این آموزش قصد داریم شما را با ابزار رایگان Ultimate CSS Gradient Generator آشنا کنیم که با استفاده از آن به غیر از آموزش چگونگی استفاده از گرادیان در CSS3 توانایی ساخت این نوع رنگ آمیزی را با استفاده از ابزار کاربردی خواهید داشت. آموزش استفاده از ابزار Ultimate CSS Gradient Generator این ابزار یکی از ابزارهای ارائه شده توسط سایت ColorZilla که خود از زیر مجموعه های iosart labs به حساب می‌آید است که به کاربران توانایی ساخت الگوهای مختلف رنگ آمیزی توسط تکنیک Gradient را برای استفاده در صفحات وب و طراحی سایت می‌بخشد. برای شروع استفاده از این ابزار کافی است به لینک برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام مراجعه کنید. پس از مراجعه به این ابزار با صفحه ای همانند تصویر زیر روبرو خواهید شد که در آن نمونه های از پیش ساخته شده ای از رنگ آمیزی Gradient در سمت چپ تصویر وجود دارد که برای استفاده از هر یک از آن‌ها و دریافت کد CSS مربوط به آن‌ها کافی است آن را انتخاب کنید. با کلیک بر روی هر یک از الگوهای نمایش داده شده در سمت راست تصویر پیش نمایشی از آن نوع رنگ آمیزی نمایش داده می‌شود که در زیر آن نیز تمامی کدهای مورد نیاز برای رنگ آمیزی یک عنصر از صفحات وب شما که دوست دارید با این رنگ نمایش داده شود وجود دارد. البته با استفاده از تنظیمات موجود در بخش Preview توانایی شخصی سازی و ویرایش رنگ آمیزی انتخاب شده را نیز دارید که با استفاده از منوی باز شو اول می‌توانید جهت شیب رنگ آمیزی را مشخص کنید و با استفاده از گزینه IE طریقه نمایش این رنگ آمیزی در نسخه های قبلی مرورگر اینترنت اکسپلورر را مشاهده کنید. اما اگر قصد ساخت یک الگو جدید از پایه را دارید و می‌خواهید به تنظیمات بیشتری در رابطه با چگونگی و شیب رنگ‌های تشکیل دهنده Gradient ساخته شده دسترسی داشته باشید در سمت چپ تصویر امکان تعیین رنگ‌های تشکیل دهنده، مقدار اشباع رنگ (hue saturation)، شفافیت (Opacity) و … وجود دارد. امکانات و مزایای ابزار ساخت گرادیان ColorZilla اما قبل از آموزش چگونگی استفاده از کدهای CSS3 تولید شده توسط این ابزار بهتر است با امکانات و مزایای Ultimate CSS Gradient Generator نسبت به دیگر ابزار رایج در این زمینه که در وب ممکن است با آن‌ها نیز برخورد کرده باشید آشنا شویم. در لیست زیر با نمونه ای از این مزایا و برتری‌ها آشنا می‌شویم. رابط کاربری کاربردی و قدرتمند همانند بخش Gradient برنامه فتوشاپ امکان ساخت کدهای سازگار برای نمایش در مرورگر مختلف مانند موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم و … امکان تعیین فرمت رنگ‌ها در کدهای CSS خروجی با فرمت HEX، RGB، RGBA، HSL و HSLA برای سازگار کردن کدها با دیگر کدهای CSS سایت شما و بهینه سازی آن‌ها امکان الگو برداری از فایل تصویری برای ساخت Gradient جدید توسط دکمه import from image در این ابزار امکان ویرایش Gradient موجود در فایل CSS فعلی سایت شما توسط دکمه import from css در این ابزار امکان تنظیم شیب رنگ، اشباع، روشنایی و … بیش از 135 الگو زیبا از پیش ساخته شده برای استفاده در طراحی سایت شما امکان دریافت لینک یکتا برای الگو رنگی ساخته شده توسط لینک نمایش داده شده در بخش Permalink این ابزار و اشتراک گذاری در اینترنت از این طریق امکان دریافت خروجی به صورت Sass بخش پیش نمایش (Preview) برای مشاهده خروجی تنظیمات انجام شده با امکان تغییر اندازه و … البته با ساخت چند گرادیان مختلف توسط این ابزار حتماً با دیگر امکانات و مزایای این ابزار نیز آشنا خواهید شد که در این آموزش برای کوتاه کردن نوشته، آن‌ها را بررسی نکرده ایم. چگونگی استفاده از کدهای خروجی این ابزار در صفحات وب اما برای این که بهتر با طریقه استفاده از این کدها برای نمایش رنگ آمیزی ساخته شده در صفحات وب آشنا شوید با هم چند نمونه از چگونگی استفاده از کدهای خروجی ابزار Ultimate CSS Gradient Generator در فایل CSS بررسی می‌کنیم. در کدهای زیر برای تعیین رنگ قسمت سرآیند صفحه HTML5 خود از کدهای زیر استفاده می‌کنیم. header {background: #79a767; /* Old browsers */background: -moz-linear-gradient(top, #79a767 8%, #2d5c1a 36%, #3f712b 50%, #bfdfb3 89%); /* FF3.6+ */background: -webkit-gradient(linear, left top, left bottom, color-stop(8%,#79a767), color-stop(36%,#2d5c1a), color-stop(50%,#3f712b), color-stop(89%,#bfdfb3)); /* Chrome,Safari4+ */background: -webkit-linear-gradient(top, #79a767 8%,#2d5c1a 36%,#3f712b 50%,#bfdfb3 89%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradient(top, #79a767 8%,#2d5c1a 36%,#3f712b 50%,#bfdfb3 89%); /* Opera 11.10+ */background: -ms-linear-gradient(top, #79a767 8%,#2d5c1a 36%,#3f712b 50%,#bfdfb3 89%); /* IE10+ */background: linear-gradient(to bottom, #79a767 8%,#2d5c1a 36%,#3f712b 50%,#bfdfb3 89%); /* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79a767', endColorstr='#bfdfb3',GradientType=0 ); /* IE6-9 */} برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام حال که کدهای CSS را در فایل CSS فراخوانی شده در کدهای HTML سایت خود قرار دادید به سادگی و همانند قبل شروع به طراحی سایت خود از طریق تگ‌های معمول کنید و در نتیجه عناصر تعیین شده در کدهای CSS را رنگ آمیزی زیبای گرادیان طراحی شده شما به نمایش در می‌آیند. امیدواریم معرفی این سرویس در بروز رسانی و زیبا تر کردن صفحات سایت یا وبلاگ شما موثر باشد. در صورتی که با دیگر ابزارهای رایگان در این زمینه آشنایی دارید لطفاً در قسمت دیدگاه همین آموزش آن‌ها را با ما و دیگر بازدید کنندگان سایت تورتک به اشتراک بگذارید. منبع: tortak.com 1 نقل قول لینک به دیدگاه
ارسال های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .