ساخت گراندینت با استفاده از سی اس اس ۳

• نوشته‌شده توسط: مسعود رضایی
• دسته بندی آموزش, سی اس اس
• بازدید

امروز با یک آموزش بسیار کاربردی و مفید اومدم که برای اولین بار از تک تمپ منتشر می شه و با خواندن این آموزش می تونید با استفاده از سی اس اس ۳ (css3) گراندینت بسازید ! این کار در مرورگر های فایرفاکس ، سافاری و اینترنت اکسپلورر ۹ و مروگر هایی که از css3 پشتیبانی می کنن عمل می کنه.در این آموزش چند کد برای این کار قرار دادیم که طی پست بعدی سایر کد ها رو قرار خواهیم داد.

۱٫گراندینت از چپ به راست :

background: -moz-linear- gradient(left, #969696, #fff); background: -webkit-gradient(linear, left center, right center, from(#969696), to(#fff));

.

.

.

۲٫گراندینت از راست به چپ :

background: -moz-linear-gradient(right, #969696, #fff); background: -webkit-gradient(linear, right center, left center, from(#969696), to(#fff));

.

.

.

۳٫گراندینت از بالا به پایین :

background: -moz-linear-gradient(top, #969696, #fff); background: -webkit-gradient(linear, center top, center bottom, from(#969696), to(#fff));

.

.

.

۴٫ گراندینت از پایین به بالا :

background: -moz-linear-gradient(bottom, #969696, #fff); background: -webkit-gradient(linear, center bottom, center top, from(#969696), to(#fff));

.

.

در پست بعدی گراندینت های بسیار حرفه ای تری قرار می دم. :دی

+ نظر یادتون نره !