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

- visibility ۱۷ mode_comment

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

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

کد HTML

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

info نکته :

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

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

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

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

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

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

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

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

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

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

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

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

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

موفق باشید.

comment دیدگاه کاربران
آرمین

ممنون میوند جان مطلب جالب و کاربردی بود ❓

میوند

سلام آرمین جان
لطف داری
امیدوارم مفید واقع شده باشه
موفق باشی ❓ ❓

رضا قاسم نژادیان

سلام میوند جان
مطلب جالب و خوبی بود ❓ ❓
موفق باشی

میوند

سلام رضا جان
ممنون داداش
موفق باشی ❓ ❓

افشین زندی

سلام داداش.
آموزش خیلی خوبی بود. امیدوارم موفق باشی
ممنون

میوند

سلام داداش
خوشحال شدم که خوشت اومد
موفق باشی 😉 ❓ ❓

iamreza

بسیار عالی؛ تبریک بابت نویسنده شدن شما. امیدوارم موفق و سعادتمند باشی 🙂 ❓

میوند

سلام
ممنون لطف دارید
موفق و سربلند باشید

hassani

آموزش مفیدی بود
ممنونم
ان شاالله موفق بشی ❓ ❓

میوند

مرسی
خوشحالم که براتون مفید بود
موفق باشید

محمد

ممنون خیلی مفید بود ❓

میوند

خواهش میکنم موفق باشید ❓

elnaz

ببخشید این خطی که نوشتین چیه؟؟::-webkit-input-placeholder
این جز کدهای css است؟من توی آمو.شهای css شبیه این کد ندیدم تا به حال…..ممنون می شم بگین

لقمان آوند

سلام
خیر جز کدهای استاندارد css نیست و کدی مخصوص مرورگرهای کروم و سافاری هست که موتور رندرینگشون webkit هست .
این کد برای استایل دهی به placeholder فیلد های متنی استفاده میشه گویا !

فرید

خیلی خنک بود دوست عزیز 😳 😛 ❓

خريد خودرو

سلام آموزش خوبی بود ممنون از سایت خوب و زحمات شما

میوند بارکزی

ممنون دوست عزیز لطف دارید .
موفق باشید!!

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.