كيف عمل الشكل الموجودة في الصورة باستخدام HTML و CSS؟

حاول تفكيك مكونات الصورة في مخيلتك لتستطيع فهم المحتويات وستجد أنه يمكن بناء هذه الأشكال بسهولة.

لمركز على الشكل الموجود على اليسار الآن، في البداية يوجد صورة لأحد الأندية ويوجد حدود border بيضاء حولها، وتم جعل هذه الحدود دائرية من خلال الخاصية border-radius.

بعد ذلك يوجد مربع يحتوي على اسم النادي، وهذا العنصر له حدود دائرية كذلك عبر الخاصية border-radius، وتم إزاحة العنصر قابلًا ناحية الصورة من خلال الخاصية margin-left (بقيمة سالبة)، كما يمكن إستخدام margin لإزاحة العنصر إلى الأسفل قليلًا ليكون في منتصف الصورة أفقيًا. وبنفس المبدئ يمكن عمل الشكل الموجود على اليمين، مع تغير ترتيب النص (اسم النادي) والصورة كذلك.

ملاحظة: تستطيع ترتيب ظهور الصورة فوق النص من خلال الخاصية z-index

يوجد أكثر من طريقة لتنفيذ ما سبق وليس عليك حتى إستخدام نفس الخصائص، حيث يمكنك أن تستعمل flex box مثلًا بدلًا من margin

حاول تطبيق هذا الأمر وإن واجهت مشكلة في الكود فتستطيع أن تقوم بإضافة سؤال لتحصل على المساعدة بشكل أدق.

بتاريخ 20 ساعات قال سامح أشرف:

حاول تفكيك مكونات الصورة في مخيلتك لتستطيع فهم المحتويات وستجد أنه يمكن بناء هذه الأشكال بسهولة.

لمركز على الشكل الموجود على اليسار الآن، في البداية يوجد صورة لأحد الأندية ويوجد حدود border بيضاء حولها، وتم جعل هذه الحدود دائرية من خلال الخاصية border-radius.

بعد ذلك يوجد مربع يحتوي على اسم النادي، وهذا العنصر له حدود دائرية كذلك عبر الخاصية border-radius، وتم إزاحة العنصر قابلًا ناحية الصورة من خلال الخاصية margin-left (بقيمة سالبة)، كما يمكن إستخدام margin لإزاحة العنصر إلى الأسفل قليلًا ليكون في منتصف الصورة أفقيًا.

وبنفس المبدئ يمكن عمل الشكل الموجود على اليمين، مع تغير ترتيب النص (اسم النادي) والصورة كذلك.

ملاحظة: تستطيع ترتيب ظهور الصورة فوق النص من خلال الخاصية z-index

يوجد أكثر من طريقة لتنفيذ ما سبق وليس عليك حتى إستخدام نفس الخصائص، حيث يمكنك أن تستعمل flex box مثلًا بدلًا من margin

حاول تطبيق هذا الأمر وإن واجهت مشكلة في الكود فتستطيع أن تقوم بإضافة سؤال لتحصل على المساعدة بشكل أدق.

هل هذا جيد 

.behind_the_picture_liverpool {

    display: inline-block;

    background-color: white;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    width: 120px;

    height: 120px;

    padding: 20px ;

    z-index: 123;

    position: relative ;

}

.liverpool_name{

    display: inline-block ;

    background-color: white ;

    width: 250px ;

    height: 80px ;

    text-align: center ;

    border-radius: 50px ;

    -webkit-border-radius: 50px ;

    -moz-border-radius: 50px ;

    -ms-border-radius: 50px ;

    -o-border-radius: 50px ;

    padding: 25px ;

    font-size: 20px;

    position: relative;

    top: 5px;

    left: -55px;

}

بتاريخ 20 ساعات قال Mohammmed Mahmoud:

هل هذا جيد 

.behind_the_picture_liverpool {

    display: inline-block;

    background-color: white;

    border-radius: 50%;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    -ms-border-radius: 50%;

    -o-border-radius: 50%;

    width: 120px;

    height: 120px;

    padding: 20px ;

    z-index: 123;

    position: relative ;

}

.liverpool_name{

    display: inline-block ;

    background-color: white ;

    width: 250px ;

    height: 80px ;

    text-align: center ;

    border-radius: 50px ;

    -webkit-border-radius: 50px ;

    -moz-border-radius: 50px ;

    -ms-border-radius: 50px ;

    -o-border-radius: 50px ;

    padding: 25px ;

    font-size: 20px;

    position: relative;

    top: 5px;

    left: -55px;

}

 

يبدو جيدًا للغاية ولا أرى مشكلة في الكود.

ملاحظة بسيطة: حاول ألا تحدد حجم صندوق النص (اسم النادي) عبر width و height ولكن إستعمل padding ليكون حجم الصندوق نتحاور حسب حجم النص الموجود فيه.