طريقة عمل تاثيرات رائعه علي الصور في مدونة بلوجر بتقنية ال css3

السلام عليكم ورحمة الله وبركاته . كثير منكم قد لاحظ التاثيرات الموجوده علي الصور في مدونتي .. احببت ان اشارككم تلك الخاصيه التي اراها جميله وقد يحتاج البعض لتطبيقها في مدونته خصوصا انها مجرد خصائص css يتم اضافتها للقالب ولا تؤثر سلبا علي سرعه المدونه اطلاقا . والجميل في الاضافه تلك انها تعمل علي جميع المتصفحات بما فيهم العقيم انترنت اكسبلور 6 . كذلك يمكن تطويعها بما يتناسب مع مدونتك والوانها .. لرؤية مثال حي عليها قم بالمرور بمؤشر الفاره علي اي صوره في مدونتي سواء داخل الموضوع او في الصفحه الرئيسيه ..  لاحظ الفرق .. قمت بتعديل بسيط في الاضافه وهو وضع امكانية التحكم في استدارة الصور في المدونة وساوضح كيفية ذلك بعد قليل .. والان ناتي لطريقة التركيب . سجل دخول الي لوحة التحكم ثم اذهب الي تصميم الصفحه ومن ثم تحرير HTML .
ثم قم بالبحث عن img {   ظلل ماهو موجود تحته كما في الصوره 
ثم ضع مكانه الكود الموجود بالاسفل
-webkit-transition-duration:.4s;border-radius:13px;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:13px;
border: 1px #3B5998;
-webkit-box-shadow: 0px 0px 20px #3B5998;
-moz-box-shadow: 0px 0px 20px #3B5998;
}
للتعديل علي الكود بما يناسب مدونتك قم بتغيير #3B5998 الي اي درجه لونية تراها مناسبه ستجدها مكرره 3 مرات قم بتغييرهم جميعا ويمكنك الاستعانه بجدول اكواد الالوان الموجود في مدونتي ستجد فيه جميع الدرجات اللونيه من هنا.. للتحكم في استدارة الصور غير الرقم 13 داخل الكود. تراه موجود مرتين قم بتغييرهم كل علي حدا باي رقم ترغب فيه 
ملحوظه: كلما زاد الرقم تزيد الاستداره والعكس صحيح ...
وهناك تاثير مختلف يتم علي الصور اراه جميلا ايضا ومثال عليه تلك المدونه من هنا لاحظ عند مرور الفاره علي الصور . الصوره في وضعها الطبيعي تكون ذات الوان خافته وحين المرور عليها تتضح بلونها الطبيعي ولتطبيق ذلك . لا تقم بعمل الخطوات السابقه بل قم بالبحث عن ]]></b:skin> وضع بعدها مباشرة الكود التالي
<style type='text/css'>
 img {
filter:alpha(opacity=200);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 1.5;}

img:hover {
filter:alpha(opacity=100);
-moz-opacity: 2.0;
opacity: 1.0;
-khtml-opacity: 2.0; }


</style>
هذا هو كل شئ  بالتوفيق للجميع واي استفسار يرجا ترك تعليق بالاسفل .
أصدقاء(تطوير ويب)
تعليقات Facebook
18تعليقات Blogger

18 عدد التعليقات على موضوع طريقة عمل تاثيرات رائعه علي الصور في مدونة بلوجر بتقنية ال css3

tqarob weblog يقول...

اخى العزيز قم بالذهاب لصفحة الدعم الفني واملا النموذج وارفع قالبك واخبرتي عن الاضافات التى ترغب في تركيبها

Ahmed Jabeur يقول...

أخي الكريم كيف يمكنني أن أضع كل صور المدونة ذات حواف دائرية مثل مدونتك

tqarob weblog يقول...

@Ahmed Jabeur
مرحبا بك اخى.. قم بتطبيق الدرس الذي نحن فيه الان تحصل على ماتشاء

Ahmed Jabeur يقول...

أخي لقد قمت بتطبيق الدرس و عندما أمرر الفأرة على صورة في المدونة تصبح الصورة ذات حواف دائرية و يأتي خلفها ظل بينما أنا أربد أن تصبح حواف كل صور المدونة دائرية و عند مرور الماوس عليها يأتي الظل كما في مدونتك بالضبط
مع تحياتي

tqarob weblog يقول...

@Ahmed Jabeur
مرحبا بك اخي احمد فهمت قصدك اذن ابحث عن img
وضع بعدها الكود التالي
{-webkit-transition-duration:.4s;border-radius:10px;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:10px;
border: 1px #3B5998;
-webkit-box-shadow: 0px 0px 20px #3B5998;
-moz-box-shadow: 0px 0px 20px #3B5998;
}
ودعك من الطريقه الموجوده في التدوينه مادام تريد الحواف دائريه طوال الوقت. فالكود هذا هو ما استخدمه حاليا . تقبل مودتي.

Mecroplus يقول...

شكرا لك اخي على هذه الاضافة الجميلة فعلا انها لا تؤتر على التصفح

المشاغب ابوزياد يقول...

شكرا اخي هل من طريقه لجعل التأثيرات علي الصور التي في نص التدوينات فقط

tqarob weblog يقول...

يالطبع يوجد اخى ولكنها تستلزم التعديل على الصوره نفسها اثناء كتابة الموضوع عن طريق الانتقال الى وضع تحرير HTML ومعروف انها طريقه مرهقه وان تم عملها مره فلن يتم عملها كل مره .

tqarob weblog يقول...

وجوزيت بالمثل اخى العزيز او زياد شكرا لمتابعتك بالتوفيق لك

حاجي علي يقول...

مرحبا أخي ، بارك الله فيك وجزاك الجنة ^_^

الصور لا تدور :-) عدلت على الكود وأصبح الدوران يعمل، الكود كالتالي:


a img {
-webkit-transition-duration:.4s;border-radius:10px;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:10px;
border: 1px #3B5998;
-webkit-box-shadow: 0px 0px 20px #3B5998;
-moz-box-shadow: 0px 0px 20px #3B5998;

-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}

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

والسلام عليكم ورحمة الله وبركاته

حاجي علي يقول...

ملاحظة بسيطة:
أخي عبد الله نسي إضافة هذا الكود للحصول على الإستدارة للصور
والله أعلم ، تقبل تحياتي أخي عبد الله ، وجزاك الله الجنة على مجهوداتك الطيبة.


أضف هذا الكود في آخر السكربت قبل غلق القوس وستصبح الصور قابلة للدوران:
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);

السكربت يصبح كالتالي:

-webkit-transition-duration:.4s;border-radius:13px;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:13px;
border: 1px #3B5998;
-webkit-box-shadow: 0px 0px 20px #3B5998;
-moz-box-shadow: 0px 0px 20px #3B5998;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
}

مع تحياتي

mona miream يقول...

السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz .

mona miream يقول...

السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz .

mona miream يقول...

السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz . على 7faride@gmail.com

إرسال تعليق

التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .