النقاط صغيره دى بتعمل ازاى يا جماعه ؟ واسمه ايه ؟

الأسئلة والاستفسارات
, , ,
#1

Inkedorder_tracking02_%D9%86%D9%82%D8%A7%D8%B7%20
Inkedorder_tracking02_نقاط .jpg640×1220 170 KB

3 Likes
#2

ببساطة أخي محمود، نحن نعلم أن لكل عنصر حدود Border نستطيع أن ننسقها عن طريق الـ Css

وذلك بالذهاب إلى خاصية border وإعطائها القيم التالية:

  1. اللون مثلا red
  2. الحجم مثلا 1px
  3. الشكل مثلا dotted لتظهر على شكل نقاط مثلما تحتاجها أنت في مثالك هذا
border: red 1px dotted;

تستطيع أيضا تحديد فقط جانب من جوانب الحدود، فمثلا هنا نحتاج تنسيق عنصري English و sawsan فقط من ناحية اليسار، فبدلا من أن نحدد الخاصية border، نستبدلها بـ border-left هكذا:

border-left: red 1px dotted;

قد حاولت تجسيد المثال هنا تستطيع الإطلاع عليه واكتشاف مختلف أشكال الحدود:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Lara Darine</title>
    <link href="https://fonts.googleapis.com/css?family=Oxygen:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- layout 3 -->
    <div id="container">
        <!-- layout 1 -->
        <div id="logo">
            <img src="http://www.awfarmarket.com/img/general/top_bar_01.png" alt="Awfar logo">
        </div>
        <!-- layout 2 -->
        <div id="menu">
            <div id="apps">
                <img src="http://www.awfarmarket.com/img/general/toplinks-02.png" alt="Android">
                <img src="http://www.awfarmarket.com/img/general/toplinks-03.png" alt="Apple">
            </div>
            <div id="lang" class="left-border">
                <div class="icons">
                    <img src="http://www.awfarmarket.com/img/general/toplinks-04.png" alt="Map">
                </div>
                <div class="choice">
                    <select name="language" id="language">
                        <option value="english">English</option>
                        <option value="arabic">عربي</option>
                    </select>
                </div>
            </div>
            <div id="profile" class="left-border">
                <div class="icons">
                    <img src="http://www.awfarmarket.com/img/general/toplinks-04.png" alt="User">
                </div>
                <div class="choice">
                    <select name="user" id="user">
                        <option value="sawsan">Sawsan</option>
                        <option value="settings">Settings</option>
                        <option value="logout">Logout</option>
                    </select>
                </div>
            </div>
        </div>
    </div>

    <div id="test">
        <div class="test" id="border">
            <h2>Layout</h2>
            <label for="div1" class="border inputs"> Layout 1
                <input type="checkbox" name="div1">
                <span class="checkmark"></span>
            </label>
            <label for="div2" class="border inputs"> Layout 2
                <input type="checkbox" name="div2">
                <span class="checkmark"></span>
            </label>
            <label for="div3" class="border inputs"> Layout 3
                <input type="checkbox" name="div3">
                <span class="checkmark"></span>
            </label>
        </div>
    
        <div class="test" id="radio">
            <h2>Border type</h2>
            <label class="type inputs"> Dotted
                <input type="Radio" name="radio" id="dotted" onclick="if(this.checked){changeBorderType(id)}" checked>
                <span class="checkmark"></span>
            </label>
            <label class="type inputs"> Solid
                <input type="Radio" name="radio" id="solid" onclick="if(this.checked){changeBorderType(id)}">
                <span class="checkmark"></span>
            </label>
            <label class="type inputs"> Dashed
                <input type="Radio" name="radio" id="dashed" onclick="if(this.checked){changeBorderType(id)}">
                <span class="checkmark"></span>
            </label>
            <label class="type inputs"> Double
                <input type="Radio" name="radio" id="double" onclick="if(this.checked){changeBorderType(id)}">
                <span class="checkmark"></span>
            </label>
            <label class="type inputs"> Groove
                <input type="Radio" name="radio" id="groove" onclick="if(this.checked){changeBorderType(id)}">
                <span class="checkmark"></span>
            </label>
            <label class="type inputs"> Ridge
                <input type="Radio" name="radio" id="ridge" onclick="if(this.checked){changeBorderType(id)}">
                <span class="checkmark"></span>
            </label>
        </div>
    </div>



    <script src="app.js"></script>
</body>
</html>

CSS:

body {
    margin: 0;
    font-family: 'Oxygen', sans-serif;
}

#container {
    width: 100%;
    height: 120px;
    margin: 0 auto;
    display: flex;
}

#logo {
    width: 231px;
    height: 90px;
}

#menu {
    width: 100%;
    height: 16px;
    border-bottom: 1px #e6e1e0 solid;
    background-color: #f6f5f3;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    padding: 8px 0;
}

#menu div {
    display: flex;
    flex-direction: row;
    margin: 0 4px;
}

#apps img {
    margin: auto 2px;
}

.left-border {
    border-left: gray 2px dotted;
}



.outline {
    outline: red 1px solid;
    z-index: 99;
}

#test {
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
    margin: 20px auto;
    width: 80%;
    background: #f6f5f3;
    border-radius: 5px;
    box-shadow: #f6f5f3 1px 1px 8px;
}

.inputs {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  

.inputs input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}


.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #d6d5d2;
    border-radius: 5px;
}

#radio .checkmark {
    border-radius: 50%;
}

.inputs:hover input ~ .checkmark {
    background-color: #e6e1e0;
  }
  

.inputs input:checked ~ .checkmark {
    background-color: #2196F3;
}


.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}


.inputs input:checked ~ .checkmark:after {
    display: block;
}


.inputs .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

JS:

const container = document.querySelector('#container');
const logo = document.querySelector('#logo');
const menu = document.querySelector('#menu');
const checkLayouts = document.querySelectorAll('.border');
const borderType = document.getElementsByClassName('left-border');
const testContainer = document.getElementById('test');


checkLayouts.forEach(layout=> {
    layout.addEventListener('click', () => {
        const checkBox = layout.children[0];
        const name = checkBox.getAttribute('name');

        if (name == 'div1') {
            logo.classList.toggle('outline');
        } else if (name == 'div2') {
            menu.classList.toggle('outline');
        } else {
            container.classList.toggle('outline');
        }
        checkBox.toggleAttribute('checked');
    });
});

const changeBorderType = (id) => {
    testContainer.style.borderLeft = `#659f41 8px ${id}`;
    for (let index = 0; index < borderType.length; index++) {
        const element = borderType[index];
        element.style.borderLeft = `red 2px ${id}`;
    }
}

يمكنك الإطلاع على النتيجة:
https://laradarine.github.io/dotted-border/
وهذا رابط المستودع:

3 Likes