تاثيرات مختلفة على صور مدونتك

بسم الله الرحمن الرحيم اهلا و سهلا بكل زوار و متتبعي مدينة التدوين اليوم سوف نقوم بشرح اضافة تاثيرات على صور المدونة بطريقة جميلة و جديدة,لمشاهدة مثال على الاضافة قم بوضع الماوس على احدى الصور و لاحظ كيف سوف تصبح الصورة ,لكني اليوم لن اقدم هذا الكود الذي بمدونتي فقط انما سوف اقوم بشرح خمس اشكال للاضافة وهي عبارة عن كل اضافة و معكوسها -لا تقلق الشرح سيكون بالصور- اذن اذا الاضافة اعجبتك و تود اضافتها قم بتتبع الشرح التالي من لوحة تحكم المدونة اختر القالب ثم تحرير ال HTML ثم متابعة و اخيرا توسيع القالب بعد ذلك ابحث عن  هذين الكودين 

الكود الاول .post-body img {

 الكود الثاني .post-body img:hover {

و قم بتحديدهم مع كل الاكواد التي تندرج تحتهم -لاحظ المثال الثالي اذا استشكل عليك الامر-

.post-body img {

}
.post-body img:hover {

}

كما بالشرح حدد الاكواد من اول الى غاية الوسم {

ثم قم بلصق احد اكواد الاضافات التالية -على حسب اختيارك-
الاضافة الاولى :

 كود الاضافة الاولى :

.post-body img {padding:15px; /* Espacio entre la imagen y el borde */background:#FFF; /* Color de fondo que se ve entre el espacio */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {border-radius: 0% 50%; /* Borde redondeado */box-shadow: 0px 0px 15px #000; /* Sombra */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

 الاضافة الثانية :
و هي عكس الاضافة الاولى الموجودة بالمدونة اي ان الصور تصبح شديدة الانحراف من الحرفين و عند مرور الماوس تعود الصور الى طبيعتها -صورة للاضافة-

كود الاضافة :

.post-body img {border-radius: 50% 0; /* Borde redondeado */box-shadow: 0px 0px 15px #000; /* Sombra */padding:15px; /* Espacio entre la imagen y el borde */background:#FFF; /* Color de fondo que se ve entre el espacio */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {border-radius:0; /* Con esto quitamos el borde redondeado */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

 الاضافة الثالثة
و هي عبارة عم ثاثير دائري على الصور اي على الاحرف الاربعة للصورة حيث تكون الصورة عادية و عند تمرير الماوس تصبح الصورة دائرية
كود الاضافة :

.post-body img {padding:0;border:0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {border-radius: 50%; /* Borde redondeado */box-shadow: 0px 0px 15px #000; /* Sombra */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

الاضافة الرابعة
هي عكس الاضافة الثالثة اي انك بمجرد اضافة صورة لمواضيعك تصبح دائرية و عند تمرير الماوس تصبح الصور عادية -صورة الاضافة-

 كود الاضافة الرابعة :

.post-body img {border-radius: 50%; /* Borde redondeado */box-shadow: 0px 0px 15px #000; /* Sombra */padding:0;border:0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {box-shadow: 0; /* Con esto eliminamos la sombra */border-radius: 0; /* Con esto eliminamos el borde redondeado */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

 الاضافة الخامسة :
هي عبارة عن ثاثيرا بسيطة حول احرف الصور تختفي عند وضع الماوس عليها -صورة الاضافة-

كود الاضافة الخامسة :

.post-body img {border-radius: 45% / 20%; /* Borde redondeado */box-shadow: 0px 0px 15px #000; /* Sombra */padding:0;-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;}.post-body img:hover {border-radius: 0; /* Con esto eliminamos el borde redondeado */-moz-transition: all 1s;-webkit-transition: all 1s;-o-transition: all 1s;cursor:pointer;}

 بعد ان اخترت الاضافة التي تروقك قم بحفظ القالب و استمتع