استایل دهی و ساخت تکست باکس های سفارشی و زیبا

در ارسال قبلی مجموعه ای گرافیکی از اشیاء طراحی سایت شامل انواع دکمه، منو، دکمه های رادیویی، چک باکس و تکست باکس هایی را به اشتراک گذاشتم و در پی آن تعداد زیادی از دوستان در مورد چگونگی استفاده عملی از آنها در وبسایت خود، سئوالاتی را مطرح کردند که تصمیم گرفتم یک آموزش کامل در این زمینه تهیه کنم. بنابراین در این ارسال چگونگی استایل دهی و ساخت جعبه متن های گرافیکی مانند آنچه در بخش جستجوی اکثر وبسایتها مشاهده می کنید را شرح می دهم و در ارسال بعدی چگونگی استایل دهی عناصری مانند چک باکس ها و دکمه های رادیویی را آموزش خواهم داد.

مشاهده دمو تکست باکس های استایل دهی شده دانلود سورس کامل

● پسورد : www.websiteha.com

استایل دهی تکست باکس ها بسیار ساده است و تنها با چند خط کد 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 ، آن را در پروژه های خود بکار گیرید.

نظرات (28) -

  • محمد

    10/30/1390 11:35:19 ب.ظ | پاسخ به این نظر

    سلام
    همه چیز عالی بود
    اما دو نکته
    اول اینکه مثلا بکگراند bg.jpg' در مثال 8 چه اندازه ای باید داشته باشه
    دوم اینکه اون تصویر ذره بین هم همینطور ؟
    ممنون

    • Admin

      11/01/1390 12:36:18 ق.ظ | پاسخ به این نظر

      سلام محمد جان، مرسی از لطفت، پاسخ سئوالاتی که مطرح کردی به عنوان نکته و کامنت به موارد 8 و 9 اضافه شد.

  • مصطفی

    10/30/1390 11:48:56 ب.ظ | پاسخ به این نظر

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

    • Admin

      11/01/1390 12:45:09 ق.ظ | پاسخ به این نظر

      سلام آقا مصطفی عزیز،
      از اینهمه لطفت صمیمانه سپاسگذارم و باعث افتخاره که بتونم هدفی رو که فرمودید دنبال کنم...

  • صابر

    11/01/1390 02:05:27 ق.ظ | پاسخ به این نظر

    واقعا سایت خیلی مفیدی دارید ممنون از آموزشهای جالبو کاربردی و شکیلی که میذارید
    متشکر

    • Admin

      11/01/1390 09:14:38 ق.ظ | پاسخ به این نظر

      مرسی صابرجان، از اینکه مطالب مفید واقع شده خوشحالم و ممنون که ارسال هارو مطالعه میکنید...

  • محسن

    11/09/1390 12:20:13 ب.ظ | پاسخ به این نظر

    سلام.

    عالی بود.

    منتظر ادامه ش هستم.

    • Admin

      11/10/1390 11:42:58 ق.ظ | پاسخ به این نظر

      خواهش میکنم محسن جان، در چند روز آینده مبحث بعدی رو ارسال خواهم کرد...

  • حمیدرضا

    11/14/1390 10:36:26 ق.ظ | پاسخ به این نظر

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

    • Admin

      11/14/1390 12:49:48 ب.ظ | پاسخ به این نظر

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

  • bahar

    11/27/1390 08:08:44 ق.ظ | پاسخ به این نظر

    آقا حامد بی نظیری!!!مطالبت واقعا آموزنده و کاربردیه.بی نهایت ممنون.فقط یه خواهش اگه میشه یه آموزش pop-up هم بذاری!خیلی ممنون

    • Admin

      11/27/1390 11:30:21 ب.ظ | پاسخ به این نظر

      سلام بهار جان
      مرسی از لطفت و همینجا میگم که مطلب بعدی نه، مطلب بعدیش در مورد نحوه ساخت پاپ آپ خواهد بود...

  • Amin

    01/29/1392 06:52:37 ب.ظ | پاسخ به این نظر

    سلام دوست خوبم . این کدها رو مگه واسه استفاده کاربرا نذاشتی پس چرا کپی کردن رو غیر فعال کردی . اگه قرار باشه من یه ساعت وایسم و اونها رو خط به خط بنویسم که نیازی به آموزش تو و سایتت نیست ما دنبال کد آماده میگردیم .

    • Admin

      02/03/1392 11:37:15 ق.ظ | پاسخ به این نظر

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

  • سعید

    03/07/1392 01:35:12 ب.ظ | پاسخ به این نظر

    سلام ,واقعا با سایته حال کردم هم طراحی و هم اطلاعات مفیدی که در اختیار گذاشتید ,مرسی از لطفتون

  • رز

    06/10/1392 10:44:59 ق.ظ | پاسخ به این نظر

    سلام مطالبتون خیلی خوبه
    ولی چرا وقتی می خوام دریافت سورس یا نسخه آزمایشی رو بزنم erorre 404  میده . اگه ممکنه مشکله سایتتون رو برطرف کنید .
    بوووووووووس

  • سمیرا

    09/15/1393 05:45:22 ب.ظ | پاسخ به این نظر

    سلام
    مطالبتون خیلی عالی بود
    اگر ممکن است منو در ساخت منو های خطی گرافیکی کمک کنید ، من دانشجوی نرم افزارم و برای ساخت پروژه هام به کمکتون نیاز دارم
    با تشکر

  • ZAHRA

    10/06/1393 11:18:35 ق.ظ | پاسخ به این نظر

    سلام اقاحامد خسته نباشین ببخشید مزاحمتون شدم
    میخاستم ببینم وبی رو سراغ ندارین ک الگوریتمای درس ذخیره بازیابی رو توضیح بدن
    یا کلا اموزش این درس بصورت راحت توش داشته باشن اخه من جزوه استاد رانکوهی مدرس کشوریش رو گرفتم اما خیلی توضیح جامع نداشت اگ وبی رو سراغ داشتین بم بگین  استاد ها که خودشون هم بارشون نیس ک بخوان جواب ماروبدن والابخدا من فقط میخوام درباره موضوع های محاسباتی چندتا مثال باشه ک برام جا بیوفته
    خیلی ممنونم ازتون

  • پارسا

    10/08/1393 10:33:01 ق.ظ | پاسخ به این نظر

    کد حجم فایل و نمایش آن  در تکست باکس به چه صورتی می باش؟

  • پنجره دوجداره

    02/08/1394 10:44:40 ق.ظ | پاسخ به این نظر

    با سلام و سپاس بسیار عالی بود موفق باشید

  • ابراهیم

    02/20/1394 10:40:09 ب.ظ | پاسخ به این نظر

    خیلی عالیه...تشکر از سایت خوبت و انتشار مطالب رایگانت به سایت منم بیا کدنویسان وردپرسی

Loading