رأيك يهمنا
تغير اللغة
المتابعون
اخر المواضيع
-
بسم الله الرحمن الرحيــم السلام عليكم ورحمة الله وبركــاتهـ هذا ا...
-
تزخر الشبكة العنكبوتية بالآلاف من المواقع ،منها القيم المفيد ومنها الذي وجوده مثل عدمه ! ،وحول هذه المواقع يتنوع البحث ومن بينها برزت عدة مو...
-
أجمل خطوط الويب GE SS Two Light مع الشرح الكامل لطريقة التركيب بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الأنبياء والمرسلين سيدنا ...
-
ابوذيات , بالشفايف , عسل ابوذيات / غزل بالشفايف تلالي مثل چيس ابيض ولك شاف وعونه الكحّل عيونه والك شاف الك مبسم يفت روحي والك شاف مرج بح...
-
اضافة قائمة جانبية أنيقة و جميلة بتقنية CSS .. السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية اضافة قائمه جم...
-
تحميل برامج شركة Nero لنسخ الاسطوانات و الوسائط المتعددة Nero 14 Platinum 15.0.02200 Final فى اخر اصدارته على اكثر من سيرفر تحميل برامج شركة...
-
قصة الأسد الذى هجم على وادى الحمير لكن تراجع بسبب حمار …! ﺃﺳﺪ ﻫﺠﻢ ﻋﻠﻰ ﻭﺍﺩﻱ كله ﺣﻤﻴﺮ جميع الحمير ﻫﺮﺑﻮﺍ ﺍﻻ ﻭﺍﺣﺪ .. ﺻﺎﺭ ﻳﻨﻬﻖ ﻣﻦ ﺍﻟﺨﻮﻑ ﺗﺮﺍﺟﻊ ﺍﻷﺳ...
-
بالصور البحيرة التى سيشرب منها يأجوج ومأجوج فى اخر الزمان السلام عليكم ورحمة الله وبركاته كلنا نعلم انه من علامات الساعة الكبرى هو خروج قو ي...
-
السلام عليكم و رحمته الله تعالي وبركاته و أهلا وسهلا بك في درس جديد و اللذي هو التعريف عن أفضل و أحسن برنامج تنظيف الكمبيوتر من الملفات اللت...
-
السلام عليكم ورحمة الله تعالى وبركاته , اقتتاح دروس موقع دروس الفوتوشوب , بأولى دروس الموقع , وهو درس عمل تيبوغرافي حصريا على موقع دروس ...
تبادل اعلاني
للتصفح الافضل
اخر التعليقات
يتم التشغيل بواسطة Blogger.
التسميات
- ابوذيات عراقيه
- اخبار التكنالوجيا
- اخر الاخبار
- اضافات بلوجر احترافية
- اضافات ويندوز
- الاندرويد
- البث المباشر
- البحوث الجغرافية
- الدعم الفنى
- بالعربي
- برامج الكومبيوتر
- برامج حماية
- تصاميم
- خدمة الانترنيت
- خدمة التنصيب
- خدمة الفوتوشوب
- خدمة صيانة
- خدمةالجوالات
- دروس وادوات الفوتوشوب
- عالم رقمي
- عجائب الخالق
- فوتوشوب اون لاين
- قسم الاسلامي
- قسم الالعاب
- قوالب بلوجر معربة
الـموضــوعـات الأكـثـر زيـارة
-
بسم الله الرحمن الرحيــم السلام عليكم ورحمة الله وبركــاتهـ هذا ا...
-
تزخر الشبكة العنكبوتية بالآلاف من المواقع ،منها القيم المفيد ومنها الذي وجوده مثل عدمه ! ،وحول هذه المواقع يتنوع البحث ومن بينها برزت عدة مو...
-
أجمل خطوط الويب GE SS Two Light مع الشرح الكامل لطريقة التركيب بسم الله الرحمن الرحيم والصلاة والسلام على اشرف الأنبياء والمرسلين سيدنا ...
-
ابوذيات , بالشفايف , عسل ابوذيات / غزل بالشفايف تلالي مثل چيس ابيض ولك شاف وعونه الكحّل عيونه والك شاف الك مبسم يفت روحي والك شاف مرج بح...
-
اضافة قائمة جانبية أنيقة و جميلة بتقنية CSS .. السلام عليكم ورحمة الله تعالى وبركاته سوف نتطرق في هذه التدوينة إلى كيفية اضافة قائمه جم...
-
تحميل برامج شركة Nero لنسخ الاسطوانات و الوسائط المتعددة Nero 14 Platinum 15.0.02200 Final فى اخر اصدارته على اكثر من سيرفر تحميل برامج شركة...
-
قصة الأسد الذى هجم على وادى الحمير لكن تراجع بسبب حمار …! ﺃﺳﺪ ﻫﺠﻢ ﻋﻠﻰ ﻭﺍﺩﻱ كله ﺣﻤﻴﺮ جميع الحمير ﻫﺮﺑﻮﺍ ﺍﻻ ﻭﺍﺣﺪ .. ﺻﺎﺭ ﻳﻨﻬﻖ ﻣﻦ ﺍﻟﺨﻮﻑ ﺗﺮﺍﺟﻊ ﺍﻷﺳ...
-
بالصور البحيرة التى سيشرب منها يأجوج ومأجوج فى اخر الزمان السلام عليكم ورحمة الله وبركاته كلنا نعلم انه من علامات الساعة الكبرى هو خروج قو ي...
-
السلام عليكم و رحمته الله تعالي وبركاته و أهلا وسهلا بك في درس جديد و اللذي هو التعريف عن أفضل و أحسن برنامج تنظيف الكمبيوتر من الملفات اللت...
-
السلام عليكم ورحمة الله تعالى وبركاته , اقتتاح دروس موقع دروس الفوتوشوب , بأولى دروس الموقع , وهو درس عمل تيبوغرافي حصريا على موقع دروس ...
الاثنين، 23 سبتمبر 2013
أهتزاز الصورة بأستخدام الـ CSS3 رأئع
شاهد:
أهتزاز الصورة بأستخدام الـ 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
ثم بعد ذالك سنضع له الصفات في الخطة الثانيه .
هذه هي الطريقة بكل بساطه ومن لديه سؤال فأنا هنا ~
صفحات
-
خدماتنا جديد
-
اسعارنا جديد
-
صيانة جديد
-
انضم لنا جديد
-
الفهرس جديد
-
اكواد الالوان جديد
-
محول الاكواد جديد
-
فوتوشوب اونلاين جديد
-
صفحتنا على الفيس بوك جديد
0 التعليقات:
إرسال تعليق