سرخط خبرها

آموزش gradient در css3

آموزش gradient با css3

یه زمانی یادمه هرکی هرچی تو فتوشاپ طراحی می کرد یه عکس ازش سیو می گرد بعد در پوسته اش استفاده می کرد. اما الآن خیلی کارها به راحتی با css شدنیه. مثلاً همین ساخت پس زمینه گرادینت. منظور از گرادینت همون پس زمینه ای هست که از بالا به پایین دو رنگ استفاده میشه و با هم ترکیب میشن.

گرادینت چیست Gradient ؟

گرادینت به معنای شیب یا سطح شیب دار است، در دنیای گرافیک به تصویری که ازطیف رنگ های مختلف به صورت شیب دار ایجاد می شوند و مرز مشخصی بین رنگ ها نباشد را گرادینت می گویند (این شیب ها می توانند عمودی، افقی ، مورب ، مدوّر و … باشند) :

خب معمولا چنین رنگ هایی در طراحی وب نیز مورد استفاده قرار می گیرند. قبل از متولد شدن css3 جهت استفاده از گرادینت ها در وب بایستی از آنها به عنوان تصویر استفاده می کردیم. اما هنگامی که باز css تکانی به خودش داد و به بهبود عملکرد، و در جهت راحتی طراحان وب، گام دیگری رو برداشت، آمد قابلیت ایجاد گرادینت را به css3 افزود. ولی مشکلی که قبل از آمدن css3 با چنین رنگها وجود داشت آن بود که با استفاده از css قادر به ساخت چنین طیف رنگی نبودیم و مجبور بودیم،قسمتی از تصویر را برش دهیم و آن را در حالت افقی یا عمودی تکرار (repeat) کنیم، یا اگر از گرادینت مورب یا مدور استفاده می کردیم، مجبور بودیم که کل گرادینت را برش دهیم، که اگر محیطی که در آن از گرادینت استفاده کردیم بزرگ بود باعث حجیم شدن تصویر می شد.

انواع گرادینت :

گرادینت انواع مختلفی دارد اگر با فتوشاپ کار کرده باشید حتما با آن ها آشنایی دارید :

۱٫ Linear : خطی : به صورت دو یا  چند رنگ، پشت سر هم به حالت افقی، عمودی یا مورب.

۲٫ Radial : مدوّر (تابشی) : به صورت دو یا چند رنگ تو در تو به صورت مدوّر

۳٫ Angle : زاویه دار : به صورت دو یا چند رنگ که از یک زاویه شروع و پس از چرخش رنگ ها در ۳۶۰درجه به زاویه اولیه بر می گردد.

۴٫ Reflected : منعکس (بازتاب) : به صورت دو یا چند رنگ که نصف محیط را رنگ های انتخاب و نصف دیگر را بازتاب رنگ های انتخابی پر می کنند.

۵٫ Diamond : لوزی شکل (الماسی) : به صورت دو یا چند رنگ که به صورت لوزی شکل تو در تو مرتب می شوند.

خب حال که با انواع گرادینت آشنا شدیم، به طریقه ایجاد آن ها با استفاده از css3 می پردازیم. کار کردن با این خصوصیت مقداری پیچیده تر از سایر خصوصیت هاست، البته مانند بقیه با چند مقدار گرادینت ایجاد می شود اما به دلیل اینکه انواع مختلفی گرادینت وجود دارد و علاوه بر اون دستور نوشتن این خصوصیت در هر مرورگر با سایر مرورگرها فرق میکنه مقداری کار رو پیچیده تر کرده.

نکته: در نظر داشته باشید که خصوصیت گرادینت یکی از خصوصیت های background است. (جایگزین خصوصیت backhround-image)

گرادینت Linear :

آموزش gradient در css3

بسیار خب حال طریقه ایجاد گرادینت linear در مرورگر chrome رو فرا می گیریم :

ایجاد این نوع از گرادینت بسیار ساده است و قاعده کلی آن بشکل زیر است

چند کد نمونه : (استفاده از جهات اصلی)

استفاده از جهات فرعی :

استفاده از مختصات :

QR Code For: آموزش gradient در css3

درباره ی jizjiz

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

Time limit is exhausted. Please reload CAPTCHA.