شرحنا اليوم علي طريقة جميلة جدا لوضع تأتيرات على الصورهذه الخاصية تعطي للصور جمالية
وتنسيق رائع عند وضع مؤشر الماوس علي الصورة سوف تميل جانبا وعند إبعاد
مؤشر الماوس تعود الصورة لوضعيتها الطبيعية لكنني بعد جهد
شخصي تمكنت من صنع كود يتم إضافته مرة واحدة للقالب ويتم تفعيل خاصية
التأثير علي جميع الصور بدون إستثناء ،وأعني بالذكر أن صور الخلاصات "إقرأ
المزيد" هي كذلك تطبق عليها هذه الخاصية مما يعطي للمدونة جمالية ورونق
رائعين ,والآن لنتوجه لتطبيق الكود.
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
ثم قم بوضع الكود التالي قبله
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة وبنتظار ردودكم
مدونة ربحني شكرا
انتقل إلى لوح تحكم مدونتك،إختر "تصميم" ،ثم "تحريرHTML " ثم ضع علامة في خانة توسيع قوالب عناصر واجهة المستخدم.قم بالبحث عن الكود التالي بالإستعانة بلوحة التحكم (CTRL+F )
]]></b:skin>
يمكنك التحكم في درجة ميلان الصور كما تريد وبإتجاهها كذلك سواء على اليسار أم على اليمين وذلك بإستبدال الرمز (+) بالرمز( -) والعكس، حيث تمثل القيمة 2deg+ درجة الميلان قبل وضع مؤشر الماوس وتمثل كذلك القيمة 1deg- درجة الميلان عند وضع مؤشر الماوس على الصورة ..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);
}
والتتيجة تكون الصورة على هذا الشكل .
هذا كل شيء ،أتمني أن تعجبكم هذه الإضافة وبنتظار ردودكم
مدونة ربحني شكرا
ليست هناك تعليقات:
إرسال تعليق
(( هام جدا : الرجاء عند التعليق الضغط على اعلامي ليتم ارسال رسالة لبريدك الالكتروني عند الرد عليك ومتابعة التعليق الخاص بك ))