• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

17 2971 ۲۹ خرداد ۹۴

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

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

کد 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 رو 0 بزارید به این شکل

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

موفق باشید.

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 17 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

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

  • ‏‏
    رضا قاسم نژادیان(۲۹ خرداد ۱۳۹۴)

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

  • ‏‏
    افشین زندی(۲۹ خرداد ۱۳۹۴)

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

  • ‏‏

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

  • ‏‏

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

  • ‏‏
    محمد(۲ تیر ۱۳۹۴)

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

  • ‏‏

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

    • ‏‏
      لقمان آوند(۹ تیر ۱۳۹۴)

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

  • ‏‏

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

  • ‏‏
    خرید خودرو(۱۷ شهریور ۱۳۹۴)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram