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

حسن حمادة احمد · 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

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية