إضافة تأثيرات حركية على الصور

إضافة تأثيرات حركية على الصور لمدونة بلوجر ، اضافة رائعة حيث عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد مؤشر الماوس تعود الصورة لوضعيتها الطبيعية ، كما انها تعطي جمالية لمدونتك وتدويناتك.

1- ادخل الى مدونتك عن طريق الرابط التالي:
http://blogger.com/
2- اضغط على "قالب" بجانب مدونتك
4- ابسط اكواد القالب عن طريق وضع علامة صح في المربع "توسيع عناصر قوالب واجهة المستخدم"

لإضافتها اتبع الخطوات التالية :

3- ستفتح لك صفحة التصميم ، اضغط على "تحرير html"

5- ابحث عن الجزء التالي (اضغط crtl+F للبحث) :

]]></b:skin>

ثم الصق الكود التالي قبله مباشرة:

.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);
}

6- يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة .
و أخيرا قم بالضغط على حفظ و مبروك عليك الاضافة.

0 التعليقات