السلام عليكم
مرحبا بكم نضع اليوم بين ايديكم نحن عمادة المدونات (مدونة الفائز.... معنا انت الفائز دوماً )، لمسه جمالية جديدة تضاف الى ماتم شرحة سابقا، لماينة الاضافة ضع الماوس على الصورة ادناه، ومن ثم نبدأ الشرح:
في هذا الشرح السريع سوف نجعل الصور تتضخم بنسبة 80% عن حجمها الطبيعي بمجرد مرور الماوس عليها ، وهذا سيعطي جانب جمالي مع بعض المتعة لزوار مدونتك .
اولا:مصطلحات يجب معرفتها دائما في بعض المتصفحات لاتدعم تقنيات css3 ، وحتى نتغلب على ذلك نبدأ دائما التقنيات بالاختصارات التالية وتكون في البداية ، والاختصارات هي:
ثانيا:نبدأبكتابة الكود ادناه في منطقة <head> او في ملف css منفصل ، ساعتمد هنا الكتابة في منطقة الهيدر ، وسوف نلاحظ باننا استخدمنا الاختصارات اعلاه قبل الكود لكي تظهر الحركة على كل المتصفحات، وبما ان الصورة سيتم تكبيرها سنعرفها بgrow pic:
ثالثا: اضفنا في الكود اعلاه تعريف للصورة والاثر المترتب على مرور الماوس عليها.
رابعا:اضافة كود الى منطقة <body> لتعريف الصورة التي سيتم اضافة التاثير عليها كما هو موضح في الصورة ادناه:
*ليصبح الكود الكامل كما هو مبين ادناه:
*لاتنسى وضع امتداد الصورة مكان bath.
بالتوفيق.
ليست هناك تعليقات:
إرسال تعليق