اذهب إلى المحتوى

صناعة عدة أشكال هندسية مختلفة بواسطة CSS

Samaa Ramadan

بواسطة Samaa Ramadan

 مشاركة

من أهم مميزات ‏CSS3‎‏ أنها تقلل من استخدام الصور في تصاميم الويب، وتسمح لك بإنشاء أشكال مختلفة ‏بواسطتها. فالأشكال الشائعة التي تراها عادة في ‏فوتوشوب أو ‏Illustrator‏ يمكنك عملها الآن بكل ‏سهولة مستخدمًا ‏CSS3‎‏. تقوم الخصائص الجديدة مثل ‏transform‏ و ‏border-radius‏ بإضافة تشكيلات ‏جديدة إلى الأشكال الأساسية بدلاً من رسمها وتصميمها على برامج الرسم والتصميم. ‏

css-shapes_(1).thumb.png.6eefd67ee8139e9

 

في درسنا لهذا اليوم، دعنا ننشئ قائمة بالأشكال الأكثر شيوعًا، وذلك باستخدام ‏CSS3‎‏.‏

يمكنك تحميل الملفات المصدرية لهذا الدرس من هنا.

الدائرة

circle.thumb.png.d4ebd8d130790d9212f5fb7

HTML‎

لإنشاء دائرة في الـCSS، نحتاج أولاً إلى ‏div‏ واسمٍ للشكل ‏id‏. وهنا ستأخذ الدائرة هذا الإسم:

‎<div id="circle"></div>‎

CSS‎

ضع مقاسات العرض والارتفاع ‏width‏ و ‏height‏ بالـ‏CSS‏ واجعل قيمة ‏border-radius‏ ‏نصف قيمة العرض والارتفاع:

‏#‏circle‏ } ‏ ‏
    width: 120px‏;‏ 
    height: 120px;‏
   ‏ ‏background: #7fee1d;‏ ‏ 
    -moz-border-radius: 60px‏;‏ 
    webkit-border-radius: 60px‏;‏‏ 
    border-radius: 60px‏;‏‏
}

المربع

‏square.thumb.png.f0685e09636866e6ae3c9b9

HTML‎

نحتاج إلى ‏div‏ مع وضع اسمٍ له، لإنشاء شكل مربع وربطه بالاسم:

‎<div id="square"></div>

‎CSS‎

اضبط مقاسات العرض والارتفاع بنفس القيمة، حتى يبدو واضحًا:

#‏square‏ } ‏ ‏
    width: 120px‏;‏‏ 
    height: 120px‏;‏
    background: #f447ff‏;‏‏
}

المستطيل

rectangle.thumb.png.d6c073880c1d96e63439

HTML

أنشئ ‏div‏ وضع اسمًا له، ويفضل أن يكون الاسم نفس نوع الشكل:

‎<div id="rectangle"></div>‎

‎CSS‎

نضبط العرض والارتفاع تمامًا مثل المربع؛ ولكن بزيادة قيمة العرض أكثر من الارتفاع:

‏#‏rectangle‏ } ‏ ‏
    width: 220px‏;‏
    height: 120px‏;‏
    background: #4da1f7‎‏;‏‏
}

الشكل البيضاوي

oblong.thumb.png.f663c5d8e1b2c78113f7ea8

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏oval‏:

‎<div id="oval"></div>‎

CSS‎

يشابه الشكلُ البيضاوي الدائرةَ إلى حد كبير؛ ومع ذلك، فإن الشكل البيضاوي هو مستطيل زواياه مستديرة بقيمة ‏نصف الارتفاع:

#‏oval‏ } ‏ ‏
    width: 200px‏;‏‏
    height: 100px‏;
    background: #e9337c‏;-‏
    webkit-border-radius: 100px / 50px‏;‏-‏
    moz-border-radius: 100px / 50px‏;‏
    border-radius: 100px / 50px‏;‏‏
}

المثلث

triangle.thumb.png.e519845debe5eb1c755ec

HTML

يحتاج المثلث إلى ‏div‏ باسم ‏triangle‏:‏

‎<div id="triangle"></div>‎

CSS‎

لإنشاء مثلث بواسطة الـ‏CSS‏، نقوم بالتعديل في خاصية ‏border‏. سنقوم بتعديل عرض الـ‏border‏ ‏حتى يعطينا نتائج مغايرة في قياس الزاويا:

#‏triangle‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-bottom: 140px solid #fcf921‎‏;‏‏‏
    border-left: 70px solid transparent‏;‏‏
    border-right: 70px solid transparent‏;‏‏
}

المثلث المقلوب

triangle_down.thumb.png.c6b59aa43bf8b244

HTML

قُم بإنشاء ‏div‏ وأعطه اسمًا‏:

‎<div id="triangle_down"></div>‎

CSS‎

نحتاج إلى تعديل خاصية الحدّ السفليّ، لينتُج لدينا مثلث معكوس:

#‏triangle_down‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-top: 140px solid #20a3bf‏;‏‏
    border-left: 70px solid transparent‏;‏
    border-right: 70px solid transparent‏;
}

مثلث متجه إلى اليسار

triangle_left.thumb.png.8bf6f24a2e95bae6

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل وليكن ‏triangle_left‏‏:

‎<div id="triangle_left"></div>‎

CSS

نقوم بالتعديل في خاصية الحدّ الأيمن، حتى نحصلَ على مُثلث مُتَّجه لليسار:

#‏triangle_left‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‎‏;‏
    border-right: 140px solid #6bbf20‎;‏
   ‏ ‏border-bottom: 70px solid transparent‏;‏
}

مثلث متجه لليمين

triangle_right.thumb.png.8c0b78544c8069c

HTML

لنقم بإنشاء ‏div‏ ونعطه اسم ‏triangle_right‏:

‎<div id="triangle_right"></div>

‎

CSS

بعد ذلك نقوم بالتعديل على خاصية الحدّ الأيسر، ليصبح عندنا مثلثًا متجهًا إلى اليمين:

#‏triangle_right‏ }
    ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    border-top: 70px solid transparent‏;‏
    border-left: 140px solid #ff5a00‎‏;‏
    border-bottom: 70px solid transparent‏;‏
}

الشكل المعين (الماسة)‏

diamond.thumb.png.e572aefcae5aa0fb3fd115

HTML

يحتاج المُعين إلى ‏div‏ باسم ‏diamond‏:

‎<div id="diamond"></div>‎

CSS‎

يُمكن عرض المُعيّن بعدة طرق، وذلك باستخدام خاصية ‏transform‏ مع ‏rotate‏. بهذا يصبح لديك مُثلثان ‏متقابلان ومتلاصقان ببعضهما:

#‏diamond‏ } ‏ ‏
    width: 120px‏;‏
    height: 120px‏;
    background: #1eff00‎‏;‏
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); ‏
    webkit-transform-origin: 0 100%‎‏;‏
    moz-transform-origin: 0 100%‎‏;‏ 
    -ms-transform-origin: 0 100%‎‏;‏‏ 
    -o-transform-origin: 0 100%‎‏;‏
    transform-origin: 0 100%‎‏;‏
    margin: 60px 0 10px 310px‏;‏
}

شبه المنحرف

trapezium.thumb.png.9c9f503fed7e1cf1c68e

HTML

يتطلب هذا الشكل وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏trapezium‏‏:

‎<div id="trapezium"></div>‎

CSS‎

نقوم الآن بصناعة الشكل المطلوب، حيث نجعل الحدَّ الأيمن والأيسر متساويين مع الاحتفاظ بالحدّ السفليّ مُسَطّحًا:

#‏trapezium‏ } ‏ ‏
    height: 0‎;‏
   ‏ ‏width: 120px‏;‏‏
    border-bottom: 120px solid #ec3504‎‏;‏‏
    border-left: 60px solid transparent‏;‏
    border-right: 60px solid transparent‏;‏
}

متوازي الأضلاع

parralelogram.thumb.png.f3e9f960a19919b1

HTML‎

قُم بإنشاء ‏div‏ وأعطه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS‎

ثم قم بضبط قيمة الانحراف ‏skew‏ لخاصية ‏transform‏ لحرفه بزاوية 30 درجة:

#‏parallelogram‏ } ‏ ‏
    width: 160px‏;‏
    height: 100px‏;‏
    background: #8734f7‎‏;‏ 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    -o-transform: skew(30deg); 
    transform: skew(30deg); 
}

النجمة

star.thumb.png.757953152ad97527b12da8176

HTML

‎يلزمنا ‏div‏ لإنشاء النجمة مع اسمٍ له وليكن ‏star‏‏:

‎<div id="star"></div>‎

CSS‎

يتطلب إنشاء النجمة بالـ‏CSS‏ تعديلات عجيبة في خصائص الحدود مع استعمال قيمة ‏rotate‏ لخاصية ‏‏‏transform‏، لاحظ ذلك في الكود‏:

#‏star‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    margin: 50px 0‎‏;‏
    color: #fc2e5a‏;‏
    position: relative‏;‏‏
    display: block‏;‏
    border-right: 100px solid transparent‏;‏
    border-bottom: 70px solid #fc2e5a‏;‏
    border-left: 100px solid transparent‏;‏ 
    -moz-transform: rotate(35deg); 
    -webkit-transform: rotate(35deg); 
    -ms-transform: rotate(35deg); 
    -o-transform: rotate(35deg); ‏
}
‏#‏star:before‏ { 
    height: 0; 
    width: 0; 
    position: absolute; 
    display: block; 
    top: -45px; 
    left: -65px; 
    border-bottom: 80px solid #fc2e5a; 
    border-left: 30px solid transparent; 
    border-right: 30px solid transparent; 
    content: ''; 
    -webkit-transform: rotate(-35deg); 
    -moz-transform: rotate(-35deg); 
    -ms-transform: rotate(-35deg); 
    -o-transform: rotate(-35deg);
‏}
#‏star:after‏ { 
    content: ''; 
    width: 0; 
    height: 0; 
    position: absolute; 
    display: block; 
    top: 3px; 
    left: -105px; 
    color: #fc2e5a; 
    border-right: 100px solid transparent; 
    border-bottom: 70px solid #fc2e5a; 
    border-left: 100px solid transparent; 
    -webkit-transform: rotate(-70deg); 
    -moz-transform: rotate(-70deg); 
    -ms-transform: rotate(-70deg); 
    -o-transform: rotate(-70deg); ‏
}

النجمة السداسية

star-6pt.thumb.png.1c35b9f261f5f383168bf

HTML

تتطلب النجمة السداسية وجود ‏div‏ مع اسمٍ للشكل، ولنطلق عليه اسم ‏parallelogram‏‏:

‎<div id="parallelogram"></div>‎

CSS

بخلاف النجمة السابقة، فإننا سنقوم بتعديل خصائص الحدود. سننشئ مجموعة من الأشكال ومن ثم نُلصقُها ببعضها ‏البعض لنحصل على الشكل المطلوب:

#‏star_six_points‏} ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    display: block;‏
   ‏ ‏position: absolute‏;‏‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏
    border-bottom: 100px solid #de34f7‎‏;‏‏
    margin: 10px auto‏;‏ 
} 
‏#‏star_six_points:after‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    border-left: 50px solid transparent‏;‏‏
    border-right: 50px solid transparent‏;‏‏
    border-top: 100px solid #de34f7‎‏;‏‏
    margin: 30px 0 0 -50px‎‏;‏‏
}

‏

المضلع الخماسي

pentagon.thumb.png.9ea1eaee793988232c2b6

HTML

‎يتطلب المُضلعُ الخماسي وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pentagon‏‏:

‎<div id="pentagon"></div>‎

CSS‎

نحتاج إلى عنصرين لإنشاء المضلع الخماسي. أول عنصر نقوم بإنشائه هو شكل شبه المنحرف والعنصر الثاني هو ‏المثلث حيث سيكون أعلى الشكل الأول:

#‏pentagon‏ } ‏ ‏
    width: 54px‏;‏
    position: relative‏;‏
    border-width: 50px 18px 0‎‏;‏‏
    border-style: solid‏;‏
    border-color: #277bab transparent‏;‏ 
} 
‏#‏pentagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏height: 0‎‏;‏‏
    width: 0‎‏;‏‏
    position: absolute‏;‏‏
    top: -85px‎‏;‏
    left: -18px‎‏;‏‏
    border-width: 0 45px 35px‏;‏
    border-style: solid‏;‏‏
    border-color: transparent transparent #277bab‏;‏‏
}

المضلع السداسي

hexagon.thumb.png.aca15d01e881404e28cb2a

HTML

‎
يلزمنا ‏div‏ لإنشاء المُضلع السداسي مع اسم له وليكن ‏hexagon‏‏:

‎<div id="hexagon"></div>‎

CSS‎

هناك عدة طرق لإنشاء المُضلع السداسي. إحدى هذه الطرق مطابقة بشكل كبير لطريقة إنشاء المُضلع الخماسي. حيث ‏نقوم بإنشاء مستطيل في البداية ومن ثم نضيف أعلاه مُثلثين:

#‏hexagon‏ } ‏ ‏
    width: 100px‏;‏‏
    height: 55px‏;‏
    background: #fc5e5e‏;‏‏
    position: relative‏;‏‏
    margin: 10px auto‎‏;‏‏
} 
‏#‏hexagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;‏
    border-right: 50px solid transparent‏;‏‏
    border-bottom: 25px solid #fc5e5e‏;‏‏
}
‏#‏hexagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏‏
    bottom: -25px‎‏;‏
    left: 0‎‏;‏‏
    border-left: 50px solid transparent‏;
    border-right: 50px solid transparent‏;‏‏
    border-top: 25px solid #fc5e5e‏;‏‏
}

المضلع الثماني

octagon

HTML


قُم بإنشاء ‏div‏ وأعطه اسم ‏octagon‏‏:

‎<div id="octagon"></div>‎

CSS‎

يُمكن إنشاء هذا الشكل بطرق مُشابهة للشكل السابق. حيث نقوم بإنشاء شكلين شبه منحرفين ومن ثم نضع مُثلثين على ‏كل جانب منهما. على الرغم من وجود بعض الطرق الأخرى لعمل ذلك؛ إلا أن هذه هي أفضل طريقة لذلك:

#‏octagon‏ } ‏ ‏
    width: 100px‏;‏
    height: 100px‏;‏‏
    background: #ac60ec‏;‏‏
    position: relative‏;‏‏
} 
‏#‏octagon:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 42px‏;‏‏
    height: 0‎‏;‏
    position: absolute‏;‏
    top: 0‎‏;‏‏
    left: 0‎‏;‏
    border-bottom: 29px solid #ac60ec‏;
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
} ‏
#octagon:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 42px‏;‏
    height: 0‎‏;‏
    position: absolute‏;‏
    bottom: 0‎‏;‏‏
    left: 0‎‏;‏
    border-top: 29px solid #ac60ec‏;‏
    border-left: 29px solid #f4f4f4‎‏;‏‏
    border-right: 29px solid #f4f4f4‎‏;‏‏
}

شكل القلب

heart.thumb.png.6351acebe3b6af9842e77bc0

HTML


يتطلب شكل القلب وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏heart‏‏:

‎<div id="heart"></div>

‎CSS‎

يُمكن أن يكون إنشاءُ شكل القلب صعبًا بعض الشيء؛ ولكن نستطيع القيام بذلك عن طريق عمل استدارة للعناصر من ‏زوايا مختلفة وتغيير قيمة خاصية ‏transform-origin‏ حتى نتمكن من تغيير موضع العنصر المُحَدَّد:

‏#‏heart‏ } ‏ ‏
    position: relative‏;‏ ‏
}
‏#heart:before, #heart:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 70px‏;‏‏
    height: 115px‏;‏
    position: absolute‏;‏
    background: red‏;‏
    left: 70px‏;‏‏
    top: 0‎‏;‏ 
    -webkit-border-radius: 50px 50px 0 0; 
    -moz-border-radius: 50px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
‏{‏
#‏heart:after‏ {
   ‏ left: 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin: 100% 100%; ‏
}

البيضة

egg.thumb.png.af7b3dc96f72b9f9dbd9839845

HTML


يلزمنا ‏div‏ لإنشاء شكل البيضة مع اسمٍ له وليكن ‏egg‏‏:

‎<div id="egg"></div>‎

CSS‎

إنَّ شكل البيضة مطابق إلى حدٍّ ما للشكل البيضاوي؛ إلا أن ارتفاعها أكبر بقليل من عرضها. نقوم بضبط خاصية ‏الزوايا المستديرة بشكل دقيق حتى نحصل على مرادنا بالضبط:

#‏egg‏ } ‏ ‏
    width: 136px‏;‏
    height: 190px‏;‏
    background: #ffc000‎‏;‏‏
    display: block‏;‏‏
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px‏;‏‏
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%‎‏;‏‏
} ‏

شكل اللانهائية

infinity.thumb.png.5f13d55a7669eb054f2a7

HTML


قُم بإنشاء ‏div‏ وأعطه اسم ‏infinity‏‏:

‎<div id="infinity"></div>‎

CSS‎

يمكن الحصول على شكل اللانهائية بالضبط الدقيق لخصائص الحدود وزاويا الدائرة كما بالشكل السابق:

#‏infinity‏ } ‏ ‏
    width: 220px‏;‏
    height: 100px‏;‏
    position: relative‏;‏‏
}
‏#‏infinity:before, #infinity:after‏ } ‏ ‏
    content: '';‏ ‏ ‏
    width: 60px‏;‏
    height: 60px‏;‏‏
    position: absolute‏;‏‏
    top: 0‎‏;‏
    left: 0‎‏;‏ 
    border: 20px solid #06c999; 
    -moz-border-radius: 50px 50px 0; 
    border-radius: 50px 50px 0 50px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
}
‏#‏infinity:after‏ { 
    left: auto; 
    right: 0; 
    -moz-border-radius: 50px 50px 50px 0; 
    border-radius: 50px 50px 50px 0; 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
‏}

بالون التعليقات

comment-bubble.thumb.png.d0ec2c025677c7c

HTML

قُم بإنشاء ‏div‏ وأعطه اسم ‏comment_bubble‏‏:

‎<div id="comment_bubble"></div>‎

CSS‎

نقوم بصناعة هذا الشكل بواسطة إنشاء مستطيل ذي زوايا مستديرة، ثم ننشيء مُثلثًا ونضعه على الجانب الأيسر كما ‏بالصورة:

#‏comment_bubble‏ } ‏ ‏
    width: 140px‏;‏
    height: 100px‏;‏
    background: #088cb7‎‏;‏
    position: relative‏;‏ 
    -moz-border-radius: 12px; 
    -webkit-border-radius: 12px; ‏
    ‏border-radius: 12px‏;‏
}
‏#‏comment_bubble:before‏ } ‏ ‏
    content: '';‏
   ‏ ‏width: 0‎‏;‏
    height: 0‎‏;‏
    right: 100%‎‏;‏‏
    top: 38px‏;‏‏
    position: absolute‏;‏‏
    border-top: 13px solid transparent‏;‏‏
    border-right: 26px solid #088cb7‎‏;‏‏
    border-bottom: 13px solid transparent‏;‏
}

شكل باكمان (لعبة آكلة الجبنة)‏

pacman.thumb.png.66fb7cd70a416e49d908ba8

HTML

يتطلب شكل الباكمان وجود ‏div‏ مع اسمٍ للشكل ولنسمه ‏pacman‏‏:

‎<div id="pacman"></div>‎

CSS‎

إنشاء شكل الباكمان غير صعب، فكل ما يحتاجه هو نفس خطوات إنشاء الدائرة مع تعديل بسيط في الحدود وخاصية ‏‏‏radius‏ لصنع فتحة على الجانب الأيسر من الدائرة‏:

#‏pacman‏ } ‏ ‏
    width: 0‎‏;‏‏
    height: 0‎‏;‏‏
    border-right: 70px solid transparent‏;‏
    border-top: 70px solid #ffde00‎‏;‏‏
    border-left: 70px solid #ffde00‎‏;‏‏
    border-bottom: 70px solid #ffde00‎‏;‏
    border-top-left-radius: 70px‏;‏‏
    border-top-right-radius: 70px‏;‏‏
    border-bottom-left-radius: 70px‏;‏
    border-bottom-right-radius: 70px‏;‏‏
}

في الختام

توجد هناك العديد من الميزات في استخدام الأشكال المصنوعة بالـ‏CSS‏، فهي أفضل بكثير من وضع صور ‏جاهزة على موقعك. فأنت تستطيع استخدامها الآن كجزء من تصاميم المواقع، على الرغم من أنها قد لا تعمل على ‏بعض المتصفحات مثل إنترنت إكسبلورر بإصداراته القديمة. ‏

الآن وقد انتهيت من درس اليوم، أتمنى أن تكون قد استمتعت فيه، وأنا على استعداد لتقبل أي تعليقات أو تساؤلات أو ‏اقتراحات في هذا المجال.‏

ترجمة وبتصرف للمقال: How to Create Different Shapes in CSS.

حقوق الصورة البارزة: Designed by Freepik.

  • أعجبني 2
 مشاركة
اذهب الى مقالات البرمجة

تفاعل الأعضاء

أفضل التعليقات



انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أضف تعليق

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

×

×
×
  • أضف...