 الجمعة 02 مايو 2014, 18:36 | المشاركة رقم: |
 إحصائيةالعضو | | عدد المساهمات : 5451 | | تاريخ التسجيل : 27/08/2013 | | نقاط : 19073 | | السٌّمعَة : 16 | | العمر : 39 | | المزاج : . |
|
|  موضوع: جعل الصوره الرمزيه دائريه وتصغيرها بدون التاثير على الحجم جعل الصوره الرمزيه دائريه وتصغيرها بدون التاثير على الحجم
الحَمْد للّٰه رَبّ العالَمَيْنِ وَالصَلاَة وَالسَلام عَلَى أُشرِف خُلْق اللّٰه المُرْسَلِيْنَ وَعَلِيّ ال بَيْتهُ الطاهِرَيْنِ وَأَصْحابهُ أَجْمَعَيْنِ إِلَى يَوْم أَلَدَّيْنِ صَلاَة لا حَصْر لَها ڤِي كُلّ لَحْظَة وَلِمَحَّة وَنَفَّسا عَدَد ما وَسَّعَهُ عِلْمكِ وَخْطهُ قَلَّمَكِ وَأَحْصاهُ كُتّابكِ وَعَدَد ما كَآن وَعَدَد ما يَكُون وَعَدَد الخَطَرات وَالحَرَكات وَالسُكُون كَمّاً لا نِهايَةً لِكَمالكِ وَعَدَد كَمالهُ ي أُرَحِّم الراحمين أَمِين اللَهِم أُحْفِظ المُسْلِمِيْنَ وَالمُسْلِمات مَن أَلَّفتُنَّ ما ظَهَّرَ مِنها وَما بِطُنّ اللَهِم حَبَّبَ الإِسْلام ڤِي قَلُوب الغافِلِيْنَ وَالكافِرِيْنَ وَالمُلْحِدِيْنَ وَالشَياطِين######
كيفكم حبايبي ي رب تكونو بخير (ادارين - ومشرفين - ومساعدين - واعضاء وزوار+عناكب جوجل )
بعد غياب طال طال <~ رجعنا لكم بشرح حصري وطريقه حصريه للديف بوينت
وهي تتلخص في:~
جعل الصوره الرمزيه بشكل دائري
بدون التغير في حجمها وجعلها بشكل انيق ومميز
ملاحظه( الطريقه ليست فقط للصوره الرمزيه تقدر تستخدمها في اي مكان )
الحين ننتقل للشرح<~ ويا رب اتوفق ويكون عند حسن ظنكم
اولا نستعرض مثال للدرس
اولا صوره قبل وضع الكود
~~
بعد وضع الكود وتطبيقه تظهر بهذا الشكل <~ حلوه صح
وعند مرور الماوس على الصوره تظهر بهذا الشكل
(لا يوجد اختلاف كثير فقط الاختلاف في لون الاطار)
ملاحظه عند الضغط كلك يمين على الصوره وفتح الصوره بـ اسم
تفتح الصوره الاساسيه ولا يتغير حجمها
الحين نجي للشرح<~ ترا بسيط وسهل بس انا مسوي زحمه وكذا 
1- ندخل لوحة التحكم
2- البحث في القوالب
3- من المستطيل اللي فوق نختار الاستايل المراد التعديل فيه
4- نضع في مربع البحث اسم القالب اللي هو"postbit_legacy"
ونضغط زر "بحث"
5- يظهر لنا قالب الـ"postbit_legacy"
6- نضغط عليه مرتين للتعديل عليه"
7- بعد فتح القالب نضغط في الكيبورد [b]"Ctrl+F[/b]"
ونكتب في مستطيل البحث "avatar"  8-بيظهر بهذا الشكل
9- نقوم بتحديد الكود اللي معلم عليه بالازرق ابتداء من
"<div class="smallfont">" ونستمر بالتحديد حتى كلمة
"</dev>" كما في الصوره ادناه
 10- نقوم بحذف الكود اللي حددناه من شوي
11- نستبدله بهذا الكود
كود C# ? 1
2
3 | - الكود:
-
<div - الكود:
-
class - الكود:
-
= - الكود:
-
"smallfont" - الكود:
-
> - الكود:
-
- الكود:
-
<a - الكود:
-
class - الكود:
-
= - الكود:
-
"circle"
- الكود:
-
href= - الكود:
-
"member.php?$session[sessionurl]u=$post[userid]" - الكود:
-
> <img height= - الكود:
-
"200"
- الكود:
-
width= - الكود:
-
"200"
- الكود:
-
src= - الكود:
-
"$post[avatarurl]"
- الكود:
-
$post[avwidth] $post[avheight] alt= - الكود:
-
"<phrase 1=" - الكود:
-
$post[username] - الكود:
-
">$vbphrase[xs_avatar]</phrase>"
- الكود:
-
border= - الكود:
-
"0"
- الكود:
-
/></a> - الكود:
-
- الكود:
-
</div> |
ملاحظه :لتغير الحجم نغيره من هذا الكود
كود C++ ? 1
2 | - الكود:
-
height= - الكود:
-
"200" - الكود:
-
width= - الكود:
-
"200" |
12- نحط الكود السابق مكان اللي حذفناه ونضغط #حفظ[b]#
ليصبح بالشكل في الصوره ادناه[/b]  13- الحين نتوجه الى تركيب اكواد "css"لوحة التحكم
14- الاستايلاات والقوالب
15- التحكم بالاستايلات
16- نختار الاستايل المراد التعديل عليه وبجانبه يوجد قائمه منسدله
(خيارات جميع الاستايلات)
17- بعد ضغط على قائمة (خيارات جميع الاستايلات)
نختار من القائمه "css رئيسي"
18- ننزل الى اخر الصفحه
(تعاريف CSS الإضافية/Additional CSS Definitions)
في اخر مستطيل نضع هذا الكود
كود C# ? 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55 | - الكود:
-
/* خاص للديف بوينت deel711 */
- الكود:
-
body .circle { - الكود:
-
- الكود:
-
background: #003322; - الكود:
-
/* لون خلفية الصوره(اذا كانت خلفيتها شفافه فقط)*/ - الكود:
-
- الكود:
-
font: 100 14px sans-serif; - الكود:
-
- الكود:
-
color: #000; - الكود:
-
- الكود:
-
text-shadow: 0 1px 1px rgba(255,255,255,0.1); - الكود:
-
- الكود:
-
text-align: center; - الكود:
-
} - الكود:
-
::-moz-selection { - الكود:
-
- الكود:
-
background: rgba(0,0,0,0.1); - الكود:
-
} - الكود:
-
::selection { - الكود:
-
- الكود:
-
background: rgba(0,0,0,0.1); - الكود:
-
} - الكود:
-
.circle h1 { - الكود:
-
- الكود:
-
font-weight: 100; - الكود:
-
- الكود:
-
font-size: 2.7em; - الكود:
-
} - الكود:
-
.circle h3 { - الكود:
-
- الكود:
-
color: #111222; - الكود:
-
- الكود:
-
font-size: 1.6em; - الكود:
-
} - الكود:
-
.circle a { - الكود:
-
- الكود:
-
color: RoyalBlue; - الكود:
-
- الكود:
-
font-weight: normal; - الكود:
-
- الكود:
-
text-decoration: none; - الكود:
-
} - الكود:
-
.circle a:hover { - الكود:
-
- الكود:
-
color: CornflowerBlue; - الكود:
-
}
- الكود:
-
/* خصائص الدائره */
- الكود:
-
.circle { - الكود:
-
- الكود:
-
line-height: 0; - الكود:
-
- الكود:
-
display: inline-block; - الكود:
-
/* تناسق الدائره مع الصوره */ - الكود:
-
- الكود:
-
margin: 5px; - الكود:
-
- الكود:
-
border: 2px solid rgba(255,255,255,0.4); - الكود:
-
/* حجم ولون ونوع الحدود الخارجيه للصوره*/ - الكود:
-
- الكود:
-
border-radius: 50%; - الكود:
-
/*الانحنا للحدود بالنسبه المئويه */ - الكود:
-
- الكود:
-
/*box-shadow: 0px 0px 5px rgba(0,0,0,0.4);*/
- الكود:
-
/* اذا اردت عمل ظل للدائرهل شيلةعلامة /8 من امام وخلف الكود المقابل*/ - الكود:
-
- الكود:
-
transition: linear 0.25s; - الكود:
-
- الكود:
-
height: 200px; - الكود:
-
- الكود:
-
width: 200px; - الكود:
-
} - الكود:
-
.circle img { - الكود:
-
- الكود:
-
border-radius: 50%; - الكود:
-
/* حجم الصوره بالنسبه المئويه */ - الكود:
-
} - الكود:
-
.circle:hover { - الكود:
-
- الكود:
-
transition: ease- - الكود:
-
out
- الكود:
-
0.2s; - الكود:
-
- الكود:
-
border: 2px solid rgba(215, 40, 40, 0.9); - الكود:
-
/*لون الحدود عند مرور الماوس */ - الكود:
-
- الكود:
-
-webkit-transition: ease- - الكود:
-
out
- الكود:
-
0.2s; - الكود:
-
} - الكود:
-
.circle a{ - الكود:
-
- الكود:
-
color: transparent; - الكود:
-
} - الكود:
-
/* خاص للديف بوينت deel711 */ |
"للتعديل على خصائص الكود قمت بشرح بجانب كل كود"
19- نقوم بنسخ الكود السابق ثم نضعه في اخر مربع
كما في الصوره ادناه ثم نضغط #حفظ#
20- الرجاء عند النقل ذكر الحقوق(لا اسمح بنقله بدون ذكر الحقوق)
(لتحميل جميع الملفات + الصور الشرح)
الصور
[#]
الاكواد
[#]
# تقبلو خالص تحياتي
|
| |  |
جعل الصوره الرمزيه دائريه وتصغيرها بدون التاثير على الحجم
الأحد 21 أبريل 2024, 19:37
