تأثير مربعات الإدخال مشابه لجوجل كروم input text effects

كتب يوم : 1 نوفمبر 2011 - تصنيف : حيل وأفكار css


كثيراً من الأصدقاء يسأل كيف نقوم بعمل تأثير جوجل كروم على مربعات إدخال النصوص مثل المثال بالأعلى
الحل في منتهى البساطة …..باستخدام ال css
كل ما عليك فعله هو الذهابإلى ملف الإستايل الخاص بك ولنفترض أنه style.css
أكتب في السطر الأخير الكود التالي أو قم نسخه ولصقه :

input:focus { border:#0CF solid 2px; }

الموضوع بسيط ومش محتاج كلام اكتر من كده …… طبعاً لازم يكون عندك خلفية مسبقة ولو بسيطة بلغة ال css
علشان تقدر تعمل التعديلات على الكود اللي تتماشى مع شكل مدونتك أو موقعك
لمشاهدة التطبيق : أضغط هنا