السلام عليكم ورحمة الله وبركاته ... في درس اليوم حيله ذكيه سنطبقها معا ووظيفتها باختصار هي عمل تاثير على الصور المرفقه داخل تدوينات مدونة بلوجر ىولمعاينة مثال حى على تلك الاضافه يمكنك معاينة الرابط التالي
طريقة عمل تاثير متحرك على الصور داخل االتدوينه بتقنية ال css3
لتطبيق تلك الاضافه على مدونتك قم باتباع الخطوات التي بالاسفل :
- قم بالذهاب الى لوحة تحكم مدونتك > ثم الى تصميم> ثم تحرير HTML
- قم باخذ نسخه احتياطيه من قالب مدونتك
- ابحث عن الكود التالي ]]></b:skin>
- ضع قبله الكود الموجود بالاسفل
/* --------- tqarob Image Rotation ----- */
.opacity {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.opacity:hover {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1.3;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}
5. الان قم بحفظ قالب مدونتك!
طريقة استخدام تلك الطريقه على الصور داخل التدوينه?
قم بكتابة تدوينتك بالطريقه المعتاده وعند حاجتك لوضع صوره وعليها هذا التاثير قم بالانتقال الي وضع تحرير HTML:
وضع الكود الموجود بالاسفل
<img src="رابط الصوره" border="0" alt="وصف مختصر للصوره" class="opacity" />
ثم قم باستكمال تدوينتك او قم بنشرها
اى استفسار يرجا ترك تعليق بالاسفل!!
يسمح لكم بنقل الموضوع بشرط ذكر المصدر : طريقة عمل تاثير متحرك على الصور داخل االتدوينه بتقنية ال css3 | TATWEERWEB
ساهم في نشر الموضوع ولك جزيل الشكر !
أضف تعليقك عن طريق الفيسبوك :