كود css جعل الصور الشخصية بشكل دائري ببيانات العضو
2 مشترك
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
كود css جعل الصور الشخصية بشكل دائري ببيانات العضو
كود css جعل الصور الشخصية بشكل دائري ببيانات العضو
السلام عليكم ورحمة الله وبركاته
اقدم لكم كود css جعل الصور الشخصية بشكل دائري بالمواضيع والمساهمات
الكود حصري هنا مع اضافة تاثيرات تغيير لون الاطار حول الصورة من الازرق للبرتقالي
صورة للتوضيح
https://i.servimg.com/u/f21/16/46/77/76/1437-010.gif
الكود
دمتم بخير
السلام عليكم ورحمة الله وبركاته
اقدم لكم كود css جعل الصور الشخصية بشكل دائري بالمواضيع والمساهمات
الكود حصري هنا مع اضافة تاثيرات تغيير لون الاطار حول الصورة من الازرق للبرتقالي
صورة للتوضيح
https://i.servimg.com/u/f21/16/46/77/76/1437-010.gif
الكود
- الكود:
.poster-profile.postdetails img{
background:#fff;
border:2px solid;
font-weight:lighter;
padding:5px;
border-radius:100px;
box-shadow:0 0px 4px rgba(0,0,0,.3),0 -1px 1px rgba(0,0,0,.3);
display:inline-block;
height:100px;
overflow:hidden;
margin:10px 0;
width:100px;
text-align:center
}
دمتم بخير
كود CSS الصورة الشخصية دائرية و بشكل مثلثة
السلام عليكم ورحمة الله وبركاته
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
كود CSS --- الصورة الشخصية للعضو بالمساهمات -- دائرية ومثلثة -- تتغير تلقائيا ---
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
صورة للكود بعد التركيب
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
هذا الكود تستطيع من خلاله تغيير شكل الصورة الشخصية لـــــــ الأعضاء في المساهمات إلى صورة دائرية ومثلثة تتعدل تلقائيا كل 3 ثواني
_____________________________________________________
طريقة تركيب الكود
لوحة الإدارة >>> مظهر المنتدى >>> الصور والألوان >>> ألوان & ورقة ال CSS
>>> ورقة تصميم CSS >>> ضع الكود >>> قدم
_____________________________________________________
- phpBB2:
- الكود:
@keyframes shapeChange {
0% {
clip-path: circle(50%);
}
50% {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: circle(50%);
}
}
.poster-profile.postdetails img {
background: #fff;
border: 2px solid;
font-weight: lighter;
padding: 5px;
animation: shapeChange 3s infinite;
box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
display: inline-block;
height: 100px;
overflow: hidden;
margin: 10px 0;
width: 100px;
text-align: center;
}
- AwesomeBB:
- الكود:
@keyframes shapeChange {
0% {
clip-path: circle(50%);
}
50% {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: circle(50%);
}
}
.avatar-big img, .avatar-default img, #header-user img, .avatar-mini img, .cb-avatar img, .mod-login-avatar img {
background: #fff;
border: 2px solid;
font-weight: lighter;
padding: 5px;
animation: shapeChange 3s infinite;
box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
display: inline-block;
height: 100px;
overflow: hidden;
margin: 10px 0;
width: 100px;
text-align: center;
}
- ModernBB:
- الكود:
@keyframes shapeChange {
0% {
clip-path: circle(50%);
}
50% {
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: circle(50%);
}
}
.postprofile-avatar img {
background: #fff;
border: 2px solid;
font-weight: lighter;
padding: 5px;
animation: shapeChange 3s infinite;
box-shadow: 0 0px 4px rgba(0, 0, 0, .3), 0 -1px 1px rgba(0, 0, 0, .3);
display: inline-block;
height: 100px;
overflow: hidden;
margin: 10px 0;
width: 100px;
text-align: center;
}
-------------
يمكن تعديل الثواني بين الشكل الدائري والمثلث بتغيير الرقم 3 من الكود التالى
- الكود:
animation: shapeChange 3s infinite;
_____________________________________________________
--------------------------------------------------------------------------
تم كتابة الكود من قبل ---- صياد اليمام ----
__________________________________________
لأي إستفسار يمكن طرحه في قسم دعم مشاكل التومبلايت و الأكواد
ابوعلي البلقاوي و كونان2000 يعجبهم هذا الموضوع
مواضيع مماثلة
» مشكلة بكود جعل الصور الشخصية بشكل دائري ببيانات العضو
» كيف ممكن اضع ساعة فلاشية ببيانات العضو الشخصية
» اريد ان اجعل الاوسمة ببيانات العضو تتحرك بشكل عامودي او افقي متسلسل
» إقتراح وضع اسم العضو+الرتبة+المعلومات الشخصية عند المساهمات في الوسط بشكل جميل
» مشكل:الصور الشخصية لا تظهر في مساهمات العضو
» كيف ممكن اضع ساعة فلاشية ببيانات العضو الشخصية
» اريد ان اجعل الاوسمة ببيانات العضو تتحرك بشكل عامودي او افقي متسلسل
» إقتراح وضع اسم العضو+الرتبة+المعلومات الشخصية عند المساهمات في الوسط بشكل جميل
» مشكل:الصور الشخصية لا تظهر في مساهمات العضو
منتدى الدعم و المساعدة لأحلى المنتديات :: أحلى منتدى :: :: التقنيات المتقدمة :: الأكواد الإنسيابية CSS
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى