18‏/10‏/2014

تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب بداية نقطة،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع التأثير المختار فوقه
* ملاحظة التأثير يطبق على جميع صور المدونة بإمكانك تطبيقه على عنصر معين بتغيير img بمعرف العنصر المختار
التأثير 1
تأثير زيادة سطوع الصورة
img {transition: all .5s;}
 img:hover { -webkit-filter: brightness(120%); }
التأثير 2
تحويل الصورة من لونها الطبيعي لرمادي
img:hover {
 filter: url("data:image/svg+xml;utf8,#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }
 img {
 filter: none;
 -webkit-filter: grayscale(0%);
 transition: all .5s;
 }
التأثير 3
تأثير تكبير الصورة
img {transition: all .5s;}
 img:hover { -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s; }
التأثير 4
جعل اركان الصورة ملتوية
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 }
 img:hover {
 border-radius: 20px;
 }
التأثير 5
تأثير ظهور اطار حول الصورة
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 margin: 20px;
 }
 img:hover {
 background: #EF4836;
 padding: 20px;
 margin: 0;
 }
التأثير 6
تأثير تحريك الصورة للأعلى
img {
 -webkit-transition: margin 0.5s ease-out;
 -moz-transition: margin 0.5s ease-out;
 -o-transition: margin 0.5s ease-out;
 transition: .5s ease-out;
 }
 img:hover {
 margin: -8px 0 8px 0;
 }
التأثير 7
تأثير الضباب Blur
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
img :hover {
 -webkit-filter: blur(3px);}
التأثير 8
تأثير تدوير الصورة
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 transform: translateZ(25px) rotate(3deg);}
التأثير 9
تحويل الصورة للون البني الساطع
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 -webkit-filter: sepia(1);}
التأثير 10
تأثير تصغير حجم الصورة
img :hover {
 height: 300px;
 width: 300px;
 margin: 50px;
 }
 img {
 height: 400px;
 width: 400px;
 margin: 0;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
تأثيرات الهوفر عديدة ومختلفة منها التأثيرات التي تطبق على الصور بإضافة إقرأ المزيد أو أزرار المشاركة عند مرور الموس على الصورة تظهر كالمثال في هذا الرابط وهناك تأثيرات تغيير حجم الصورة تدويرها تغيير لونها والمزيد وهذا ما سأقدمه لكم في هذه التدوينة عشرة من أفضل التأثيرات اخترتها لكم معضم التأثيرات تجدونها بعدة قوالب ويمكن أن تكون بقالبكم وبعضها مطبق على قالب بداية نقطة،تظنون أنها صعبة التركيب ! بالطبع لا فهي أسهل من أسهل إن صح التعبير لذا استمتعو وإختارو مايلائمكم
شرح طريقة التركيب
1. توجه لقالب >> تحرير
2. ابحث بإستعمال CTRL+F عن ]]></b:skin> ثم ضع التأثير المختار فوقه
* ملاحظة التأثير يطبق على جميع صور المدونة بإمكانك تطبيقه على عنصر معين بتغيير img بمعرف العنصر المختار
التأثير 1
تأثير زيادة سطوع الصورة
img {transition: all .5s;}
 img:hover { -webkit-filter: brightness(120%); }
التأثير 2
تحويل الصورة من لونها الطبيعي لرمادي
img:hover {
 filter: url("data:image/svg+xml;utf8,#grayscale");
 filter: gray;
 -webkit-filter: grayscale(100%);
 }
 img {
 filter: none;
 -webkit-filter: grayscale(0%);
 transition: all .5s;
 }
التأثير 3
تأثير تكبير الصورة
img {transition: all .5s;}
 img:hover { -webkit-transform: scale(1.1);
 -ms-transform: scale(1.1);
 transform: scale(1.1);
 -webkit-transition: 0.4s;
 -moz-transition: 0.4s;
 -o-transition: 0.4s;
 -ms-transition: 0.4s;
 transition: 0.4s; }
التأثير 4
جعل اركان الصورة ملتوية
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 }
 img:hover {
 border-radius: 20px;
 }
التأثير 5
تأثير ظهور اطار حول الصورة
img {
 -webkit-transition: 0.5s ease-out;
 -moz-transition: 0.5s ease-out;
 -o-transition: 0.5s ease-out;
 transition: all .5s ease-out;
 margin: 20px;
 }
 img:hover {
 background: #EF4836;
 padding: 20px;
 margin: 0;
 }
التأثير 6
تأثير تحريك الصورة للأعلى
img {
 -webkit-transition: margin 0.5s ease-out;
 -moz-transition: margin 0.5s ease-out;
 -o-transition: margin 0.5s ease-out;
 transition: .5s ease-out;
 }
 img:hover {
 margin: -8px 0 8px 0;
 }
التأثير 7
تأثير الضباب Blur
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
img :hover {
 -webkit-filter: blur(3px);}
التأثير 8
تأثير تدوير الصورة
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 transform: translateZ(25px) rotate(3deg);}
التأثير 9
تحويل الصورة للون البني الساطع
img {
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
 img :hover {
 -webkit-filter: sepia(1);}
التأثير 10
تأثير تصغير حجم الصورة
img :hover {
 height: 300px;
 width: 300px;
 margin: 50px;
 }
 img {
 height: 400px;
 width: 400px;
 margin: 0;
 -webkit-transition: all .5s;
 -moz-transition: all .5s;
 -o-transition: all .5s;
 -ms-transition: all .5s;
 transition: all .5s;
 }
36 Blogger تعليقات
Disqus
36 التعليقات
المشرف
avatar

تأيثرات رائعة
شكراً لك

المشرف
avatar

على واجب اخي

المشرف
avatar

تأثيرات رائعة طالما بحث عنها بالخصوص طريقة التركيب شكرا |o|

المشرف
avatar

العفو من دواعي سروري :)

المشرف
avatar

أهلاً أخي الغالي، بارككَ الله على التدوينات و الإفادات
التي تقدمها لنا كل يوم، وشكراً جزيلاً لكَ، ولكني.. لا أجيد
اللغات كما تعلم، و لهذا كنتُ أتساءل عما إن كنتَ فاضي و إن
كنتَ تستطيع تركيب تأثير جوانب الصورة الدائرية على مدونتي
و إن قبلتَ بذلك فسأكون شاكراً لكَ، على أيةِ حال، يمكننا التواصل معاً
عبر الفيس من هنا: Facebook.Com/OkanimeLeo15

المشرف
avatar

مرحبا سيسعدني مساعدتك في تركيبها .. سأضيفك

المشرف
avatar

سبق لي معرفة هذا سابقا من الموقع الاجنبي اللي حاطها في رابط المثال
لكن طريقة شرحك وطرحك للموضوع تحفة واصل
فنحن نحتاجك

المشرف
avatar

شكرا اخي ولمرورك الطيب .

المشرف
avatar

أخي أريد طلب واحد أريد اللوجو الخاص بك بالون الأزرق :)
الله ينورك

المشرف
avatar

مستحيل !! شعار خاص بالمدونة

المشرف
avatar

أخي حسام ممكن كيفية إضافة إعلانين تحت التدوينات ولك جزيل الشكر

المشرف
avatar

نعم ستكون تدوينة خاصة بإضافة الإعلانات في الأيام القادمة

المشرف
avatar

واصلوا رحلتكم المفيدة و الرائعة :-d
حقا هدا افضل موقع ازوره :-bd
افضل التدوينات و اكثرها افادة و اختصار |o|
شكرا لكم و واصلوا
:lv

أزال المؤلف هذا التعليق. - حذف
المشرف
avatar

أخي حسام وأيضا ممكن طريقة إضافة ذاك السلايدر شو الذي في الاعلى على شكل مربعات

المشرف
avatar

بارك الله فيك ولتشجيعك الجميل :lv

المشرف
avatar

اخي التأثير الذي في القالب Lycoris يصعب تركيبه لن يتم طرحه

المشرف
avatar

أخي أنا أريد موقع لرموز الويب التي تستخدمها في الازرار

المشرف
avatar

الموقع الخاص بالأيقونات هو FontAwsome ستجد ماتبحث عنه في الرابط التالي
http://www.ar1web.com/2014/09/blog-post_9.html

المشرف
avatar

هل هنالك خدمة لتصميم قوالب ؟

المشرف
avatar

لا اخي لا يوجد . اعمل حر ..

المشرف
avatar

اخي اخطأت انا اقصد هل هنالك خدمة لتصميم شعارات او لا ؟

المشرف
avatar

سيتم العمل على توفير خدمة تصميم الشعارات مجانا في المستقبل القريب حاليا الوقت لا يعمل لصالحي
اما اذا اردت شعار مدفوع فتوجد خدمات بخمسات او اتصل بنا وسنلبي المطلوب

المشرف
avatar

اريد جعل اللوجو بالون الرمادي عند مروير اللإارة عليه هل لي بالطريقة في قالب Lycoris ارجو عدم ارجاعي خائب انا اتابع مدونتك كل يوم وارى فيها الاشياء التي لا توجد في المدونات الاخر فهي مختلفة جدا

المشرف
avatar

اترك رابط المدونة التي بها القالب لمساعدتك

المشرف
avatar

اخي كيف وضعت الايكات ومعلومات الموضوع في جانب الموضوع هلا تنزل الطريقة لو سمحت

المشرف
avatar

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

المشرف
avatar

أريد تطبيق التأثير السابع على الصورة داخل المواضيع فقط ماذا أفعل

المشرف
avatar

أضف الكود التالي فوق ]]></b:skin>

.post-body img:hover { height: 300px; width: 300px; margin: 50px; } .post-body img { height: 400px; width: 400px; margin: 0; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; -ms-transition: all .5s; transition: all .5s; }

المشرف
avatar

لا أريد تأثير التصغير أدخل على المعينة للتأثير 7

المشرف
avatar

أنسخ تأثير الكود 7 وضعه بالقالب ثم غير img المتواجدة مرتين بهذا: .post-body img

المشرف
avatar

أريد إضافة تأتير 3 في الصفحة الرئيسية
http://teqnet02.blogspot.com/

المشرف
avatar

أضف هذا الكود:
a img {transition: all .5s;} img a:hover { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.4s; -moz-transition: 0.4s; -o-transition: 0.4s; -ms-transition: 0.4s; transition: 0.4s; }

المشرف
avatar

لم تنجح معي أخي

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة