گرادینت gradient برای همه ی مرورگرها

این تصاویر را ببینید:

این تصاویر رو راحت میشه با کد های css3 برای قالب سایت ایجاد کرد. حالا این گرد شدن div رو بهش توجهی نکنید . منظورم این حالت گرادینت است. 

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

برای مرورگر کروم و سفری:

background: -webkit-gradient(radial, 250 30, 50, 250 50, 250, from(#82D4FA), to(#5DA1C0));


برای مرورگر اکسپلورر: ورژن 8

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#82D4FA, endColorstr=#5DA1C0)";


برای ورژن 6 و 7 و 8 :

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907);


سازگار با فایرفاکس:

background:-moz-linear-gradient(center top , #82D4FA, #5DA1C0) repeat scroll 0 0 transparent;


سازگاری با اپرا:

background-image: -o-linear-gradient(#82D4FA,#5DA1C0);

می توانید کدهای رنگ رو به صورت RGB هم بنویسد:

background-image: -o-linear-gradient(rgb(0,189,0),rgb(0,181,255));

من فقط همین چند تا ورژن رو امتحان کردم دیگه بقیه ی ورژن ها رو خودتون امتحان کنید.

موفق باشید.


نظرات 2 + ارسال نظر
max3 جمعه 12 مهر‌ماه سال 1392 ساعت 11:03 ق.ظ http://max3.tk

سلام آموزش های خوبی دارین ولی اگر بتونین در قالب فایل های PDF هم در وبلاگتون قرار بدین بهتر میشه

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

چیا دوشنبه 6 آبان‌ماه سال 1392 ساعت 11:10 ب.ظ http://iamghafour.ir

گرادیانت و حتی گرد شدن گوشه های هنوز توی بعضی از مرور گرها پشتیبانی نمی شه ... به نظرم فعلا با فتوشاپ عکس ها رو گرد و گرادیانت بزنیم بهتر باشه :)

این روشی که گفتم گرادینت هست و توی همه ی مرورگر ها پشتیبانی میشه اون گرد کردن هست که توی اکسپلورر پشتیبانی نمیشه ولی میشه از pie.htc برای گرد کردنش استفاده کرد.

برای نمایش آواتار خود در این وبلاگ در سایت Gravatar.com ثبت نام کنید. (راهنما)
ایمیل شما بعد از ثبت نمایش داده نخواهد شد