ساخت تکس باکس های زیبا

[میلاد قاضی پور]

سلام . حتما توی بعضی سایتها تکس باکسهایی دیدید که رنگ پشت زمینشون به صورت گرادینت هست یا مثل اونچه که برای قسمت "جستجوی گوگل" همین سایت میبینید عکسی قرار داده شده . برای طراحی همچین تکس باکسهایی، در سی اس اس یک کلاس ایجاد کنید .و کدهای زیر رو توش بنویسید :





textBox
{
background-image:url(images/bg.jpg);
background-repeat:repeat-x;
border:1px solid #d1c7ac;
width: 130px;
color:#333333;
padding:3px;
margin-right:4px;
margin-bottom:8px;
font-family:tahoma, arial, sans-serif;
}




خب . مطمئنم همتون متوجه شدید که هیچگونه کد خاصی نداشت . در واقع ضروری ترین قسمت قضیه همون خط اول بود که قراره فایل عکس مارو بخونه . یعنی مثلا این تصویر :


" http://www.cssportal.com/images/form_bg.jpg "

حالا یه کنترل "اینپوت" روی فرم گذاشته و در قسمت کد ، کلاس اون رو مساوی با کلاسمون در سی اس اس قرار میدیم .

کد زیر :




<input id="Text1" type="text" class="textBox"/>




نتیجه :

http://upload.doostjoon.com/images/62Untitled_1.gif




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

[Peyman.Gh]

ممنون دوست عزیز
همجین مثال هایی از CSS را ادامه بده !

[kohyar]

دوست عزيز ممنو كه اين آموزش رو گذاشتي
فقط يك سوال::
اونم اينكه بعضي از تكست باكس ها بصورت تصاوير با ليه هاي داراي انحنا هستند يعني دو تا گوشه تكست باكس گرد هستش
اينكار رو چطور ميشه با CSS انجام داد
ممنون

[میلاد قاضی پور]

اینکارو هم به همین شکل میشه انجام داد . روش اول اینه که تصویر تکس باکسی که تجسم کردیم رو دقیقا به جای تصویری که در مثال گفته شد قرار بدیم و در عوض طول تکس باکس رو هم دقیقا با تصویر یکی کنیم .
روش دوم : یک تصویر به شکل دایره ایجاد کنیم ،


http://sites.google.com/site/myuploadedimages/_/rsrc/1266734538302/home/barna-1/gerd.gif


تصاویری هم برای اضلاع چپ ، راست ، بالا و پایین به شکل زیر ایجاد میکنیم .

http://sites.google.com/site/myuploadedimages/_/rsrc/1266734571113/home/barna-1/r.gif

http://sites.google.com/site/myuploadedimages/_/rsrc/1266734558957/home/barna-1/l.gif

http://sites.google.com/site/myuploadedimages/_/rsrc/1266734675691/home/barna-1/b.gif

http://sites.google.com/site/myuploadedimages/_/rsrc/1266734687496/home/barna-1/t.gif

خب حالا فقط باید یکمی سی اس اس بازی بکنیم . شما یه تیبل سه در سه رو در نظر بگیرید . برای چهار گوشه تیبل تصویر دایره رو نسبت میدید و فقط پوزیشن هاشو عوش میکنید تا هر ربع از دایره در گوشه ای که باید قرار بگیره . برای سلول اضلاع راست و چپ و بالا و پایین هم تصاویر دیگرو قرار میدید . تا به این تصویر برسید .


http://sites.google.com/site/myuploadedimages/_/rsrc/1266734950640/home/barna-1/n.gif

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

[میلاد قاضی پور]

خب البته اینم همونه . با فایرباگ بررسی کنید متوجه می شید . راههای زیادی هم هست برای اینجور کارها . ولی به نظر من تنها روشی که سرعت بارگذاری بالایی داره و در اکثر سایتها مورد استفاده قرار میگیره همینه .ضمنا خطای کمتری هم داره . اکثرا هم مرورگرها پشتیبانی میکنن .

[میلاد قاضی پور]

http://www.emblematiq.com/lab/niceforms/demo/v20/niceforms.html