دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS3 » Gradient و webkit- در فیلم آموزش CSS3
Gradient و webkit- در فیلم آموزش CSS3

Gradient و webkit- در فیلم آموزش CSS3

در این قسمت از آموزش CSS3 مبحث Gradient در سایت وب سیتی آموزش داده شده است و همین طور دلیل استفاده از webkit- و moz- و … نیز توضیح داده شده است .

Gradient چیست ؟؟

معنی Gradient می شود شیب ( سطح شیب دار ) ولی توی  دنیای کامپیوتر ما به تصویری که از طیف رنگ های مختلف به صورت شیب دار به وجود میاد بهش گرادینت می گیم .

webkit- و ms- و moz- و o- چی هستن و برای چی استفاده می کنیم ؟

webkit- یه موتور چیدمان هست که امکان نمایش دادن صفحات رو برای یه مرورگر فراهم میکنه اگه به زبان ساده تر بگم یعنی این وب کیت یه موتوری هست که مروگر با اون کار می کنه تا صفحات یا همون وب سایت هارو به ما نشون بده .

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

در مروگر کروم و سافاری چون از موتر چیدمان وب کیت استفاده می کنند .پس باید از webkit- استفاده کنیم .

برای مروگر فایرفاکس از عبارت moz- استفاده می کنیم .

برای مروگر اپرا از o- استفاده می کنیم .

برای اینترنت اکسپلورر از ms- استفاده می کنیم .

نحوه استفاده از Linear-Gradient در CSS3 :

سینتکس گرادینت خطی به صورت زیر است :

در کد بالا به جای direction باید جهت را انتخاب کنید و بعد به ترتیب رنگ های مورد نظر خودتون رو بنویسید توضیحات بیش تر در فیلم آموزش CSS3 داده شده است .

Gradient و webkit- در فیلم آموزش CSS3

Gradient و webkit- در فیلم آموزش CSS3

کد HTML :

کد CSS :

می تونید یه بازه رنگ رو چندین بار تکرار کنید برای این کار از کد زیر استفاده می کنیم :

اگر کد بالارو اجرا کنید خواهید دید که رنگ های قرمز ، زرد ، سبز تکرار می شوند .

Radial Gradient  در CSS3 :

این نوع گرادینت باعث ایجاد شکل هایی مثل یه پرتو یا دایره مانند می شود .

Gradient و webkit- در فیلم آموزش CSS3

Gradient و webkit- در فیلم آموزش CSS3

به صورت زیر از این کد استفاد می کنیم :

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

فیلم آموزش Gradient را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



جواب سوال چیه ؟ *