no-img
دیزاینر

آموزش ساخت افکت زیبا برای فیلد جستجو


دیزاینر
مطالب ویژه
اطلاعیه های سایت

adsads
گزارش خرابی لینک
اطلاعات را وارد کنید .

ادامه مطلب

آموزش ساخت افکت زیبا برای فیلد جستجو
zip
مرداد ۲۵, ۱۳۹۴

آموزش ساخت افکت زیبا برای فیلد جستجو


در این مطلب قراره ایجاد یک فیلد جستجو زیبا رو براتون آموزش بدیم تا هم بتونین ازش ایده بگیرین و هم در سایتتون ازش اسفاده کنید

خب بریم سراغ آموزش

کد HTML

کد HTML این مطلب به این صورت هست که توی تگ Form تگ Label و Input قرار داره و توی تگ Label هم یک آیکون هست.

نکته : در اینجا ما از فونت BYekan استفاده کردیم ولی شما میتونین به سلیقه خود ار هر فونت استفاده کنید.

بریم سراغ کد های CSS
برای Input از کد های زیر استفاده میکنیم

 

بیشتر این کد ها کد های ساده هستند اما لازمه دلیل استفاده بعضی رو براتون بگم

background-color: رنگ پس زمینه تعیین میکنه که من اون رو رو شفاف گذاشتم تا هر رنگ که تگ پدرش داره اینم همون رنگ رو بگیره.

border-bottom: یک border به شکل … زیر Input گذاشتم.

outline: مرورگر ها همیشه برای Input ها یک Outline میزارن که خیلی جالب نیست واسه همین این مورد رو None گذاشتم.

width: عرض Input رو تا جای که برای نمایش متن Placeholder مشکل نداشته باشه کم کردم شما هم نظر به متن Placeholder میتونین این مورد رو کم و زیاد کنید..

خب بخش مهم آموزش کد زیر هست

با این کد ما میگیم وقتی که رو فیلد Focus شد چه اتفاقی بیوفته که اینجا بهش گفتم عرض رو زیاد کنه و اون Border به شکل … زیر Input رو رنگش رو تغییر بده.

اینم کد های عکس کنار فیلد که سادست و نیازی به توضیح نداره.

برای تغییر رنگ Placeholder در Input باید از کد زیر استفاده کنیم که کد های تعریف شده مرورگر ها میباشد.

برای نمونه دوم این آموزش فقط لازمه عرض Input رو ۰ بزارید به این شکل

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



ads

درباره نویسنده

Admin 153 نوشته در دیزاینر دارد . مشاهده تمام نوشته های

دیدگاه ها


دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *