ما يميزنا في همسة نيوز نهتم بوضع كل الاجابات حول الاسئلة والاستعلامات وعدنا لكم بموضوع جديد وهو لرسم دائرة نختار من فئة action لبنة …….. نسردة لكم بشكل حصري في الفقرات القادمة

كيفية رسم دائرة من فئة Action لبنة باستخدام لغة HTML

إذا كنت تريد إضافة دائرة من فئة Action لبنة إلى صفحة الويب الخاصة بك، فإن ذلك يمكن القيام به بسهولة باستخدام لغة HTML. في هذا المقال، سوف نوضح لك كيفية القيام بذلك.

الخطوة الأولى: إنشاء عنصر div

أول خطوة يجب القيام بها هي إنشاء عنصر div الذي سيحتوي على الدائرة. يمكنك تسمية العنصر div كما تريد، ولكن يجب أن يحتوي على فئة Action.

<div class="action"></div>

الخطوة الثانية: تعيين الأبعاد

بما أننا نريد رسم دائرة، يجب أن نحدد الأبعاد لعنصر div. يمكننا القيام بذلك باستخدام الخاصية CSS width و height. يجب أن تكون الأبعاد متساوية لتحصل على دائرة، ويمكنك تعيين القيمة التي تريدها.

.action {
  width: 100px;
  height: 100px;
}

الخطوة الثالثة: تعيين شكل الدائرة

حتى نحصل على شكل الدائرة، يجب أن نستخدم الخاصية CSS border-radius. يمكنك تعيين القيمة التي تريدها، ولكن يجب أن تكون متساوية لتحصل على دائرة.

.action {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

الخطوة الرابعة: تعيين لون الخلفية

يجب أن نعيد لون الخلفية لعنصر div إلى اللون الذي تريده. يمكنك استخدام أي لون تريده، ولكن يجب أن يكون بالقرب من لون النص الذي تستخدمه على صفحتك.

.action {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #333333;
}

الخطوة الخامسة: إضافة نص داخل الدائرة

إذا كنت تريد إضافة نص داخل الدائرة، يمكنك القيام بذلك باستخدام العنصر span ووضعه داخل العنصر div. يمكنك تعيين حجم النص ولونه باستخدام خواص CSS.

<div class="action">
  <span style="font-size: 24px; color: #ffffff;">نص داخل الدائرة</span>
</div>

الخطوة النهائية: الاستمتاع بدائرتك الجديدة!

بعد اتباع الخطوات السابقة، يجب أن تحصل على دائرة Action Block جميلة ومذهلة على صفحة الويب الخاصة بك. يمكنك تغيير الألوان والنصوص والأبعاد حسب رغبتك لتحصل على المظهر الذي تريده.

نامل ان نكون وفقنا في نقل الفائدة والمعلومة النموذجية حول لرسم دائرة نختار من فئة action لبنة ……..