افکتهای زیبا برای input - قسمت دوم ( نمونه 2 )

- visibility ۵ mode_comment

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

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

کدهای HTML :

کدهای CSS :

کدهای Javascript :

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

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

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

Source

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

سلام
ازتون خیلی ممنونم 😕 ولی اگر یکم توضیح میدادید کدهارو بهتر نبود ؟
الان من یه سوال دارم
این 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 رو خالی قرار میدیم مثل همین کد های در این آموزش یعنی به مرورگر می گیم محتوایی رو نمی خواهیم اضافه کنیم بلکه به بعد یا قبل محتوای موجود می خواهیم استایلی رو اضافه کنیم …

ali asghari

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

محمد اسفندیاری

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

نیاز به لاگین

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