انشاء منتدى مجاني(CSS)كود قلب الصورة الشخصية عن مرور الماوس عليها***Mohamed Nsr
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
(CSS)كود تدوير الصور الشخصة اكثر من مره عند مرور الماوس عليها***Mohamed Nsr
من طرف Mohamed الجمعة 13 يونيو 2014 - 18:55
بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي
اليوم اقدم لكم كود تدوير الصورة الشخصيه اكثر من مره عند مرور الماوس عليها
ملحوظه :الكود يعمل فقط على النسخة الثالثه Phpbb3
صورة للكود
الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال Css >>ضع الكود>>سجل
منقول للافادة
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة
تحياتي
السلام عليكم اخواني واخواتي
اليوم اقدم لكم كود تدوير الصورة الشخصيه اكثر من مره عند مرور الماوس عليها
ملحوظه :الكود يعمل فقط على النسخة الثالثه Phpbb3
صورة للكود
الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الوان>>ورقة تصميم ال Css >>ضع الكود>>سجل
- الكود:
.postprofile dt img:hover{
-webkit-transform: rotate(1800deg) scale(1);
-moz-transform: rotate(1800deg) scale(1);
-o-transform: rotate(1800deg) scale(1);
}
.postprofile dt img{
-webkit-transition: all 5s ease-in-out;
-moz-transition: all 5s ease-in-out;
-o-transition: all 5s ease-in-out;
}
منقول للافادة
وبهذا نكون انتهينا من شرح الكود التالي
بالتوفيق ليكم
MoHaMeD NsR
فريق المساعدة
تحياتي
أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة--------------------------------------------------
تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد! لا يتم المساعدة على الخاص! 
Mohamed- احلى إدارة
-
عدد المساهمات : 11357
معدل النشاط : 16011
السُمعة : 454
(CSS)كود قلب الصورة الشخصية عن مرور الماوس عليها***Mohamed Nsr
من طرف Mohamed السبت 14 يونيو 2014 - 17:56
بسم الله الرحمن الرحيم
السلام عليكم اخواني واخواتي
اليوم اتيت اليكم بكود يقوم بقلب الصوره الشخصيه عند مرور الماوس عليها
صوره للكود:
قبل مرور الماوس عليها
وبعد مرور الماوس عليها
الكود للنسخة الثالثة Phpbb3:
الكود للسخة الثانيةPhpbb2:
الكود للنسخة PunBB:
اليوم اتيت اليكم بكود يقوم بقلب الصوره الشخصيه عند مرور الماوس عليها
صوره للكود:
قبل مرور الماوس عليها
وبعد مرور الماوس عليها
الكود للنسخة الثالثة Phpbb3:
- الكود:
.postprofile dt a img{
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.postprofile dt a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
الكود للسخة الثانيةPhpbb2:
- الكود:
.poster-profile img{
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.poster-profile img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
الكود للنسخة PunBB:
- الكود:
.user-basic-info a img {
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.user-basic-info a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
الكود للنسخة Invision:
- الكود:
.postprofile-details dt a img {
width:130px;
height:130px;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
.postprofile-details dt a img:hover{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
الكود يوضع في
لوحة الاداره>>مظهر المنتدى>>الصور والالوان>>الالوان>>روقة تصميم ال css >>ضع الكود>>سجل
أدوات الصيانة لأحلى المنتديات / طريقة طلب كلمة سر/ قائمة بكل مواضيع الاســئلة الشائعة--------------------------------------------------
تنبيه: لا تضع أبداً ايميل الإنشاء في مساهماتك و لا تعطيه لأحد! لا يتم المساعدة على الخاص!
Mohamed- احلى إدارة
-
عدد المساهمات : 11357
معدل النشاط : 16011
السُمعة : 454
مواضيع مماثلة» كود جعل وميض ع الصورة عند مرور الماوس عليها
» كود عمل زوم علي الصور في المساهمات عند مرور الماوس عليها
» عاوز كود لتكبير الصورة عند مرور الماوس عليها
» كود وضع ايطار للصورة الشخصية عند مرور الماوس عليها
» طلب كود يخص إضاءة الصور عند مرور الماوس عليها
» كود عمل زوم علي الصور في المساهمات عند مرور الماوس عليها
» عاوز كود لتكبير الصورة عند مرور الماوس عليها
» كود وضع ايطار للصورة الشخصية عند مرور الماوس عليها
» طلب كود يخص إضاءة الصور عند مرور الماوس عليها
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى