من الجميل أن تميز مدونتك عن باقي المدونات ببعض الإضافات التي أقوم بعرضها بشكل مستمر , هذه الإضافة تزيد جمالية للصور الموجودة في مدوتك الإلكترونية بعمل تأثيرات حركية عليها عند مرور مؤشر الماوس عليها وحين إبتعاد المؤشر ترجع كما كانت , في درسنا اليوم سنتعلم طريقة عمل هذه الاداة كما سنشرح بالصور كالعادة لكي تصل لكم المعلومة بسهولة .
مثال لهذا العمل يمكنكم زيارة إحدى صفحاتي التي قمت بإضافة هذه الإضافة لها :
مثال لهذا العمل يمكنكم زيارة إحدى صفحاتي التي قمت بإضافة هذه الإضافة لها :
HA$H 4 Free Anime
في حال أعجبتكم قوموا بالتركيز معي بهذه الخطوات لننهي الدرس من دون أية مشاكل في القالب :
الخطوة الأولى : من لوحة التحكم >> تصميم >> تحرير HTML :
الخطوة الثانية : التأشير على "توسيع قوالب عناصر واجهة المستخدم" :
الخطوة الثالثة : نبحث عن الكود التالي بالضغط على Ctrl + F :
]]الخطوة الرابعة : إضافة الـ Code التالي قبل الـ Code الأول مباشرة :
.post img {-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform: rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.post img:hover {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
}يمكن تغيير الكتابات باللون الأحمر في الكود السابق للتحكم في درجة ميلان وإتجاه الميلان بتعويض "+" بـ "-" على سبيل المثال .