رفتن به مطلب
The Developer

ساخت رنگ Gradient با CSS3 برای طراحی سایت

پست های پیشنهاد شده

رنگ آمیزی گرادیان (Gradient) در حقیقت روشی است برای رنگ آمیزی عناصر با شیب رنگی مختلف که این روزها در صفحات وب نیز برای افزایش کیفیت و برجسته سازی قسمت‌هایی از عناصر تشکیل دهنده صفحات وب در طراحی سایت از آن‌ها استفاده می‌شود. در نسخه های قبلی CSS برای ساخت رنگ آمیزی گرادیان نیاز به استفاده از تکنیک‌های پیچیده ای وجود داشت اما یکی از امکانات جدید CSS3 برای رنگ آمیزی عناصر صفحات وب، امکان ساخت و رنگ آمیزی عناصر به شیوه های مختلف و شیب رنگی با استفاده از الگو مختلف است. در این آموزش قصد داریم شما را با ابزار رایگان Ultimate CSS Gradient Generator آشنا کنیم که با استفاده از آن به غیر از آموزش چگونگی استفاده از گرادیان در CSS3 توانایی ساخت این نوع رنگ آمیزی را با استفاده از ابزار کاربردی خواهید داشت.

 

آموزش استفاده از ابزار Ultimate CSS Gradient Generator

 

 

این ابزار یکی از ابزارهای ارائه شده توسط سایت ColorZilla که خود از زیر مجموعه های iosart labs به حساب می‌آید است که به کاربران توانایی ساخت الگوهای مختلف رنگ آمیزی توسط تکنیک Gradient را برای استفاده در صفحات وب و طراحی سایت می‌بخشد. برای شروع استفاده از این ابزار کافی است به لینک

محتوای مخفی

    برای مشاهده محتوای مخفی می بایست در انجمن ثبت نام کنید.
مراجعه کنید. پس از مراجعه به این ابزار با صفحه ای همانند تصویر زیر روبرو خواهید شد که در آن نمونه های از پیش ساخته شده ای از رنگ آمیزی Gradient در سمت چپ تصویر وجود دارد که برای استفاده از هر یک از آن‌ها و دریافت کد CSS مربوط به آن‌ها کافی است آن را انتخاب کنید.

 

 

css-gradient-generator.png

 

با کلیک بر روی هر یک از الگوهای نمایش داده شده در سمت راست تصویر پیش نمایشی از آن نوع رنگ آمیزی نمایش داده می‌شود که در زیر آن نیز تمامی کدهای مورد نیاز برای رنگ آمیزی یک عنصر از صفحات وب شما که دوست دارید با این رنگ نمایش داده شود وجود دارد. البته با استفاده از تنظیمات موجود در بخش Preview توانایی شخصی سازی و ویرایش رنگ آمیزی انتخاب شده را نیز دارید که با استفاده از منوی باز شو اول می‌توانید جهت شیب رنگ آمیزی را مشخص کنید و با استفاده از گزینه IE طریقه نمایش این رنگ آمیزی در نسخه های قبلی مرورگر اینترنت اکسپلورر را مشاهده کنید.

اما اگر قصد ساخت یک الگو جدید از پایه را دارید و می‌خواهید به تنظیمات بیشتری در رابطه با چگونگی و شیب رنگ‌های تشکیل دهنده Gradient ساخته شده دسترسی داشته باشید در سمت چپ تصویر امکان تعیین رنگ‌های تشکیل دهنده، مقدار اشباع رنگ (hue saturation)، شفافیت (Opacity) و … وجود دارد.

 

امکانات و مزایای ابزار ساخت گرادیان ColorZilla

 

اما قبل از آموزش چگونگی استفاده از کدهای CSS3 تولید شده توسط این ابزار بهتر است با امکانات و مزایای Ultimate CSS Gradient Generator نسبت به دیگر ابزار رایج در این زمینه که در وب ممکن است با آن‌ها نیز برخورد کرده باشید آشنا شویم. در لیست زیر با نمونه ای از این مزایا و برتری‌ها آشنا می‌شویم.

 

 

 

  1. رابط کاربری کاربردی و قدرتمند همانند بخش Gradient برنامه فتوشاپ
  2. امکان ساخت کدهای سازگار برای نمایش در مرورگر مختلف مانند موزیلا فایرفاکس، اینترنت اکسپلورر، گوگل کروم و …
  3. امکان تعیین فرمت رنگ‌ها در کدهای CSS خروجی با فرمت HEX، RGB، RGBA، HSL و HSLA برای سازگار کردن کدها با دیگر کدهای CSS سایت شما و بهینه سازی آن‌ها
  4. امکان الگو برداری از فایل تصویری برای ساخت Gradient جدید توسط دکمه import from image در این ابزار
  5. امکان ویرایش Gradient موجود در فایل CSS فعلی سایت شما توسط دکمه import from css در این ابزار
  6. امکان تنظیم شیب رنگ، اشباع، روشنایی و …
  7. بیش از 135 الگو زیبا از پیش ساخته شده برای استفاده در طراحی سایت شما
  8. امکان دریافت لینک یکتا برای الگو رنگی ساخته شده توسط لینک نمایش داده شده در بخش Permalink این ابزار و اشتراک گذاری در اینترنت از این طریق
  9. امکان دریافت خروجی به صورت Sass
  10. بخش پیش نمایش (Preview) برای مشاهده خروجی تنظیمات انجام شده با امکان تغییر اندازه
  11. و …

 

 

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

چگونگی استفاده از کدهای خروجی این ابزار در صفحات وب

 

اما برای این که بهتر با طریقه استفاده از این کدها برای نمایش رنگ آمیزی ساخته شده در صفحات وب آشنا شوید با هم چند نمونه از چگونگی استفاده از کدهای خروجی ابزار 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 */
}

 

اما اگر قصد استفاده از این رنگ آمیزی به عنوان پس زمینه یک بخش (Div) خاص را نیز دارید همانند مثال بالا تنها کافی است کدهای نمایش داده شده توسط این ابزار را به ادامه خاصیت‌های تعریف شده برای آن بخش از صفحات سایت یا وبلاگ خود مانند کد زیر اضافه کنید. (در این مثال id مربوط به Div ما box1 است)


#box1 {
background: #d0e4f7; /* Old browsers */
background: -moz-linear-gradient(top, #d0e4f7 0%, #73b1e7 24%, #0a77d5 50%, #539fe1 79%, #87bcea 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d0e4f7), color-stop(24%,#73b1e7), color-stop(50%,#0a77d5), color-stop(79%,#539fe1), color-stop(100%,#87bcea)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* IE10+ */
background: linear-gradient(to bottom, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */
}

 

حال که کدهای CSS را در فایل CSS فراخوانی شده در کدهای HTML سایت خود قرار دادید به سادگی و همانند قبل شروع به طراحی سایت خود از طریق تگ‌های معمول کنید و در نتیجه عناصر تعیین شده در کدهای CSS را رنگ آمیزی زیبای گرادیان طراحی شده شما به نمایش در می‌آیند. امیدواریم معرفی این سرویس در بروز رسانی و زیبا تر کردن صفحات سایت یا وبلاگ شما موثر باشد. در صورتی که با دیگر ابزارهای رایگان در این زمینه آشنایی دارید لطفاً در قسمت دیدگاه همین آموزش آن‌ها را با ما و دیگر بازدید کنندگان سایت تورتک به اشتراک بگذارید.

 

منبع: tortak.com

به اشتراک گذاری این ارسال


لینک به ارسال

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از ۷۵ اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به عنوان یک لینک به جای

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


×
×
  • جدید...