عمل تاثيرات رائعه علي الصور في مدونة

طريقة عمل تاثيرات رائعه علي الصور في مدونة بلوجر بتقنية ال 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>

هذا هو كل شئ بالتوفيق للجميع واي استفسار يرجا ترك تعليق بالاسفل .

ومبروك عليك الاضافة الرائعة