أهم التأثيرات التي تضاف على الصور بتقنيتي ( CSS & jQuery )

إضافة تأثيرات على الصور بتقنيتي ( CSS & jQuery )

مثال

قم بوضع المشيرة على كل صورة وانظر الفرق

1- CSS Opacity Effect

ابداع ديزاين الصور بتقنيتي ( CSS & jQuery ) abda3design

2- CSS Border Effect

3- jQuery Fading Effect

طريقة التركيب

1- CSS Opacity Effect

إذهب لتصميم >> تحرير HTML >> قم بالبحث عن </b:skin> وأضف هذا الكود قبله

a.TO img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
a.TO:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; 
}

2- CSS Border Effect

إذهب لتصميم >> تحرير HTML >> قم بالبحث عن </b:skin> وأضف هذا الكود قبله

.TB img{
border: 2px solid #ccc;
}
.TB:hover img{
border: 2px solid navy;
}
.TB:hover{
border-color: red; 
}

3- jQuery Fading Effect

إذهب لتصميم >> تحرير HTML >> قم بالبحث عن </head> وأضف هذا الكود قبله

<script type="text/javascript">
$(document).ready(function() {
$(".TS img").fadeTo("slow", 0.6);
$(".TS img").hover(function() {
$(this).fadeTo("slow", 1.0);
}, function() {
$(this).fadeTo("slow", 0.6);
});
});</script>

مع ملاحظة أنه إن لم تكن قد ركبت مكتبة الـ jQuery من قبل أضف هذا الكود قبله

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js' type='text/javascript'/>

طريقة الاستخدام

فقط أضف على كود الصورة التقنية المراد وضعها

CSS Opacity Effect >> class="TO"

CSS Border Effect >> class="TB"

jQuery Fading Effect >> class="TS"

ليصبح

<a href="ارتباط الصورة " class="التقنية" ><img border="0" src="رابط الصورة" /></a>

مثلاً

<a href="http://abda3design.blogspot.com " class="TS" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG9DfL_jncla_PKguUOFqeRJiVzgK7X8F6SoLZ59AXV9MurJD032jDWbNvekA97_AQ3hOQuM22xWOAfSndnIHnljQbncHXZq1PooL5DNxR3R_CUsbhYm4zHYUHG7r1zHwYVcZOPyfU5_U/s1600/croppe10%255B1%255D.jpg" /></a>

ملاحظة : مالون بالأزرق في الأكواد يمكنك أن تستبدله بأي كلمة تريد .. ووضعه بدلاُ من الاختصارات التي وضعتها أنا

... نهاية الشرح ...

إقرأ المزيد
اضافة بسيطة للتبادل الاعلاني بتقنية Html لمدونات
تصميم صفحة الخطأ 404 لـ(Blogger) بشكل انيق
تفعيل BBcode لإدراج الصور والابتسامات وتنسيقات النص
دورة [xml] الدرس الثالث ما هي XML وفيما تستخدم؟
معرفة ترتيب الكلمات المفتاحية فى نتائج البحث seo
اضافة كود الترجمة من جوجل google للمواقع وللمدونات Translate

"عَنْ أَبِي هُرَيْرَةَ رَضِيَ اللَّهُ عَنْهُ أَنَّ رَسُولَ اللَّهِ صَلَّى اللَّهُ عَلَيْهِ وَسَلَّمَ قَالَ:مَنْ صَلَّى عَلَيَّ وَاحِدَةً صَلَّى اللَّهُ عَلَيْهِ عَشْرًا"

قم بتصفح جميع الموضوعات

ولأي إستفسار الرجاء ترك تعليقاتكم لأقوم بالإجابة عليها في القريب العاجل

لا تقرأ وترحل شارك معنا بتعليق فنحن نسعى لنقدم لك الافضل والاجمل