این تصاویر را ببینید:
این تصاویر رو راحت میشه با کد های 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));
من فقط همین چند تا ورژن رو امتحان کردم دیگه بقیه ی ورژن ها رو خودتون امتحان کنید.
موفق باشید.