ساخت فرم "تماس با ما" با سی اس اس

کسانی که با استفاده از جدول (Table) به طراحی سایت میپردازند، هنوز باور ندارند که همه امکانات جدول در طراحی با CSS نیز میتوانند اجرا شوند. در انجمن های مختلفی که در رابطه با طراحی در آنها بحث میشوند یکی از دلایل استفاده نکردن از CSS را نحوه جایگیری عناصر می‌نامند و در اکثر مواقع نیز طراحی یک فرم تماس را مثال میزنند. آنها میگویند وقتی یک فرم تماس را با استفاده از CSS طراحی میکنند، نظم عناصر به هم ریخته و فرم ها درست بعد از نوشته قرار میگیرند که ظاهر خوبی به فرم طراحی شده نمیدهد.
اما در این مطلب قصد دارم روشی را آموزش دهم که تمامی عناصر به یک اندازه و به طور کاملا منظم در کنار یکدیگر قرار خواهند گرفت. برای مشاهده نمونه کار روی این لینک کلیک کنید.

مثالهایی برای Background

شما می توانید با شناسه background تصاویر زمینه کادر را تنظیم نمایید. این کار هم با تعیین موقعیت و هم با تعیین در صد امکان پذیر می باشد. شما می توانید با این شناسه در 9 جهت موقعیت تصویر خود را تغییر دهید.
TOP background:#fff url(medadrangi.jpg) no-repeat scroll top left background:#fff url(medadrangi.jpg) no-repeat scroll 0% 0% background:#fff url(medadrangi.jpg) no-repeat scroll top center background:#fff url(medadrangi.jpg) no-repeat scroll 50% 0% background:#fff url(medadrangi.jpg) no-repeat scroll top right background:#fff url(medadrangi.jpg) no-repeat scroll 100% 0%	CENTER background:#fff url(medadrangi.jpg) no-repeat scroll center left background:#fff url(medadrangi.jpg) no-repeat scroll 0% 50% background:#fff url(medadrangi.jpg) no-repeat scroll center center background:#fff url(medadrangi.jpg) no-repeat scroll 50% 50% background:#fff url(medadrangi.jpg) no-repeat scroll center right background:#fff url(medadrangi.jpg) no-repeat scroll 100% 50%	BOTTOM background:#fff url(medadrangi.jpg) no-repeat scroll bottom left background:#fff url(medadrangi.jpg) no-repeat scroll 0% 100% background:#fff url(medadrangi.jpg) no-repeat scroll bottom center background:#fff url(medadrangi.jpg) no-repeat scroll 50% 100% background:#fff url(medadrangi.jpg) no-repeat scroll bottom right background:#fff url(medadrangi.jpg) no-repeat scroll 100% 100%

فیلتر در CSS

برای مشاهده انواع فیلتر ها در سی اس اس اینجا را کلیک نمایید.