ازاي ابرمج شريط في صفحة الويب

حسن حمادة احمد · 7 يوليو 2022

ازاي ابرمج شريط زي ده

تم التعديل في 7 يوليو 2022 بواسطة حسن حمادة احمد

عمر قره محمد · 7 يوليو 2022

بتاريخ 4 ساعات قال حسن حمادة احمد:

ازاي ابرمج شريط زي ده

يمكنك عمل شريط شبيه بهذا باستخدام الـ after والـ before واستخدام الـ border انظر للكود المرفق :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <ul id="header-lest">
        <li class="test">
            home
        </li>
        <li class="test">
            profile
        </li>
        <li class="test">
            notifications
        </li>
        <li class="test">
            messages
        </li>
    </ul>
</body>

</html>

عبارة عن شريط ul عادية تحتوي على li واعطيناها الid المسمى header-lest وكذلك اعطينا كل من الـ li الكلاس lest-item.

واعطيناهم الخصائص التالية :

/* هذه الاعدادات ضرورية من اجل بدئ كل مشروع */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

/* نقوم بإضافة الخصائص للقائمة */
#header-lest {
  list-style: none;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  position: relative;
  margin: 20px 20px 0;
  margin-top: 10px;
  height: 24px;
  font-size: large;
}
/* نضيف هذه الخصائص من اجل اضافة حواف زرقاء */
#header-lest::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgb(0, 179, 255);
  border-radius: 7px;
}
#header-lest::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid rgb(0, 179, 255);
}
/* **************************************************************************** */
/* *********** اعداد الازرار والحواجز المائلة********************************* */
/* **************************************************************************** */
.lest-item {
  min-width: 150px;
  height: 30px;
  line-height: 30px;
  position: relative;
}
/* هنا نقوم بإنشاء مثلث باستخدام البوردر */
.lest-item::before {
  content: "";
  position: absolute;
  right: 0;
  border-left: 50px solid red;
  border-bottom: 30px solid transparent;
}
/* هنا نقوم بإنشاء مثلث آخر ابيض ونضعه امام المثلث الحمر ونغيير موضعه قليلاً بحيث يظهر خط احمر فقط  */
.lest-item::after {
  content: "";
  position: absolute;
  right: 5px;
  border-left: 50px solid #fff;
  border-bottom: 30px solid transparent;
}

/* *************************************************************** */
/* *********** حذف الحاجز الاخير ********************************* */
/* *************************************************************** */
.lest-item:last-of-type {
  min-width: 75px;
}
.lest-item:last-of-type::before {
  display: none;
}
.lest-item:last-of-type::after {
  display: none;
}

/* ************************************************************************** */
/* *********** تغيير الوان الحواجز المائلة********************************* */
/* ************************************************************************** */
.lest-item:nth-of-type(1)::before {
  border-left-color: rgb(255, 132, 0);
}

.lest-item:nth-of-type(2)::before {
  border-left-color: red;
}

.lest-item:nth-of-type(3)::before {
  border-left-color: yellow;
}

النتيجة النهائية :

الفكرة الاساسية هنا هي استخدام الخصائص التالية لإنشاء مثلث :

border-left: 50px solid red;
border-bottom: 30px solid transparent;

وللتعلم اكثر حول صناعة الاشكال يمكننا عمل الشكل التالي باستخدام css و الـ borders :

1.png.f4484343635a6368c297423e8e59d7bf.png

الكود المستخدم :

<div></div>
<style>
        div {
     
            width: 0;
            margin: 50px auto 50px;
            border-right: 20px solid red;
            border-left: 20px solid blue;
            border-top: 20px solid green;
            border-bottom: 20px solid yellow;
           }
</style>

ازاي ابرمج شريط في صفحة الويب

السؤال

حسن حمادة احمد

1 جواب على هذا السؤال

Recommended Posts

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية