در ارسال قبلی مجموعه ای گرافیکی از اشیاء طراحی سایت شامل انواع دکمه، منو، دکمه های رادیویی، چک باکس و تکست باکس هایی را به اشتراک گذاشتم و در پی آن تعداد زیادی از دوستان در مورد چگونگی استفاده عملی از آنها در وبسایت خود، سئوالاتی را مطرح کردند که تصمیم گرفتم یک آموزش کامل در این زمینه تهیه کنم. بنابراین در این ارسال چگونگی استایل دهی و ساخت جعبه متن های گرافیکی مانند آنچه در بخش جستجوی اکثر وبسایتها مشاهده می کنید را شرح می دهم و در ارسال بعدی چگونگی استایل دهی عناصری مانند چک باکس ها و دکمه های رادیویی را آموزش خواهم داد.
استایل دهی تکست باکس ها بسیار ساده است و تنها با چند خط کد CSS می توانیم به استایل های متنوعی دست پیدا کنیم. در ادامه نمونه هایی از انواع حالت های قابل پیاده سازی را به شما نشان خواهم داد که با تغییرات بسیار ساده و اندک در کدهای مورد استفاده برای هر کدام، می توانید استایل متناسب با تم و قالب وبسایت خود را ایجاد کنید.
1- تغییر رنگ پس زمینه تکست باکس
کد CSS
.myTextbox {
background-color : #99FFCC;
border: 1px solid #008000;
width: 230px;
}
2- تغییر استایل و رنگ حاشیه تکست باکس
کد CSS
.myTextbox {
border: 2px dashed #D1C7AC;
width: 230px;
}
3- تغییر استایل با قرار دادن یک تصویر در پس زمینه تکست باکس
کد CSS
.myTextbox {
background-image: url(images/bg.png);
border: 1px solid #6297BC;
width: 230px;
}
4- تغییر سایز و استایل حاشیه طرفین یک تکست باکس
کد CSS
. myTextbox {
width: 230px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
5- گرد کردن گوشه های تکست باکس
کد CSS
. myTextbox {
background: url(images/rounded.gif) no-repeat top left;
height: 22px;
width: 230px;
}
. myTextbox {
border: 0;
width:220px;
margin-top:3px;
}
6- ایجاد حاشیه دوبل برای تکست باکس
کد CSS
. myTextbox {
border: 3px double #CCCCCC;
width: 230px;
}
7- تکست باکس با پس زمینه گرادینت
کد CSS
. myTextbox {
background-image:url(images/form_bg.jpg); /* این عکس می تواند1 پیکسل عرض داشته باشد و توسط دستور بعدی تکرار شود */
background-repeat:repeat-x; /* تکرار قطعه عکس مورد استفاده در محور افقی */
border:1px solid #d1c7ac;
width: 230px;
color:#333333; /* رنگ متن تکست باکس */
padding:3px; /* فاصله از داخل از همه طرف */
margin-right:4px; /* فاصله از لبه بیرونی سمت راست تکست باکس */
margin-bottom:8px; /* فاصله از لبه بیرونی پائین تکست باکس */
font-family:tahoma, arial, sans-serif;
}
8- انداختن سایه در داخل تکست باکس
کد CSS
. myTextbox {
width: 221px;
background: transparent url('images/bg.jpg') no-repeat;
color : #747862;
height:20px;
border:0;
padding:4px 8px; /*فاصله داخلی 4 پیکسل از بالا و پائین و 8 پیکسل از چپ و راست */
margin-bottom:0px;
}
نکته: تصویر مورد استفاده در این مورد بر خلاف مورد شمار7 باید دقیقا به اندازه تکست باکس ساخته شود. توجه کنید که خاصیت padding
باعث افزایش طول و عرض عنصر می شود. بنابراین باید مقداری که در این خاصیت استفاده میکنیم از مقدار طول و عرض تکست باکس کم کنیم. به عبارت دیگر مجموع مقادیر استفاده شده در خاصیت padding
به علاوه عرض تکست باکس باید با طول تصویر مساوی باشد. پس در این مثال عرض تصویر مورد استفاده (bg.jpg) باید 237 پیکسل و ارتفاع تصویر باید 28 پیکسل باشد.
2x8=16 (مجموع فاصله از چپ و راست در خاصیت padding)
221+16=237 (عرض تصویر پس زمینه تکست باکس)
2x4=8 (مجموع فاصله از بالا و پائین در خاصیت padding)
20+8=28 (ارتفاع تصویر پس زمینه تکست باکس)
9- انداختن یک تصویر در داخل تکست باکس
کد CSS
. myTextbox {
background:#FFFFFF url(images/search.png) no-repeat 4px 4px; /* فاصله عکس از چپ و بالا برابر با 4 پیکسل */
padding:4px 4px 4px 22px; /* از بالا، پائین و راست 4 پیکسل فاصله داخلی و از چپ 22 پیکسل فاصله داخلی */
border:1px solid #CCCCCC;
width:230px;
height:18px;
}
نکته: سایز تصویر ذره بین باید به اندازه ای باشد که از داخل تکست باکس بیرون نزند و برای اینکه از لبه های تکست باکس کمی فاصله داشته باشد، در دستور background
میزان فاصله را از چپ و بالا همانند مثال فوق مشخص میکنیم که در اینجا 4 پیکسل فاصله لحاظ شده است. سپس برای اینکه متن نوشته شده در تکست باکس روی عکس قرار نگیرد، با استفاده از خاصیت padding
به میزان عرض عکس از لبه داخلی تکست باکس فاصله ایجاد میکنیم. که در اینجا 22 پیکسل از لبه سمت چپ داخل تکست باکس فاصله ایجاد کرده ایم.
همانطور که ملاحظه میکنید در همه بلاک های دستورات CSS فقط از چند دستور محدود استفاده شده است که با تغییر مقادیر آنها می توانید حالت های بیشماری را به وجود آورید.
اکنون می توانید پس از بریدن و جدا کردن تکست باکس موجود در فایل psd ارائه شده در ارسال قبلی با عنوان مجموعه زیبا اشیا طراحی سایت شامل انواع دکمه، منو و غیره ، با استفاده از دستورات مورد شماره 8 ، آن را در پروژه های خود بکار گیرید.