المرجو الانتظار قليلا سوف يتم التوجيه الى المدونة الجديدة وشكرا المرجو الانتظار قليلا سوف يتم التوجيه الى المدونة الجديدة وشكرا

اضافة تأثير CSS الى المشاركات الشائعة

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


اليوم درسنا اضافة تأثير Css على صور المشاركات الشائعة.. الدرس خفيف وسريعة واحترافي كما هو واضح في الصورة السابقة ولاضافة هذه الخاصية قم باضافة المشاركات الشائعة عن طريق الذهاب الى >> تخطيط >> اضافة ادة ومن ثم اختر المشاركات الشائعة وعلم على صورة مصغرة ومقتطف صغير من الموضوع بعد اضافة المشاركات الشائعة اذهب الى قالب وخذ نسخة احتياطية للقالب ثم اذهب الى تحرير HTML وابحث عن ]]>  وضع هذه الكود قبلها مباشرة 



#PopularPosts1 { max-width: 300px} #PopularPosts1 dd { float: left; border-bottom: none; margin: 8px 8px 0 8px; background: none; display: block; padding: 0} #PopularPosts1 img { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s ease; padding: 4px; background: #eee; background: -webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);} #PopularPosts1 img:hover { -moz-transform: scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2) rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg); -ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2) rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}

0 التعليقات :

جميع الردود تعبّر عن رأي كاتبيها فقط. حريّة النقد والرد متاحة لجميع الزوار بشرط أن لا يكون الرد خارج نطاق الموضوع وأن يكون خال من الكلمات البذيئة. تذكّر قول الله عز وجل (مَا يَلْفِظُ مِن قَوْلٍ إِلاَّ لَدَيْهِ رَقِيبٌ عَتِيد).