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

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!
5 1184 ۱۰ خرداد ۹۴ محمد اسفندیاری

در این مطلب نمونه 2 از input رو در اختیارتون میزارم.

میبینید که هر وقت روی input‌ کلیک میکنید و فوکوس میکنید ، افکت زیبایی نمایان میشه.

کدهای HTML :

کدهای CSS :

کدهای Javascript :

در این مطلب از classie.js‌ استفاده شده است.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

Source

نوع کد رايگان

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

  • ‏‏

    سلام
    ازتون خیلی ممنونم 😕 ولی اگر یکم توضیح میدادید کدهارو بهتر نبود ؟
    الان من یه سوال دارم
    این before و after که شما نوشتید دقیقا استایلاش کی اعمال میشه مثلا هاور موقعی هست که موس میره رو یه چیزی حالا این بیفور و افتر چیه
    الان تو این پروژه .input__label–nariko::before این دقیقا کجا داره اعمال میشه
    و چرا کانتنت رو خالی گذاشتید
    تقریبا تو همه ی پروژه هایی که اقای اسفندیاری گذاشتن این مورد دیده میشه ولی این سوال توی ذهن من مونده و جوابش رو هیچ جا نمیتونم پیدا کنم

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

    • ‏‏
      محمد اسفندیاری(۱۱ خرداد ۱۳۹۴)

      این آموزشها رو ببینید بهتون کمک میکنه :
      http://www.7learn.com/tutorials/before-and-after-pseudo-elements
      http://www.7learn.com/web-programming-languages/css-background-images-opacity

    • ‏‏
      وحید صالحی(۱۱ خرداد ۱۳۹۴)

      سلام دوست عزیز ببینید از after و before زمانی استفاده میشه که بخواهیم مقادیری رو از فایل استایلمون پاس بدیم به یک عنصیر یا تگ html دورن صفحه فرض کنید ما یک عنصر div با کلاس test رو در صفحه داریم که درون این div عبارت طراحی وب رو قرار دادیم به صورت زیر :

      حالا اگر بخواهیم قبل و بعد از این متن متنی رو از طریق css وارد کنیم از سلکتور after و before و پراپرتی content استفاده می کنیم بصورت زیر ابتدا به قبل از عبارت موجود در div عبارت شرکت در رو اضافه می کنیم

      که نتیجه بصورت زیر خواهد شد

      حالا اگر در کد css بجای before بیاد و after رو قرار بدید کلمه شرکت در به بعد از کلمه طراحی وب اضافه میشه این از توضیح در مورد استفاده از این سلکتور ها اما نکتهای رو که باید مد نظر داشته باشید که توسط دو سلکتر after و before حتما نباید متنی رو قبل یا بعد از متن موجود در عنصر مورد نظر اضافه کنید بلکه میشه تعدادی از پراپرتی ها یا همون استایل خاصی رو به قبل یا بعد از محتوای یک عنصر اضافه کرد بخاظر همین مقدار پراپرتی content رو خالی قرار میدیم مثل همین کد های در این آموزش یعنی به مرورگر می گیم محتوایی رو نمی خواهیم اضافه کنیم بلکه به بعد یا قبل محتوای موجود می خواهیم استایلی رو اضافه کنیم …

  • ‏‏

    اینو توضیح کاملتری اگه داره بگید که بیشترین کاربرد برای چیه که اینجوری بصورت مثال بهتر یاد بگیرم
    ممنون میشم

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram