آموزش ایجاد گرادینت – جلسه سوم

با سلام خدمت شما دوستان عزیز…

در جلسه سوم از آموزش گرادینت به شما نحوه ایجاد گرادینت مدور و یا radial را به شما آموزش خواهیم داد .

درصد پیشرفت رنگ های گرادینت

اگر دقت کرده باشید گرادینت هایی که تا به حال یاد گرفته ایم رنگ های استفاده شده همگی دارای عرض یا ارتفاع مساوی هستند .

مثلا گرادینتی که از ۳ رنگ ایجاد کرده ایم  عرض div به طور مساوی به ۳ رنگ تقسیم میشود .

حالا اگر بخواهیم یک رنگ ۱۰ درصد و رنگ دوم ۱۰ درصد و رنگ سوم ۸۰ در صد باقی را پر کند باید به چه صورت عمل کنیم ؟؟؟

شما میتوانید برای اینکار در کنار رنگ ها درصد آن را نیز تعیین کنید :

See the Pen Progress by nonebakola (@non_e_bakola) on CodePen.0

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

در نظر داشته باشید قسمت هایی که مشخص نمیکنیم جهت ادغام دو رنگ استفاده خواهد شد .

همچنین میتوان به جای استفاده از درصد از مقادیر عددی مثل پیکسل نیز استفاده کرد .

See the Pen Progress px by nonebakola (@non_e_bakola) on CodePen.0

نکته :‌شما میتوانید با تغییر webkit به moz , o, ms گرادینت را در مرورگرهای موزیلا و اپرا و اینترنت اکسپلورر نیز پیاده سازی کنید .

دقت کنید که گرادینت ها از ie ورژن ۱۰ به بالا پشتیبانی میشوند و برای ورژن های پایینتر باید از روش های مخصوص استفاده کنید .

Radial Gradients

حالا نوبت به گرادینت های مدور میرسه . قاعده کلی این نوع گرادینت به صورت زیر میباشد :

مقادیر color که مانند گرادینت های قبلی میباشد .

مقدار startfrom نیز مانند linear میباشد به این صورت که چهار جهت اصلی را دارا میباشد و همچنین چهار جهت فرعی  ( زاویه ها )‌ + مقدار Center که به صورت پیشفرض این مقدار میباشد .

در نظر داشته باشید که ما دراینجا نمیتوانیم از مقدار بندی براساس درجه استفاده کنیم و بجای آن از دو مقدار startfrom1 , startfrom2 استفاده میکنیم که مختصات شروع گرادینت و قاعده عمومی آن به شکل زیر میباشد :‌

See the Pen Radial Gradient by nonebakola (@non_e_bakola) on CodePen.0

درنظر داشته باشید که شما میتوانید درصد پیشروی رنگ ها را مانند linear تعیین کنید .

همچنین شما میتوانید جهت استفاده در مرورگرهای دیگر به جای webkit از پسوند خاص همان مرورگر استفاده کنید .

خب دوستان خسته نباشید . سری آموزش های CSS نیز به پایان رسید.

امیدوارم که از این سری آموزش های ما استفاده کامل رو برده باشید .

موفق باشید .

آموزش ایجاد گرادینت – جلسه سوم
5 (100%) 2 رای

ممکن است شما دوست داشته باشید بیشتر از نویسنده

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.