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