آموزش: (gradient) - ساخت توالی رنگ با CSS3

https://barnamenevis.org/attachment.p...8&d=1449570262
CSS3 قابلیتی رادراختیارماقرارمیدهدکه توسط آن توالی رنگ های خطی ودایره ای بسازیم.
با CSS3 دیگرلازم نیست که چندین توالی رنگ مختلف رابافرمت JPEG بسازیم . پشتیبانی مرورگرها ازتوالی رنگ هادرحال تحول است امادرادامه خواهیددیدکه میتوان ازتوالی رنگ هااستفاده کردبه طوری که آخرین نسخه تمامی مرورگرهای مطرح وهمچنین IE9 بتواندآنهارابه نمایش بگذارند.
توالی رنگ چیست؟

توالی رنگ شامل طیفی پیوسته ازرنگ وتغییرآن ازیک رنگ به رنگ ویارنگهای دیگراست.
برای ساخت توالی رنگ شمامیتوانیدچندین رنگ رامشخص کنیدکه به آنهاتوقف رنگ میگویند.
هرکدام ازاین توالی رنگهاشامل یک رنگ ویک موقعیت میشود: مرورگررنگ راازهرتوقف رنگ به سمت توقف رنگ بعدی محومیکندتاتوالی رنگ نرم رابسازد.درهرجایی که توانایی استفاده ازیک تصویرپس زمینه راداریدمیتوانیدازتوالی رنگ نیزاستفاده کنید.این بدان معنی است که هرکجادرCSS که ازدستورurl() استفاده میکردیدماننددستورات
border-image,background-image میتوانیدازتوالی رنگ هانیزاستفاده کنید.البته درحال حاظراستفاده ازتوالی رنگ هادرbackground-image بهترین پشتیبانی رادارد.
بااستفاده ازتوالی رنگ هادرCSS وحذف تصاویرکاربرانتان دیگرمجبورنخواهندبودکه برای دیدن جلوه توالی رنگ تصاویرتوالی رنگ رادریافت کنندوهمچنین انعطاف طرح شمانیزبیشترمیشودوبابزرگ نمایی طرح توالی رنگ های CSS دیگرهمانندتصاویرپس زمینه بی کیفیت نمیشوند.
دونوع توالی رنگ موجوداست توالی رنگ خطی ودایره ای .

دستوراستانداردW3C

این دستوراستانداردبرای ایجادتوالی رنگ خطی است:
background-image: linear-gradient(...);درداخل پرانتزهاجهت ایجادتوالی رنگ - توقف رنگ هارامشخص میکند.برای تعیین جهت هم میتوانیدزاویه را که مایلیدتوالی رنگ درراستای آن حرکت کندرامشخص کنیدوهم میتوانیدبااستفاده ازکلمات کلیدی آن گوشه ای راکه میخواهیدتوالی رنگ ازآنجاشروع شودرامشخص کنید.
درهریک ازاین دوحالت توالی رنگ به سمت مخالف جهت تعیین شده توسط شماحرکت خواهدکرد.برای تعیین زاویه بایدمقادیررابه درجه بنویسید(deg).
0deg به سمت راست اشاره میکند, 90deg به سمت بالاوبه همین ترتیب بقیه مقادیردرراستای جهت عقربه های ساعت جلومیروند.برای سمت ها وگوشه ها نیزازکلمات کلیدی right , top ,bottom ,left استفاده میشود.پس ازمشخص کردن جهت توقف رنگ هاراتعیین میکنید.این بخش ازکد, رنگ هاودرصدویاطول مربوط به گسترش آن رنگ رامشخص میکند.
برای رسم توالی رنگ ازبالا به پایین درپس زمینه ی یک عنصربایدیکی ازسه دستور زیررابه کارببریدولی به یادداشته باشیدکه نسخه های جدیدمرورگرهای برپایه webkit ومرورگراپرا هردوازپیشوندهای خودشان استفاده میکنندولی الگوی نگارش دستوردرهردویشان یکسان است:

ادامه مطلب همراه نمونه :