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

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

 

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

 

ساهم في نشر الموضوع ولك جزيل الشكر !

أضف تعليقك عن طريق الفيسبوك :

اضافات css, خفايا واسرار