السلام عليكم ورحمة الله وبركاته . كثير منكم قد لاحظ التاثيرات الموجوده علي الصور في مدونتي .. احببت ان اشارككم تلك الخاصيه التي اراها جميله وقد يحتاج البعض لتطبيقها في مدونته خصوصا انها مجرد خصائص css يتم اضافتها للقالب ولا تؤثر سلبا علي سرعه المدونه اطلاقا . والجميل في الاضافه تلك انها تعمل علي جميع المتصفحات بما فيهم العقيم انترنت اكسبلور 6 . كذلك يمكن تطويعها بما يتناسب مع مدونتك والوانها .. لرؤية مثال حي عليها قم بالمرور بمؤشر الفاره علي اي صوره في مدونتي سواء داخل الموضوع او في الصفحه الرئيسيه .. لاحظ الفرق .. قمت بتعديل بسيط في الاضافه وهو وضع امكانية التحكم في استدارة الصور في المدونة وساوضح كيفية ذلك بعد قليل .. والان ناتي لطريقة التركيب . سجل دخول الي لوحة التحكم ثم اذهب الي تصميم الصفحه ومن ثم تحرير HTML .
ثم ضع مكانه الكود الموجود بالاسفل
-webkit-transition-duration:.4s;border-radius:13px;}للتعديل علي الكود بما يناسب مدونتك قم بتغيير #3B5998 الي اي درجه لونية تراها مناسبه ستجدها مكرره 3 مرات قم بتغييرهم جميعا ويمكنك الاستعانه بجدول اكواد الالوان الموجود في مدونتي ستجد فيه جميع الدرجات اللونيه من هنا.. للتحكم في استدارة الصور غير الرقم 13 داخل الكود. تراه موجود مرتين قم بتغييرهم كل علي حدا باي رقم ترغب فيه
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;
}
ملحوظه: كلما زاد الرقم تزيد الاستداره والعكس صحيح ...
وهناك تاثير مختلف يتم علي الصور اراه جميلا ايضا ومثال عليه تلك المدونه من هنا لاحظ عند مرور الفاره علي الصور . الصوره في وضعها الطبيعي تكون ذات الوان خافته وحين المرور عليها تتضح بلونها الطبيعي ولتطبيق ذلك . لا تقم بعمل الخطوات السابقه بل قم بالبحث عن ]]></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>
17 عدد التعليقات على موضوع طريقة عمل تاثيرات رائعه علي الصور في مدونة بلوجر بتقنية ال css3
اخى العزيز قم بالذهاب لصفحة الدعم الفني واملا النموذج وارفع قالبك واخبرتي عن الاضافات التى ترغب في تركيبها
أخي الكريم كيف يمكنني أن أضع كل صور المدونة ذات حواف دائرية مثل مدونتك
@Ahmed Jabeur
مرحبا بك اخى.. قم بتطبيق الدرس الذي نحن فيه الان تحصل على ماتشاء
أخي لقد قمت بتطبيق الدرس و عندما أمرر الفأرة على صورة في المدونة تصبح الصورة ذات حواف دائرية و يأتي خلفها ظل بينما أنا أربد أن تصبح حواف كل صور المدونة دائرية و عند مرور الماوس عليها يأتي الظل كما في مدونتك بالضبط
مع تحياتي
@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;
}
ودعك من الطريقه الموجوده في التدوينه مادام تريد الحواف دائريه طوال الوقت. فالكود هذا هو ما استخدمه حاليا . تقبل مودتي.
شكرا لك اخي على هذه الاضافة الجميلة فعلا انها لا تؤتر على التصفح
شكرا اخي هل من طريقه لجعل التأثيرات علي الصور التي في نص التدوينات فقط
يالطبع يوجد اخى ولكنها تستلزم التعديل على الصوره نفسها اثناء كتابة الموضوع عن طريق الانتقال الى وضع تحرير HTML ومعروف انها طريقه مرهقه وان تم عملها مره فلن يتم عملها كل مره .
مرحبا أخي ، بارك الله فيك وجزاك الجنة ^_^
الصور لا تدور :-) عدلت على الكود وأصبح الدوران يعمل، الكود كالتالي:
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);
}
مع تحياتي
السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz .
السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz .
السلام أخ أحمد أنا أريد أن أقوم بالإضافة الثانية ، ولكن أريد تكون الصورأيضا ذات حواف دائرية ، ممكن ترسل لي الكود الخاص بالإضافة plz . على 7faride@gmail.com
إرسال تعليق
التعليقات متاحه لمستخدمي حساب جوجل فقط.ولاضافة كود: أستعن بهذه الأداة السريعة Encode/HTML .
