الاثنين، 23 سبتمبر 2013

أهتزاز الصورة بأستخدام الـ CSS3 رأئع

بسم الله الرحمن الرحيم
والصلاة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه وعى اله افضل الصلاة والتسليم
السلام عليكم ورحمة الله وبركاته .

اليوم معنا [ تأثير ] يجعل الصورة تهتز سواءَ كانت في المدونة او في اي موقع آخر فهذه الطريقة غير خاصة ببلوجر وهي تناسب جميع المواقع لأنها مصنوعه فقط من الـ CSS3 >> لغتي المحبوبه .
ملاحظة : افضل طريقة لأستخدام التأثير هي في الهوفر hover .

الطريقه تتكون من خطوتين :

الخطوة الأولى : زرع كود خاص في اكواد الـ CSS للقالب :

ندخل المدونة
ثم نتجه الى القالب .
نحرر القالب .
نبحث عن <![CDATA[
مباشرة اسفلها ضع الكود التالي :

/* this is 7loll.blogspot.com */
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }}
/* this is 7loll.blogspot.com */

الخطوة الثانيه : وهي وضع هوفر للصورة وأعطائها الصفات التاليه :

-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin: 50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

الأن أذهب الى الصورة وشاهد الأهتزاز .

===

تطبيق الطريقة على لوجو المدونة :

في اغلب الأحيان يكون الأي دي لصورة اللوجو Logo على هذا الشكل #header-inner img
يجب عليك معرفة الأي دي او التأكد منه في مدونتك .
على العموم سنضع له هوفر ليصبح هكذا : #header-inner img:hover
ثم بعد ذالك سنضع له الصفات في الخطة الثانيه .

هذه هي الطريقة بكل بساطه ومن لديه سؤال فأنا هنا ~

بقلم منير العراقي

أنا من العراق، احب أن أضع كل ما أعرف من معلومات حول الحاسوب ولاأبخل به عليكم، وخطرت لي فكرة عمل مدونة تضم كل المجالات التعليمية للكومبيوتر التي أستطيع إفادتكم بها، فأرجوا ان لاتبخلوا علي أيضا بمتابعتكم لمواضيعي كما ان تعليقاتكم تهمني وتزيد من عطائي لكم إخوتي الكرام وأي استفسار ان موجود وشكرا

قسم : اضافات بلوجر احترافية